[미라클 TIL 21일차] 최종프로젝트 기술 면접 질문 준비

TIL 24. 01. 24

최종프로젝트 기술 면접 질문 준비

Q. Next.js의 Page Router와 App Router의 차이점

13 버전 이전의 Nextjs에서는 pages라는 디렉토리 아래의 디렉토리들을 기준으로 라우팅을 제공했다. 어떤 경로로 페이지에 접근할 수 있는지 pages 아래 파일과 디렉토리를 보고 판단했다.

Nextjs 13 버전 이후 App Router가 등장하며 pages 디렉토리의 이름을 app 디렉토리로 변경되었다. App Router는 Hydratioon을 컴포넌트 단위로 할 수 있게 만들어 준다.

Q. App Router 사용 이유

App Router 방식이 Nextjs 13.4 버전부터 Stable로 바뀌면서 도전, 서버 컴포넌트를 적용하여 성능개선을 하고 싶은 경우

metadata를 간편하게 생성할 수 있다. layout 혹은 page에서 metadata 라는 이름의 객체를 export하거나 generateMetatdatea 함수가 return 해주는 객체로 메타태그들을 생성할 수 있다. 각 페이지별로 정의된 metadata에 정의되지 않은 속성들은 루트 layout에 정의된 metadata로부터 상속받는 것처럼 동작한다.

서버 컴포넌트를 지원하는 App Router는 번들 사이즈가 감소한다. 서버에서 직접 데이터를 가져오고 렌더링에 필요한 라이브러리를 번들에 포함하지 않음으로써 Javascript 사이즈를 줄인다.

Q. 상황에 따른 렌더링 전략

자주 변하면 SSR, 아니면 SSG, ISG 사용

• 정적 페이지 생성 (SSG, Static Site Generation): 완전히 정적인 HTML 웹 사이트를 생성하는 방법

  • 장점
    • 미리 만들어져 가장 빠른 형식의 웹 페이지
    • 검색 엔진 최적화(SEO) 유리
  • 단점
    • 콘텐츠를 업데이트하려면 사이트를 다시 빌드하고 테스트한 후 최종적으로 배포해야한다. 번거롭다
  • 언제 사용?
    • 내용이 거의 변하지 않는 웹사이트 (랜딩 페이지)

• 서버 사이드 렌더링 (SSR, Server-Side Rendering): 서버에서 웹 페이지를 생성하는 방법

  • 장점
    • 동적 콘텐츠가 포함된 페이지를 만드는 데 사용
    • SSR은 SSG만큼 빠르지는 않지만 페이지가 로드되는 즉시 콘텐츠가 나타나므로 유저가 빠르게 콘텐츠를 확인
    • 검색 엔진 최적화에 유리
  • 단점
    • 모든 요청이 서버에서 처리되기 때문에 서버에 높은 연산 능력 필요
    • 캐싱에 복잡한 구성이 많이 필요
  • 언제 사용?
    • 매우 빈번하게 변경되고 SEO에 크게 의존하는 매우 동적인 콘텐츠를 포함하고 있는 사이트

• 점진적 정적 재생성 (ISR, Incremental Static Regeneration): 전체 사이트를 재빌드할 필요 없이 페이지별로 정적 생성을 사용

  • 장점
    • 페이지를 미리 렌더링하고 캐시하기 때문에 빠르다
    • 내용 변경되어도 사이트를 다시 배포할 필요가 없다
    • 검색 엔진 최적화(SEO)에 유리
  • 단점
    • 콘텐츠가 변경된 후에 사이트를 방문하게 되어도 이전의 콘텐츠를 제공한다. 새 버전의 웹사이트는 확인할 수 없다
  • 언제 사용?
    • 콘텐츠가 동적이지만 자주 변경되지 않는 사이트

• 클라이언트 사이드 렌더링 (CSR, Client-Side Rendering): 자바스크립트를 사용하여 브라우저에서 직접 페이지를 렌더링 (모든 로직, 데이터 페칭, 라우팅을 클라이언트에서 처리)

  • 장점
    • 동적 콘텐츠가 포함된 페이지를 만드는 데 사용
    • 서버 비용이 높지 않다
    • 처음 로드한 후 다른 페이지를 로드하는 속도가 매우 빠르다
  • 단점
    • 검색 엔진 최적화(SEO)가 잘되지 않는다.
    • 느린 초기 로드 시간과 상호 작용하기 위한 시간이 성능 저하
  • 언제 사용?
    • SEO에 크게 의존하지 않는 모든 사이트. 풍부한 사이트 상호작용과 웹, 크로스 플랫폼 어플리케이션

SSR은 사용자가 요청할때 마다 그 시점에 페이지를 새롭게 렌더링

SSG는 클라이언트가 요청하는 시점이 아니라 빌드 시에 페이지를 미리 생성해놓는 것

ISR은 빌드 시점에 페이지를 렌더링 한 후, 설정한 시간 마다 페이지를 새로 렌더링

Q. Server/Client 컴포넌트 특징

• 서버 컴포넌트

Q. 서버 컴포넌트의 단점

Q. Image 컴포넌트

Nextjs에서는 Image 컴포넌트

이미지를 최적화하는 과정을 Next.js 서버에서 수행한다. 서버 컴포넌트로 구현되어 있고 상황에 따른 Route handler + 이미지 최적화까지 수행한다면 서버의 부담이 너무 크다. 페이지에 이미지가 거의 없거나 사용자가 많지 않은 사이드 프로젝트에서는 적용해볼 만 하다.

Q. module CSS와 Sass를 사용한 이유

서버 컴포넌트에서는 CSS-in-JS를 지원하고 있지 않다고 들었다. 여러 라이브러리에서 사용가능하도록

서버 컴포넌트에 CSS를 입히기 위해서는 빌드 타임에 CSS를 생성해야 한다. 따라서 기존의 CSS-in-JS를 사용하기가 어렵다. NextJS에서도 CSS 모듈이나 post css tailwind를 쓸 것을 권장한다.

빌드타임 css-in-js 이해하기 pandacss와 vanila extract

Q. 브라우저 렌더링 과정

1. 먼저 브라우저에서 사용자가 URL을 입력하고 접속하면 웹 서버에서 HTML 파일을 브라우저로 내려준다.
2. 브라우저가 HTML 파일을 파싱한다. 파싱하면서 DOM을 생성한다.
3. <link> 태그를 만나면 외부 리소스를 다운로드한다.
4. CSS 외부 리소스를 다운로드하면 CSS 파일로 CSSOM을 생성한다.
5. <script> 태그를 만나면 JavaScript 파일을 다운로드한다.
6. DOM + CSSOM을 합쳐 Render Tree를 만든다.
7. Element의 위치와 간격을 계산하는 Layout 과정이 일어난다.
8. 레이어 별로 실제 그리기 작업을 수행하는 Paint 과정이 일어난다.

CSS와 JS는 렌더링 차단 리소스이다. CSS가 다운로드 되지 않으면 CSSOM을 만들 수 없고, CSSOM을 만들 수 없으면 Render Tree 가 만들어지지 않아 다음 순서를 진행할 수 없기 때문. (그래서 defer 또는 async 속성을 사용 - 차이점은 async는 문서 내 순서와 상관없이 다운된 스크립트가 먼저 실행, defer는 문서에 추가된 순서)