2023-12-18 본캠프 53일차 / 72일차 TIL

2023-12-18 본캠프 53일차 / 72일차 TIL

주요 진행사항

- next.js 강의 지급

- next.js 특강

 

next js 특강

1. next를 왜 사용해야하는가

1. 압도적으로 편리하다.

• 문서정리가 잘되어있다 (Docs)
• 튜토리얼 내용이 좋다
• 공식문서만 공부해도 시작하는데 별 무리가 없다

2. 다수의 회사에서 next.js를 할 줄 아는 사람을 뽑는다. (뭔가 엄청 많이 뽑는것같지는 않음)

3. react/vue/angular 중 react가 가장 많은 점유율을 가지고 있다.
SSR (server side rendering) = gatsby next nuxt(vue) remix  중 next가 가장 많은 점유율

4. CRA 더이상 지원을 안한다. (마지막 업데이트 2년전 / 업데이트를 안한다)
하지만 CRA의 기능 대부분을 next.js에서도 제공을 한다.
공식문서에서 권장하는 방법

5. 개발자도구 light house를 사용 하여 성능검사 가능

CRA는 개선 사항을 일일히 다 개선해야함.
but next는 자동으로 이 모든걸 최적화 해준다.

6.  MPA > 로딩 및 html의 개수가 많아 효율적이지 않음. 따라서 SPA를 사용한다. 
하지만 page가 10만개라면 SPA의 초기 랜더링 속도 매우 저하 될 것.
따라서 code spliting 필요 > import를 할 때 react razy를 이용하여 초기 로딩 시 제외함. 해당 페이지 접속시에야 import 한다. 

next는 이 작업 역시 자동으로 개선해준다.

---

2. 개발자 친화적인 부분?

1. react-router-dom 는 라이브러리

하지만, next는 파일/폴더 구조를 통해 자동으로 라우팅 자체 지원 (동적라우팅도 가능)

2. SSR (Server Side Rendering)
next 사용시 정적인 웹사이트는 자동으로 SEO가 잘 되도록 개선해준다.

3. 서버에서만 할 수 있는 메서드를 사용 할수가 있다.

4. vercel 배포가 편하다.

5. react 프레임워크이기 때문에 기존 react를 그대로 사용하면 된다.

---

react는 라이브러리 vue, angular는 프레임워크
vue, angular는 프레임워크이기 때문에 자체기능이 엄청 많다.

react는 라이브러리이기 때문에 다른 프레임워크보다 기능이 많지가 않다.

next는 react를 이용한 프레임워크이기 때문에 react를 더 엄격하게 사용할 수 있다.

-app 라우터 /  page 라우터
react 16v에서 class component > function component / hook
react 18v에서는 server component 업데이트
유일하게 서버 컴포넌트를 사용할 수 있도록 공식적으로 제공하는 것이 NEXT.JS의 APP라우터이다.
아직 PAGE 라우터가 더 안정적긴하다. (충분히 좋다)