Next.js 프로젝트 파일 구조 분석

[ public ]
: favicon, img, font, svg 등등

< public/fonts >
: woff 이나 woff 2 만 넣어도 되지만, ttf 이 컴파일 속도가 더 빨라 공식에서도 권장


[ src ]
: 소스 폴더

< src/app > - 자기 구역 느낌 강함
: app 폴더나 pages 폴더를 씀 
: app 폴더 같은 경우 내부는 라우팅용으로만 사용, 컴포넌트 안 글씨, 스타일 등은 contiainers 폴더로 옮기기
-> app 폴더가 청결성을 요구되는 곳이기 때문에 page.tsx 파일을 넣으면 Next 가 라우트 정의 파일로 인식하고 거기에 맞는 작업들을 해줌 즉, 라우터 관련된 부분들을 찾기 힘들어짐
: SSR 이나 Static 렌더링은 껍데기 부분만 사용되고, 동적으로 업데이트가 필요한 내부는 CSF 로 돌아가게 됨
-> 즉, 추후 동적 업데이트가 필요하지 않는 부분도 나중엔 결국 번들 청크 용량 문제 때문에 dynamic import 를 쓰게 됨

< src/containers >
: app 폴더에서 타고 들어와 containers 폴더에서 보통 이루어짐
: tsx, css, state, hooks 이루어짐
* idol 페이지는 뭔지 확인할 것

< src/components > - 전체 구역 느낌 강함
: 여러 페이지에서 공통으로 사용할 수 있는 공용 컴포넌트들을 모아두는 폴더
ex) 버튼, 로딩 같은 컴포넌트를 넣어두고 그때마다 @/components/Loadin 으로 사용
: 보통 containers 에서 만들었던 컴포넌트를 다른데에서도 사용하게 된다면 components 로 이동

< src/constans >
: 여러 페이지에서 공통으로 사용하게 될 상수 값을 넣어둠
* src/constans 와 src/types 폴더가 비슷한데 이 차이점을 확인할 것

< src/hooks >
: 페이지 곳곳에서 사용된느 공통 훅을 모아두는 폴더
: useGA 나 useAlert 같은건 곳곳에서 버튼 누를 때 GA 이벤트 쏘거나 Alert 창 띄울 때 사용돼서 특정 container 안에 넣어두기 보다는 hooks 폴더에 모아둠

< src/libs >
: 외부 라이브러리 모아두는 폴더
: 보통 pakage.json 으로 의존성 설치하기 때문에 쓸 일이 거의 없지만, 종종 튜닝할 때 써야되는 경우가 있음

< src/service >
: 각종 API 요청들이 들어감 

< src/states >
: 페이지 곳곳에서 사용될 state 들을 모아두는 폴더
: 이 폴더에서 최대한 적어야 서비스의 유지 보수성이 올라감

< src/styles >
: 스타일 시트 관련 공통 요소들을 모아두는 폴더

# globals.scss 
: src/app/layout.tsx에서 임포트하여 전체에 적용
: 웹 폰트 선언 파일
: 주로 쓰는 컬러값, CSS 리셋이나 각종 상수값 모아둠

# levels.scss
: 각 종 z-index 값 모아둠
: 따로 모아서 사용하면 좋지만, 방만하게 관리하다 보면 꼬일 수 있음

# variable.scss
: 온갖 종류의 CSS variable 모아둠
: 컬러와 수치 정보를 한 곳에 모아두면, 나중에 편리 (나중에 수정사항이 생길 때 편리)

# animations.scss
: 곳곳에서 사용되는 키 프레임 모아둠
: 보통 키프레임들은 css 파일의 맨 마지막에 들어가야 제대로 작동되기 때문에 CSS 에서 관리하게 되면 지저분 -> @keyframes 로 시작되는 코드들은 한 곳에 모아두기 (중복될 문제 x)


< src/types >
: 각종 타입스크립트 타입 정의가 들어가는 폴더
* 타입스크립트는 공부할 것 (제네릭 전까지 공부해도 ㄱㅊ)

< src/utils >
: 곳곳에서 사용되는 유틸성 함수들을 넣어 관리하는 폴더
: 한꺼번에 모아서 관리하는 것도 좋지만, 곳곳에서 쓰이는 특정 장소에서만 쓰이는 유틸같은 것들은 해당 파일 경로에 utils.ts 를 만들어두고 쓰는 것을 추천


ㅊㅊ : https://miriya.net/blog/cliz752zc000lwb86y5gtxstu