모의면접 질문 정리

1. CSR, SSR, SSG, ISR 에 대해 각각 설명해 주세요.

CSR은 클라이언트 측에서 JavaScript를 통해 ui를 렌더링하는 방식입니다. 초기 로딩 속도가 느릴 수 있지만, 페이지 전환이 빠르고 사용자 경험이 부드럽다는 장점이 있습니다

SSR은 서버에서 미리 렌더링을 한 뒤에 완성된 페이지를 클라이언트에게 전송하는 기법입니다. 최신데이터 반영이 가능하고 SEO에 유리하지만, 페이지 전환 시 서버와 통신해야 하므로 부드러움이 떨어질 수 있습니다.

SSG는 빌드시 완성된 html을 미리 만드는 방식입니다. 빌드타임에 Full Route Cache 에 RSC Payload 형태로 저장되며, 이후 요청 시 동일한 HTML 파일을 재사용합니다. 따라서 초기로딩속도는 빠르지만, 최신 데이터 반영이 어렵다는 단점이 있습니다.

ISR(Incremental Static Regeneration) 은 SSG와 SSR의 장점을 결합한 방식으로, 특정 페이지를 정적으로 생성하면서도 필요에 따라 서버에서 주기적으로 콘텐츠를 재생성합니다.
생성된 HTML은 플라우트 캐시(Flyout Cache) 에 저장되어, 클라이언트 요청 시 재사용됩니다.
하지만 설정된 재생성 주기(revalidate 옵션)에 따라 서버에서 최신 데이터를 가져와 캐시를 업데이트 하므로, SSG의 장점인 초기 로딩 속도와 SSR의 장점인 최신 데이터 반영을 모두 충족할 수 있습니다.
이로 인해 성능과 데이터 최신성의 균형을 효과적으로 맞출 수 있습니다.

2. ISR의 동작방식

1. 즉각적인 캐시 데이터 제공

요청이 들어오면 플라우트 캐시에서 저장된 캐시된 데이터를 즉각 반환합니다.
이때, 데이터가 최신 상태인지 여부는 확인하지 않고, 기존 캐시 데이터를 우선 제공합니다.

2. 프레시(Fresh) 또는 스테일(Stale) 판단

요청 후 백그라운드에서 데이터가 최신 상태(Fresh)인지, 오래된 상태(Stale)인지 판단합니다.
데이터가 스테일이라면, 서버에서 새로운 데이터를 가져와 캐시를 갱신합니다.

3. 자동 응답 없음

캐시가 갱신되더라도 사용자에게 자동으로 새로운 데이터를 제공하지 않습니다. 사용자가 페이지를 새로고침하거나 새로운 요청을 보내야만 갱신된 데이터를 받을 수 있습니다.

3. var, let, const의 차이를 호이스팅 관점에서 설명해주세요.

var, let, const의 차이를 호이스팅 관점에서 설명하자면, 모든 변수는 평가 단계에서 선언이 호이스팅됩니다. 하지만 var는 평가 단계에서 선언과 동시에 undefined로 초기화되기 때문에, 실행 전에 변수를 참조해도 undefined 값을 반환합니다. 반면 let과 const는 평가 단계에서 선언만 이루어지고 초기화는 실행 단계에서 이루어지기 때문에 초기화 이전에 참조하려고 하면 ReferenceError가 발생합니다. 이를 일시적 사각지대(TDZ)라고 합니다.

요약하자면, var는 초기화가 평가 단계에서 이루어지는 반면,
let과 const는 실행 단계에서 초기화가 이루어진다는 점에서 차이가 있습니다.

4. 제어컴포넌트보다 비제어컴포넌트가 좋은건가?

비제어 컴포넌트는 렌더링 최적화가 필요한 상황에서 효과적인 선택이 될 수 있습니다. 제어 컴포넌트는 React에서 권장되는 방식으로, 상태 관리를 통해 화면과 입력값을 동기화하기 쉽지만, 입력값이 변경될 때마다 렌더링이 발생하는 단점이 있습니다. 특히, 폼에 입력 필드가 많거나 유효성 검사를 빈번히 수행해야 하는 경우, 성능 문제가 발생할 수 있습니다.

이런 경우에는 비제어 컴포넌트를 사용하여 렌더링 부담을 줄이는 것이 적합합니다. 비제어 컴포넌트는 DOM에서 값을 직접 관리하므로 렌더링 횟수를 줄일 수 있지만, 상태 관리와 동기화가 복잡해질 수 있다는 점도 고려해야 합니다.

결론적으로, 제어 컴포넌트는 기본적으로 권장되지만, 성능 최적화가 필요한 경우 상황에 따라 비제어 컴포넌트를 사용하는 것이 더 나은 선택이 될 수 있습니다.