<aside> 📌 현재 상황

• Nextjs Pages Router를 사용 ( 버전은 Next 13.4 이상 사용중 )
• ContextAPI는 AuthContext에서만 사용
• 상태관리 라이브러리는 따로 사용하고 있지 않으며, Props를 내려주며 Memorization을 따로 하지 않음
• 컴포넌트가 많이 파편화되어 있음 ( 헬퍼나 메인 기능에 대한 함수도 파편화 되어있음 )
• 일부 컴포넌트나 함수별 코멘트 부재
• 컴포넌트의 테스트 및 의존성 검증이 되고 있지 않음
• 모킹 툴을 사용하여 개발하지 않음
• API 명세에 대해서 DTO를 직접 주입해서 사용
• 캐싱을 사용하고 있지 않음
• SSG를 사용하는 영역이 없음
• Nextjs에서 제공하는 Turbopack을 사용하고 있지 않음
• 에러 로그 수집하고 있지 않음 ( 클라이언트 에러 + 서버 에러 )
• REFACTOR 주석 처리

우선순위 파악 필요

</aside>

리팩토링 및 re-code

<aside> 💡 현재 상황의 오류를 개선하기 보다는 더 나은 서비스를 제공하기 위한 리팩토링 및 re-code를 진행

</aside>

Page Router 사용

<aside> ⚠️ Page Router를 App Router로 변경

</aside>

Page Router를 사용할 경우, 어플리케이션의 복잡성이나 특정한 요구사항을 해결하지 못하는 이슈

1. 라우팅

   • 중첩 라우팅에서 Page구조가 복잡해지며 이해하기 어려움
   • 동적 라우팅이나 중첩된 동적 라우팅을 처리할 때, 복잡한 패턴과 구조에 대해 처리하기 힘듦
     • user/[pid] 로 접근하며, user/[pid]에서 [pid]가 특정한 값일 경우에만 예외처리하는 경우 등

2. 페이지 간의 상태 공유 현재 Pages Router는 페이지 간 상태공유가 어렵습니다. 페이지가 변경될 때마다 페이지의 컴포넌트가 unmount되고 새 페이지 컴포넌트가 mount되고 있기 때문입니다.

3. 서버 컴포넌트 및 클라이언트 컴포넌트 App Router 에선 모든 컴포넌트를 기본적으로 서버 컴포넌트로 지정

   클라이언트 컴포넌트는 파일 상단 “use client”를 명시해야 합니다.

   • 서버, 클라이언트 컴포넌트 사용 예시

4. 더 쉬운 Layout 구조

   • 각 경로별 Layout파일
     • multiple 경로에서 하나의 Layout을 사용가능

5. 부분 렌더링

   A 대시보드 페이지에서 차트를 나타내는 영역을 라우트로 구분하여 노출시켜주고 있는 경우,

   • /settings
   • /analytics

   전체가 리렌더링되는 것이 아닌, 차트부분만 렌더링 / 레이아웃은 유지

   • 부분 렌더링이 없다면 전체가 리렌더됩니다.

   기존 라우터 구조에 Controller와 Template가 들어가고 있는 현상을

   • 부분 렌더링
   • 더 쉬운 레이아웃 구조 및 Component Hierarchy

   를 통해 더 쉽게 해결 가능

6. 로딩 및 스트리밍

   • 기존 SSR 방식