[Next 14] 1. 인트로

Next 14를 배워보자.

강의는 제로초님의 'Next + React Query로 SNS 서비스 만들기' ! (클론코딩)

 

 

#1 이번 강의에서는?

Next의 Pages Route 대신 App Router 사용

• App Router는 페이지의 공통 레이아웃 기능이 추가되었다.
• React 18 버전을 쓴다. -> Server Component 사용 예정
  
  • 서버에서 미리 완성된 html을 클라이언트에게 보내준다.
  • 클라이언트의 부담이 적어진다.
  • 그럼 서버에서의 부담이 더 커지지 않나? -> 부담을 해결하기 위해 Next App Router에서는 데이터 캐싱 기능을 적극적으로 사용한다.

 

#2 Next란?

React 위에서 돌아가는 프레임 워크

• 리액트만 사용했을 때에는 React-Router를 사용하는 등 추가적인 작업(라이브러리 설치)이 필요했었는데, Next를 사용하면 추가 작업이 필요 없음(안에 내장되어 있기 때문)
• 그럼 프론트 프레임워크?
  • 맞다. 하지만 백엔드 서버도 제공함!

 

 

#3 강의 듣기 전 마음가짐 정리

클론 코딩 들을 때

• 뇌 빼고 따라 치지 말자.
• 완성된 결과물을 포트폴리오에 넣지 말기.. 클론코딩을 통해 배운거로 새로운 나의 결과물을 만들자.

 

개발(코드, 에러) 질문 잘하는 법

• (온라인에서) "질문해도 되나요?" 로 시작하지 말고 내가 궁금한 걸 구체적으로 적어서 질문을 남긴다.
• 에러가 났다면 에러에 대한 구체적인 상황과 에러 메시지를 함께 올린다.
• 이미 시도해본 case가 있다면 함께 올린다.
• (코드 질문) 답변자가 쉽게 알아볼 수 있도록 코드 포맷은 예쁘게 정리해서 올린다.

 

삽질 덜 하는 법

• StackTrace 잘 확인하기
  • 어디서 에러가 났는지 잘 알려준다. (어느 파일의 코드 몇 번째 줄..)
• 내 에러인지 라이브러리 에러인지 먼저 체크한다.
• Git 커밋 시 작은 단위의 커밋을 날려준다.
  • 특정 커밋에서 에러가 발생했을 때 그 커밋만 reset or revert 하면 되기 때문이다.
  • 한 커밋에 여러 작업이 들어가 있다면 git reset or revert 시 에러가 나지 않는 부분까지 reset 되어버릴 것이다.