<aside> 💡 Section 0

</aside>

13버전 이후 달라진 점

1. App Router
   • 디렉토리 기능 변경
   • 레이아웃 기능 추가
   • 페이지 별 권한 체크 기능이 편해짐(미들웨어 사용)
2. React 18
   • 서버 컴포넌트 활용
     • 넥스트 서버에서 미리 렌더링 후 완성된 html을 보내 준다.
     • 클라이언트의 부담이 줄어드는 한편 넥스트 서버의 부담이 늘어난다.
     • 늘어난 서버의 부담을 줄이기 위해 서버에서 캐시 처리를 많이 구현했다. 따라서 클라이언트에서 직접 캐시를 구현할 일이 줄어든다.

<aside> 💡 Section 1 (~2023/12/16)

</aside>

프로젝트 시작하기

1. public 폴더: 누구나 접근 가능한 서버이므로 모든 사람들이 접근 가능한 이미지 등을 넣어 두면 된다.
2. src/app 구조: app 폴더는 라우팅과 관련된 파일만 넣어 두고 그렇지 않은 파일(mock, model 등)은 src에 넣어 두면 좋다.

브라우저 주소 app 폴더에 반영하기

1. 기본적으로 layout.tsx가 page.tsx를 포함하고 있다.

   • root layout이 모든 page와 layout의 상위에 있다. root layout의 children은 기본적으로 root page, 다른 폴더로 라우팅 되는 경우 해당 폴더의 layout이 있다면 layout, 없다면 page가 된다. 예: RootLayout → (ExploreLayout) → ExplorePage

2. x.com의 url로부터 아래와 같이 폴더 구조를 작성할 수 있다.

   

   • Dynamic Routing: 중괄호[] 폴더로 Dynamic Routing 구현이 가능하다. ([username], [id] 등)
   • 예를 들어 username이 compose, explore와 같이 폴더 이름과 중복되는 경우에는 폴더가 우선한다. 즉, 만약 username이 explore인 유저가 있다고 해도 /explore로 이동하면 explore 페이지로 라우팅된다.
   • not-found도 미리 작성해 두면 좋다. 각 폴더에 해당하지 않는 경우 next가 not-found로 보내 준다.

라우트 그룹

1. layout.tsx, page.tsx의 함수 이름은 어떤 것이든 상관 없다.
2. x.com은 로그인 전후의 레이아웃이 다르다. 이런 경우, 로그인 전과 로그인 후로 폴더를 나누어 구조를 잡는다. 소괄호() 폴더를 만들면 해당 폴더로는 라우팅되지 않는다. 소괄호 폴더의 하위 폴더에는 접근이 가능하기 때문에 그룹핑하기에 적절하며, 소괄호 폴더 역시 layout을 가질 수 있으므로 로그인 전후의 소괄호 폴더와 각각의 layout을 만들면 문제 해결이 가능하다.