제로초 님의 Next + React Query로 SNS 서비스 만들기 인강을 결제하고,
나태해지지 않기 위해 챌린지를 신청하였다.
챌린지 방식은 매주 1개의 섹션을 듣고 정리한 내용을 공유하는 것이다.
섹션 0은 아무래도, 강의의 도입이다 보니 개요와 우리가 강의를 들어야할 때 임해야하는 태도에 관한 것이었다.
이전에 Next.js 12버전의 다른 강의를 들어본 경험이 있지만, 사실 따라치는 수준에 그쳐서
그동안 많은 변화가 있기도 했고, 이번에야말로 Next.js를 체득해볼 것이다.
섹션 0
Next 13 이후 바뀐 점(Next 14에 대하여)
- Server Action
- Caching 및 Revalidating 통합
- Form을 통해 간단한 함수 호출 가능
- 메이저 라이브러리들의 버전 업데이트(React query 4 => 5, Msw 1 => 2, NextAuth 4 => 5)
이 밖에도,
- Turbopack - 앱 및 페이지 라우터에 대한 5,000개 이상의 테스트 통과
- 부분적인 프리렌더링(미리보기): 빠른 초기 정적 응답 + 스트리밍 동적 콘텐츠
등이 있다.
자세한 내용은 공식 홈페이지 - Next.js 14에서 볼 수 있다.
About Next.js (Next.js 13 ~)
Next.js란
- React 라이브러리 위에서 돌아가는 Framework(기존 React에서 여러 라이브러리를 별도로 설치해야하던 기능들을 통합하여 제공)
- SSR(Server Side Rendering 제공)
App Router(Next.js 13 ) vs Pages Router( Next. js 12)
App Router
- App 하위에 모든 파일을 함께 구성(서버 데이터 가져오기에 맞춰진 서버 중심 라우팅)
- 레이아웃 기능(Layout 폴더 내 RootLayout, Header, Nav, Footer를 두어 children으로 감싸주는 형식)
- 미들 웨어를 통해 권한 문제 X
- 서버 컴포넌트 도입(next 서버에서 리액트를 미리 렌더링해서 프론트 혹은 브라우저, 클라언트로 데이터를 보내줄 때 완성된 HTML을 미리 보내주는 것)
- React 18 버전 도입
Pages Router
- 디렉토리 구조 불편
- 디렉토리, 파일명이 경로가 되어, pages 하위에 있는 모든 JS 파일이 페이지/API 경로
pages/index.js =>/ pages/Login.js => /login pages/signup/index.js => /signup
- 공통 페이지 레이아웃 X
- 권한 문제 O(조건부 페이지 내 렌더링)
App router와 Pages router의 차이점에 대해서는 잘 정리된 글이 있어,
여기서 확인해보면 좋을 것 같다.
클론 코딩의 장단점
장점
- 아주 훌륭한 소스를 습득할 수 있음(개발자 도구 등)
- 포트폴리오에 사용할 수 있는 아이디어 부여
- 따라 만들면서 공식문서 내용 습득할 수 있음
단점
- 뇌 빼고 따라하지 말자.(타자치기 연습이 아님) => 왜 이런식으로 코드를 짜고 구성을 했을지 생각
- 클론 코딩에서 다루지 않은 부분은 별도로 고민하고 만들어보라.
- 포트폴리오로 사용하지 마라.(면접관들이 모를 수 없다.) => 배운 내용을 토대로 별도로 기획하여 만들어보라.
리액트 압축 요약 강좌
약 1시간에 걸친 강의였으나, 리액트를 복기하는 느낌으로 봤고 따로 이번 글에는 정리하지 않으려 한다.
에러 잘 질문하는 법 & 삽질 덜 하는 법
나쁜 질문을 하지 않는 것에 초점을 맞춰보려 한다.
