[NEXT.JS] #7 구조잡기

개요

NEXT.JS를 사용하면서 느꼈던 폴더 구조에 대해 작성해보려고 한다.

현재 포트폴리오겸 개발중인 프로젝트기 때문에 완성되지 않은 구조임을 감안해주길 바란다.

또한, 공부가 완벽하지 않아 틀린점이 있을 수 있으니 많은 지적 부탁한다.

public과 src로 크게 분리되며, public에는 font, image, svg 파일들을 보관하는 용도로 사용했다.

 

 

src/app

실질적인 페이지들을 보관한 디렉토리이다.

routing을 통해 접근하는 페이지별로 디렉토리를 구성한 모습이다.

 

 

src/components

공통으로 사용하는 component들에 대해 보관했다.

테이블이나 버튼 등을 모든 페이지에서 공통으로 사용할 수 있다.

 

 

src/config

layout.tsx에서 가지게될 컴포넌트들에 대한 모음이다.

즉, 모든 페이지에서 공통으로 호출되는 페이지들이다.

상단 메뉴나 전역 모달 등을 모아놨다.

 

 

src/hooks

공통으로 사용하는 hook을 모아놓은 폴더이다.

현재는 페이지 이동에 대한 hook만 존재한다.

 

 

src/interfaces

전역에서 사용하는 type에 대해 모아놓은 폴더이다.

게시판을 만드는 중이므로 board에 관련된 type이 정의되어 있다.

 

 

src/utils

공통으로 사용되는 util함수와 url들을 모두 모아놓았다.

사실 따로 분리해야될까 생각했지만 우선은 utils 디렉토리에 모아놓았다.

공통함수로는 날짜 변환이나 암호화 함수 등이 있다.

 

 

 

 

방장은 아래와 같이 폴더 구조를 잡고 개발 중에 있다.

아직 nextjs에 깊이가 깊지 않아 틀린점이 있을 수 있다는 걸 분명히 말씀드리며,

틀린점에 대해서 많은 지적을 통해 방장의 개발능력을 향상시켜줬으면 좋겠다.

 

 

 

 

문의사항이나 피드백은 댓글로 남겨주세요.