2024.07.02 Today Yoonsung Learned

Next.js

App Router와 Pages Router

1. 웹사이트를 기획,설계 할때 어떤페이지가 존재하게 할지에 따라 Routing 을 어떻게 하게 할지 고려하게된다

2. Next.js가 제시하는 본질을 알아야한다

   • React.js가 가지고 있는 한계를 이해하고 내가 왜 Next.js를 사용하는지를 정확히 알고 있어야 한다
   • App router든, Pages router든 주요 핵심 개념(Routing, Rendering, Data Fetching 등)을 잘 이해하는게 중요!

Routing

1. Next.js 프로젝트 셋업

   npx create-next-app@latest

   • src > app > page.tsx파일을 다음과 같이 수정 (page.tsx 파일이 UI 핸들링 할 주 파일)

   export default function Home() {
     return <div>"..."</div>;
   }

2. 주 용어

   • Tree : 계층 구조를 시각적으로 잘 보기 위한 규칙
   • Subtree : - tree의 한 부분, root부터 시작해서 leaf들에 이르기까지의 범위
   • Root : Tree 또는 Subtree의 첫번째 노드 (root layout)
   • Leaf : children이 더이상 없는 node
   • URL Segment : 슬래시로 분류된 URL path의 한부분
   • URL Path : 도메인 이후 따라오는 전체 URL

3. 폴더 기반 Routing

   • page.tsx는 main UI가 표시될곳
   • Static Routing
   • Dynamic Routing
     - 대괄호를 쓰게 되면 패턴에 일치하는 모든 경로를 페이지와 연결하게된다
   • Route Groups