폴더 구조 | Notion

대원칙

연관된 것은 모아두자 : 도메인이 같은 것들은 같은 폴더에 모아두자.
직관적인 구조를 만들자 : 특별한 패턴을 따르기보다 처음 본 사람도 쉽게 찾아갈 수 있도록 하자
폴더명은 그냥 단수형으로 통일하자 (일일히 복수,단수 생각하기 복잡함)

public 폴더 사용을 지양하는데 참고한 아티클

<aside> 💡

단, 원본 svg 파일은 public > svgs 안에 넣어두고, pnpm svgr 명령어를 입력하여 svg를 react component처럼 사용하도록 한다.

</aside>


|-- 📁 public
|-- 📁 src
    |-- 📁 asset
	      |-- 📁 svg
	      |-- 📁 image
    |-- 📁 api (도메인에 따라 구분, 그 외는 특정 도메인에서 사용되지 않는 건 적당히 이름 지어서 사용)
	      |-- 📁 domain //도메인 path에 따른 api들을 담아두는 폴더
	      |-- 📁 kakaologin //카카오 로그인에 필요한 api들
    |-- 📁 common (어느 도메인에도 속하지 않는 힘수들, **비즈니스 로직 없는** 컴포넌트들)
	      |-- 📁 component //어디에도 종속되지 않는 공통 컴포넌트들 - 특정 비즈니스 로직 x
	      |-- 📁 util //어디에서든 필요에 따라 사용할 수 있는 유틸 함수들
	      |-- 📁 hook //어디에서든 필요에 따라 사용할 수 있는 hook들 : use~로 사용하기
	      |-- 📁 service(컴포넌트들, 외부 라이브러리를 곁들인) //외부 라이브러리를 사용해 만들어진, 의존적인 것들
	  |-- 📁 shared (여러 도메인에서 사용되며 비즈니스 로직이 포함된 컴포넌트, 함수들을 포함)
	      |-- 📁 component 
	      |-- 📁 util
	      |-- 📁 hook
				|-- 📁 storage //전역 상태 관리에서 필요하다면 존재
				|-- 📁 store //전역 상태 관리에서 필요하다면 존재
				|-- 📁 constant
				|-- 📁 style // 아마 사용 안할듯
    |-- 📁 page (페이지 path에 따라서 폴더 구조 세팅)
   	    |-- 📁 main //https:junhyuk.com/main
		   	    |-- 📁 user //https:junhyuk.com/main/user
		   	    		|-- 📁component
		            |-- 📁constant
		            |-- 📁type //굳이 타입을 분리하고 싶다면 이런 식으로 생성해서 사용!
		            |-- 📁hook
		            |-- 📁util
			          |-- User.tsx //https:junhyuk.com/main 에서 렌더링되는 페이지 컴포넌트 
		            |-- User.styled.ts // 해당 페이지 컴포넌트의 스타일링(없을 수도)
            |-- 📁shared(최상위 도메인,이 경우엔 main, 에서 공유되는 컴포넌트, 함수들)
		            |-- 📁component
		            |-- 📁constant
		            |-- 📁hook
		            |-- 📁util
            |-- 📁index(main에서 사용하는 컴포넌트와 함수들- 공유되는게 아님! )
		            |-- 📁component
		            |-- 📁constant
		            |-- 📁type
		            |-- 📁hook
		            |-- 📁util
			          |-- Main.tsx //https:junhyuk.com/main 에서 렌더링되는 페이지 컴포넌트 
		            |-- Main.styled.ts // 해당 페이지 컴포넌트의 스타일링(없을 수도)
        |-- 📁 admin //https:junhyuk.com/admin
        |-- 📁 mypage //https:junhyuk.com/mypage
   |-- 📁 style (GlobalStyles , theme.ts 등)
   |-- 📁 type (사용되는 타입 파일들) //전역적으로 사용되는 type들 (global.d.ts)
   |-- 📁 route 
       |-- Router.tsx (라우터 파일) //달라질 수 있음
|-- App.tsx
|-- main.tsx
|-- eslint.config.js
|-- .gitignore
|-- .prettierrc.json
|-- .stylelintrc.json
|-- README.md
|-- package.json
|-- tsconfig.json
|-- yarn.lock
등등 나머지 config 파일들

폴더 구조 반드시 지키기!! (그러나, 당장 비즈니스 로직과 UI 로직을 분리할 것이 아니라면 쓸 데 없이 폴더 생성해둘 필요는 없음!)

폴더명은 기본적으로 camelCase
파일명 또한 기본적으로 camelCase
- 단, 컴포넌트 파일명만 PascalCase
- - 인터페이스 파일명까지는 파스칼케이스

앞으로 참고할만한 글

https://f-lab.kr/insight/react-directory-structure-and-style-management-20241209

https://medium.com/daangn/당근페이-fe-4개의-프로젝트를-하나로-합치며-나눈-대화들-b96f837230da 를 참고.