스파르타 스탠다드반 실습 세션 <날 괴롭혀줘> 내용 정리(Next.js 강의 기반)

오늘 스탠다드반 강의 직후, 튜터님이 질문을 내고 참여 사람들 중 핀볼을 돌려 랜덤으로 세 명이 대답한 후, 맞추면 상품을 주는 퀴즈 실습 세션 <날 괴롭혀줘> 가 진행되었다. Next.js를 공부하면서 희미하게 알고 있던 점을 콕콕 집어주는 내용이 도움이 많이 되어서 블로그에 정리해 두려고 한다. 

 

*모범 답변은 수강생들의 답변을 총정리하여 재구성함. 

---

1. 라이브러리와 프레임워크의 차이는 무엇이고 어떤 장단점이 있나요?

 라이브러리(ex.리액트)는 제어권이 개발자에게 있고, 프레임워크(ex.넥스트)는 제어권을 프레임워크가 가지고 있다. 라이브러리는 개발자가 필요할 때 호출하여 사용하는 도구 모음집이고, 가볍다는 장점이 있지만 직접 (react-router-dom과 같은 것들) 가져와야 한다. 프레임워크는 따로 사용 시 설치 안해도 되지만 무겁다. 

2. 코드스플리팅과 번들링, 최적화 키워드를 이용해서 Next.js가 갖는 이점을 설명해주세요!

 코드를 작은 단위로 쪼개서(코드스플리팅) 필요한 부분을 묶어서(번들링) 최적화하여 초기 로딩 속도를 줄여주기 때문에 ttv를 줄일 수 있다. 

3. Nextjs는 완벽한 풀스택 애플리케이션을 만들 수 있게 합니까?

 완벽하지는 않다. 다소 복잡한 백엔드 기술이 필요한 웹소켓, 실시간 채팅 등은 한계점이 있기 때문. 

4. next.js에서 pages router와 app router를 구분짓는 가장 중요한 요인이 무엇이라고 생각하시나요?

 페이지 라우터는 컴포넌트 중심이고 파일기반이고 직관적이다. 앱라우터는 서버와 클라이언트 컴포넌트 분리(use client)가 가능하고, 폴더기반이다. 

5. SSG? 무엇이고 언제 사용? 사용예시까지

 Static Site Generation. 정적 사이트 생성으로 최초 빌드 시에만 생성되고, 컨텐츠가 자주 변경되지 않는 정적인 데이터(소개 페이지, 청첩장 페이지)에 사용된다. 초기 세팅 후 빌드하지 않으면 변동이 되지 않지만 ttv가 짧고 HTML을 생성해서 주기 때문에 SEO 측면에서 유리하다. 

6. TTV, TTI 각 개념이 무엇인가요?

 Time Ti View , 처음으로 화면에 표시되는 시간

 Time To Interactive, 인터렉션이 가능해지기까지의 시간

7. Next가 아닌 리액트 환경에서는 코드스플리팅을 어떻게 구현하나요?

lazy를 통해 컴포넌트 렌더링 시기를 개발자가 조절할 수 있다. + suspense를 통해 로딩 화면을 보여주어 ux까지 챙길 수 있다.

8. ISR의 개념과 사용 예시?

정적인 페이지를 요청에 따라 특정 주기마다 페이지를 가져온다. 다 가져오는 것은 아니고 패칭하는 부분만 업데이트가 된다. Youtube 최신 음악 사이트가 그 예시.

9. CSR과 SSR의 특징과 차이점?

CSR(클라이언트 사이드 렌더링) : 사용자가 웹사이트에 들어올 때 브라우저에서 스크립트로 렌더링이 된다. TTV가 낮지만 렌더링 이후에는 빠르고 SEO에는 적합하지 않다. 

SSR(서버 사이드 렌더링) : 서버에서 렌더링이 된다. TTV가 높고 SEO에 적합하다. 

10. hydration과 ttv, tti 개념을 각각 사용해서 SSR을 설명해주세요.

SSR은 server side rendering이며, 서버에서 HTML을 즉시 반환해서 빠르게 보이기 시작한다. hydration으로 클라이언트에서 HTML에 javascript로 기능을 입혀주며, hydration으로 자바스크립트가 입혀진 HTML으로 상호작용이 가능한 페이지로 사용이 가능하다.

11. SPA가 갖는 주요 장점과 단점에 대해 설명해주세요.

SPA는 싱글페이지애플리케이션으로 리액트를 예시로 들 수 있으며, 초기 렌더링 할 때 프로젝트 규모에 따라 느릴 수 있다는 단점이 있지만 초기 렌더링 이후 페이지 이동시에 빠르게 전환할 수 있는 장점이 있다.(페이지 깜빡임도 없음)  모든 자바스크립트를 한 번에 로드해야하기 때문에 단점은 초기 로딩 시간이 길어진다.

 

 

이번에 퀴즈 세션을 하는데 당일 Vintz 튜터님과 토론한 hydration이 나왔다..! 핀볼 굴렸는데 심지어 내가 걸렸다!! 상품은 못 받았지만 설명을 잘했다고 하셔서 진짜 너무너무 뿌듯하고 기분 좋았다. 운이 좋았는지 이날 꽤 걸려서 상품을 두개나 받아갔다. 히히

퀴즈 세션을 진행하면서 내가 알고 있는 것들 중 어디가 부족한지 더 알게 되었다. 아주 재미있었고 또 했으면 좋겠다.