HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
육개짱 프론트엔드
육개짱 프론트엔드/
🗞️
Folder Convention
🗞️

Folder Convention

폴더 구조

 
 
해당 폴더 안에서만 쓰는 파일들은 그 안에 따로 두어 폴더와 폴더 사이의 물리적 거리를 가깝게 하는 것이 최근 개발 동향 collocation—> 유지보수 편함
  • src 폴더를 root로 취급
  • 재사용 되는 코드가 있거나, 공통으로 사용될 것 같다면 root 바로 밑에 위치
  • 그 이외에는 사용되는 페이지 및 컴포넌트를 고려하여 최대한 가까이 위치시키기
  • 폴더의 depth가 너무 깊어지거나 모르겠으면 바로 call(나중에 하면 바꾸기 더 어려움)
테스트 파일의 경우 .test.ts테스트 하는 함수가 위치한 폴더에 바로 작성

상세 구조

src

notion image
Src 하위 폴더들은 모두 공용으로 사용된다.

components

notion image

constants

notion image

hooks

notion image
  • hooks 폴더에는 일반적인 custom hook과 / react-query를 사용한 hook을 나눠서 보관해야 함
    • 일반 custom hook은 hooks파일 바로 아래 보관
    • react-query 사용 파일은 hooks/queries 폴더에 보관
  • 모든 파일명 및 변수명은 use + xx 로 통일 Ex) useLogIn
    • 의미가 잘 드러나게 작성
    • 파일명과 변수명 일치시키기
    • 한 파일에서 너무 많은 hook을 다루지 않기
    • export const 키워드로 선언하기
    • react-query를 사용하는 경우 파일명 및 변수명은 useQuery / useMutation인지에 따라 접미사로 Query / Mutation을 붙이기
      • Ex) useMutation을 사용하는 경우 useFetchMutation
 

mocks

MSW 컨벤션

pages

notion image

각 페이지별 폴더구조(핵심!!)

응집도를 높여서 폴더와 파일의 양이 늘어났을때 매우 유용
notion image

routes

notion image

stores

notion image

styles

notion image

types

notion image

utils

notion image

참고자료

  • https://github.com/Hi-Fi-Club/FE/wiki/Styled-Components-%3A-Naming-Convention
 
생성일
Feb 4, 2024 06:37 AM
태그
사용되는 폴더명 예시

						apis/
            hooks/
						styles/
						components/
						types/
						stores/
						mocks/
	
- 소문자 + 접미사로 -s 붙이기
	- `Style(x)` `styles(o)`
- 예시에 나와있는 폴더명만 사용하기
	- `mocking(x)` `mocks(o)`
- 필요하지 않은 폴더는 생성할 필요 없음
1. 공통 컴포넌트
	src/
			components/
									Skill/
												Skill.tsx 
												components/ - SkillItem.tsx
												hooks/ - useSkill.ts
												apis/
												stores/ 

								  Form/
												components/ - Input.tsx, InputButton.tsx
									


2. 특정 페이지에서만 사용되는 컴포넌트일 경우
	src/
			components/
									MainPage/
														MainPage.tsx
														components/
																				Main.tsx // 필요 시 Main 폴더 만들어서 그 안에 위치
																				Sub.tsx
														hooks/
														apis/
														stores/
src/utils/
					sum.ts
					sum.test.ts - 같은 폴더에서 작성