![]()
1. 웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요. Client Side Rendering (CSR)CSR은 클라이언트(브라우저)에서 웹 페이지를 렌더링 하는 것 이다. 동작방식은 다음과 같다. 사용자가 사이트에 접속하면 서버에서 index라는 HTML파일을 클라이언트에 보내준다. 이때 받는 index 파일은 body 안에는 id="root"만, 그리고 어플리케이션에서 필요한 자바스크립트 링크만 들어있는, 가장 추상적이고 심플하게 이루어져 있다. 따라서 HTML이 텅텅 비어져 있기 때문에 처음 접속 시 빈 화면만 보인다.이후 링크된 JS파일을 서버로부터 받아오는데 이 JS파일에는 어플리케이션에 필요한 로직들 뿐만 아니라 어플리케이션을..
1. 리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요. 리액트에서 배열을 렌더링할 때 key를 지정해야 하는 이유는 두 가지가 있다. 1. 성능 최적화를 위해 2. 어떤 항목을 변경, 추가 또는 삭제했는지 식별하기 위해 하나씩 살펴보자. 1. 성능 최적화를 위해 배열의 각 항목을 렌더링할 때 리액트는 Virtual DOM을 사용하여 실제 DOM 업데이트를 최소화한다. 이때 리액트는 각 요소의 key를 비교하여 변경된 부분을 파악하는데, key가 없으면 리액트는 각 요소를 변경된 부분으로 인식하지 않고, 전체를 다시 렌더링 하게 되므로 성능에 부담을 줄 수 있다. 2. 어떤 항목을 변경, 추가 또는 삭제했는지 식별하기 위해 요소마다 key로 고유한 값을 지정해주어야 요소를 삭제..
![]()
1. 예시의 코드를 실행할 때, 콘솔에 출력될 값과 그 이유를 설명해 주세요. // 1번 let num = 1; // 2번 setTimeout(() => { num = 2; }, 0); // 3번 num = 3; // 4번 console.log(num); 답: 3 동기 실행은 코드가 순차적으로 실행되는 방식이다. console.log("1st"); console.log("2nd"); console.log("3rd"); // '1st' // '2nd' // '3rd' 위와 같은 코드를 작성하고 실행해 보면 예상했던 것처럼 1st, 2nd, 3rd가 차례대로 찍히는 것을 알 수 있다. 이처럼 코드가 위에서부터 아래로 내려오면서 하나가 끝나면 다음 코드가 실행되는 방식을 동기적 처리 (Synchronous)라..
