거북이개발자

1. CSR(Client Side Rendering) -CSR은 최초 요청시에 HTML을 비롯해 CSS, JS 등 각종 리소스를 받아온다. 이후에는 서버에 데이터만 요청하고, js로 뷰를 컨트롤 한다. 장점 : -첫 로딩만 기달리면, 동적으로 빠르게 렌더링이 되기 때문에 UX이 좋다. -서버에게 요청하는 횟수가 훨씬 적어서 서버의 부담이 덜하다. 단점 : -모든 HTML과 static파일이 로드될 때까지 기다려야 한다. (리소스를 청크 단위로 묶어서 요청할 때만 다운받에 하는 방식으로 완화시킬 수는 있지만 해결은 어렵다.) -SEO문제가 발생한다. (검색엔진이 크롤링을 하는데 어려움을 겪는다.) 2. SSR(Server Side Rendering) -SSR은 브라우저가 페이지를 요청할때마다 해당 페이지에..

1. freeze (1). 변경 가능 var o1 = {name:'kim', score:[1,2]} //many code o1.name = 'lee'; 객체의 경우도 많은 코드들이 추가되면 객체 내용물이 변형이 생길 수 있다. (2). freeze var o1 = {name:'kim', score:[1,2]} Object.freeze(o1); //many code o1.name = 'lee'; 객체의 내용을 변경하기 싫을 시 freeze을 이용해준다. 이렇게 변경하려고 시도하면 에러가 나오는 걸 볼 수 있다. 위 사진처럼 변경이 없는 것을 볼 수 있다. (2). 중첩 객체 freeze var o1 = {name:'kim', score:[1,2]} Object.freeze(o1); Object.freeze..

0. 변수 구분 Primitive Object Number Object String Boolean Array Null Undefined Function Symbol 1. 객체의 가변성 (1). Primitive var p1=1; var p2=1; p2=2; 위의 변수들은 p2=1인 새로운 값을 대입해도 p1의 값은 변하지 않는다. (2). Object var o1={name : 'kim'}; var o2={name : 'kim'}; var o3=o1; o1, o2, o3는 객체를 가리키는 변수이다. 그래서 o3의 값을 변경할 시 o1, o3는 같은 객체를 가리키므로 o1의 값도 같이 바뀐다. 2. 객체의 복사 객체를 복사할 시 위처럼 그냥 대입으로 하면 결국 같은 객체를 가리키기 때문에 Object.as..

0. Immutability란? -데이터의 불변하게 다루면 데이터들간의 간섭으로 인한 버그의 가능성을 획기적으로 낮출 수 있다. 1. 이름에 대한 불변함 (1). var var v=1; //many code v=2; var로 설정시 v의 값을 변경하고 싶지 않은 값인데도 불구하고 많은 코드가 추가되면 변경이 생길 수 있다. 이러한 변경은 에러를 발생하지 않기 때문에 심각한 시스템상 버그를 발생 시킬 수 있다. (2). const cosnt c=1; //many code c=2; console.log(c); 자신이 변경하기 싫은 변수를 설정하고 싶은땐 const를 사용해주면 된다. 이렇게 변경하려고 시도하면 에러가 나오는걸 볼 수 있다.

1. || 연산자 문제점 { const name=''; const useName=name || 'Guest'; const num=0; const message=num || 'undefined'; console.log(useName); console.log(message); } 위의 코드를 보면 ||연산자는 '', 0을 모두 false로 인식한다. 이러한 인식은 사용자에게 혼란과, 버그를 야기할 수 있다. 2. Nullish Coalescing Operator { const name=''; const useName=name ?? 'Guest'; const num=0; const message=num ?? 'undefined'; console.log(useName); console.log(message); ..

1. Optional chaining const person1={ name:'Ryu' job : { title 'Engineer', manager:{ name : bob, }, }, }; const person2={ name:'Kim', }; { function printManager(person){ console.log(person.job.manager.name); } } person1 과 person2의 객체가 있고, 매니저의 이름을 프런트하는 함수를 구현하고 싶다. (1)문제점 printManager(person1); printManager(person2); 위의 사진처럼 person2객체는 job, manger이 정의 되어있지 않아서 오류가 난다. (2)해결(&&연산자) { function pri..

1. Template Literals (1)기존의 문자 작성시 const name='Ryu'; const age='27'; console.log('my name is '+name+' my age is '+age); 이런식으로 +기호를 이용하여 작성했다. (2)Template Literals이용시 const name='Ryu'; const age='27'; console.log(`my name is ${name} my age is ${age}`); 이렇게 간소화가 가능하다.

1. Default parameters (1)일반적 default 값 처리 { function printMessage(message){ if(message==null){ message='default message'; } console.log(message); } printMessage(); } 일반적으로 함수를 정의시 default 값을 정의할때 if(message==null) 이런식으로 사용한다. (2)Default parameters 사용시 { function printMessage(message = 'default message'){ console.log(message); } printMessage(); } 이런식으로 간단하게 쓸 수 있다.