Portfolio

폴더 구조


사용되는 폴더명 예시

						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/

해당 폴더 안에서만 쓰는 파일들은 그 안에 따로 두어 폴더와 폴더 사이의 물리적 거리를 가깝게 하는 것이 최근 개발 동향 collocation—> 유지보수 편함

src 폴더를 root로 취급

재사용 되는 코드가 있거나, 공통으로 사용될 것 같다면 root 바로 밑에 위치

그 이외에는 사용되는 페이지 및 컴포넌트를 고려하여 최대한 가까이 위치시키기

폴더의 depth가 너무 깊어지거나 모르겠으면 바로 call(나중에 하면 바꾸기 더 어려움)

테스트 파일의 경우 .test.ts테스트 하는 함수가 위치한 폴더에 바로 작성


src/utils/
					sum.ts
					sum.test.ts - 같은 폴더에서 작성

상세 구조

src

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

components

constants

hooks

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을 붙이기