Next 폴더 구조에 대한 고민: 관심분리

 

기존 react native 프로젝트 구조는,

├── apollo
├── assets
│   ├── gf-asset
│   │   ├── collection
│   │   ├── roubisy
│   │   └── themes
│   ├── icons
│   ├── image
├── c_components
│   ├── analysis_stack
│   ├── atom
│   │   ├── icon
│   │   └── text
│   ├── home_stack
│   ├── molecules
│   ├── my_roubit_stack
│   ├── on_alarm_stack
│   ├── onboarding_stack
│   ├── organisms
│   ├── presenter
│   ├── setting_stack
│   ├── template
│   └── universal
├── c_containers
│   ├── analysis_stack
│   ├── home_stack
│   ├── my_roubit_stack
│   ├── on_alarm_stack
│   ├── onboarding_stack
│   ├── setting_stack
│   └── universal
├── c_screens
│   ├── analysis_stack
│   ├── home_stack
│   ├── my_roubit_stack
│   ├── on_alarm_stack
│   ├── onboarding_stack
│   ├── root_tab_stack
│   ├── setting_stack
│   └── universal
├── constants
├── context
├── hook
├── lang
├── navigation
├── recoils
├── types
└── utils

우선 screen,container,component로 대분류하고,

(`c_`를 붙인 이유는 screen,container,components 폴더를 모아서 보려고! prefix를 단 것이다.)

 

stack 별로 폴더를 구성했다.

특정 container에서 사용되는 hook은 전부 root에 있는 hook에 넣었는데,

이렇게 하니까 어떤 hook이 어디에서 관리되고, 어떤 hook이 글로벌하게 쓰이고 있는지 파악이 안되었다.

 

웹뷰를 도입하게 되어 새로 만든 웹용 레포지토리.

이곳은 폴더관리를 어떻게 해야하나 고민하던 중 아래 글을 보게 되었다.

https://betterprogramming.pub/how-to-structure-your-next-js-app-with-the-new-app-router-61bf2bf5a20d

How to Structure Your Next.js App With the New App Router

 

핵심은 관심분리다.

한 페이지를 구성할 때 쓰이는 component,hook 등은 모아놓자는 것이다.

. 
└── 앱/ 
    ├── ... 
    └── (인증)/ 
        ├── LogoutModal/ 
        │ ├── LogoutModal.tsx 
        │ ├── LogoutModal.test.tsx 
        │ ├── LogoutModal.stories.tsx 
        │ └── LogoutModal.module.css 
        ├── useAuth.ts 
        ├── User.ts 
        ├── 가입/ 
        │ └── page.tsx 
        └── 로그인/ 
            └── page.tsx

인증페이지가 있다면, 이곳에 필요한 LogoutModal, useAuth hook, User 관련 인터페이스(etc), 가입과 로그인 페이지 등을

(인증) 폴더 안에서 관리하겠다는 것이다.

물론 전역으로 쓰이는 것이 있다면 그것은 따로 폴더를 만들어서 관리하고!

 

이 핵심만 가지고 폴더 구조를 짜보려 한다.

 

 

참고

https://velog.io/@jodmsoluth/nextjs-%ED%8C%8C%EC%9D%BC%EA%B5%AC%EC%A1%B0

https://betterprogramming.pub/how-to-structure-your-next-js-app-with-the-new-app-router-61bf2bf5a20d