[원티드] 프리온보딩 프론트엔드 챌린지 7월 - 사전과제

1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.

CSR은 영어 그대로 클라이언트 측 자원을 이용하여 브라우저에서 자바스크립트로 페이지를 직접 렌더링하는 것을 의미합니다. 모든 작업이 서버가 아니고 클라이언트에서 처리됩니다.

 

 - CSR 렌더링 순서 

• HTML load -> DOM -> JS load -> AJAX or Fetch API -> data load -> Update -> 추가 리소스 -> DOM 반영(layout - paint - composite)

 

 - CSR의 장점

• 서버의 부하를 줄일 수 있다.
• 사용자의 입력에 빠르게 반응한다.

 

 - CSR의 단점

• SEO(검색엔진최적화)가 제대로 이루어지지 않을 수 있다.
  구글 검색엔진은 처리가 가능하다.
• 네트워크 속도의 영향을 많이 받아 처음 페이지 방문시 렌더링 지연될 수 있다.

---

2. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.

 

 - 다시 돌아온 SSR ( 렌더링의 역사 )

• 정적 페이지 - 미리 작성된 HTML 전송.
• CGI ( Common Gateway Interface ) - 동적 HTML 생성을 위한 외부 프로그램을 불러오는 방식.
• SSR ( Server Side Rendering ) - 요청에 따라 동적으로 HTML 생성.
• CSR ( Client Side Rendering ) - 초기 자원을 전달 후 클라이언트에서 렌더링 후 필요한 데이터를 AJAX or Fetch API를 통해 요청 - 업데이트.
• SPA ( Single Page Application ) - CSR을 확장한 형태, 동적으로 콘텐츠를 받고 클라이언트에서 라우팅과 상태 관리
• SSR + CSR - 초기 로딩 시에는 SSR을 사용, 이후는 CSR을 통해 동적인 상호작용 데이터 업데이트

 

 - SSR이 필요한 이유

• 렌더링된 HTML을 받기 때문에 SEO나 초기 렌더링 속도에 유리합니다. (검색엔진이 최신의 정보를 인식할 수 있다.)
• 검색된 검색결과를 미리보기를 제공할 수 있습니다.
• 필요한 초기 데이터를 페이지와 함께 전송하여 효율적으로 처리 할 수 있습니다.
• 클라이언트 리소스나 환경에 제약이 없이 동일한 콘텐츠를 제공한다.

---

 

3. Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.

 

• packages/next/src/cli/next-start.ts
• https://github.com/vercel/next.js/blob/canary/packages/next/src/cli/next-start.ts

 

next-start.ts 기능 :

1. 명령어에 전달된 옵션을 파싱 - 확인.
2. '--help' 옵션이 전달되면 도움말을 출력.
3. 설정 파일을 로드하고, 필요한 매개변수와 함께 Next 서버를 시작.

 

결론

await startServer({
    dir,
    isDev: false,
    hostname: host,
    port,
    keepAliveTimeout,
    useWorkers: !!config.experimental.appDir,
})

 yarn start(or npm run start) 스크립트를 실행하면 해당 프로젝트 디렉토리에서 Next Server를 실행한다.