폴더 구조

frontend/.
├── public
│   ├── favicon.ico
│   ├── next.svg
│   └── vercel.svg
├── src
│   ├── api
│   ├── components
│   ├── pages
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   └── index.tsx
│   ├── stories
│   ├── utils
│   ├── hooks
│   ├── constants
│   ├── assets
│   ├── types
│   └── styles
└── tsconfig.json

컴포넌트 폴더 구조

├── src
│   ├── components
│   │   ├── common
│   │   │   ├── Button
│   │   │   │   ├── Button.css.ts
│   │   │   │   └── Button.tsx
│   │   │   └── index.ts   
│   │   └── problem      # 도메인별로 나눈다
│   │       ├── ProblemContent
│   │       │   ├── ProblemContent.css.ts
│   │       │   └── ProblemContent.tsx
│   │       ├── CommandAccordion
│   │       │   ├── CommandAccordion.css.ts
│   │       │   └── CommandAccordion.tsx
│   │       └── index.ts
│   └── pages
│       ├── _app.tsx
│       ├── _document.tsx
│       └── index.tsx 

코드 컨벤션

• 컴포넌트 폴더, 파일명은 파스칼 케이스로 작성한다.
• 나머지 폴더명은 카멜 케이스로 작성한다.
• 컴포넌트 props 타입 선언 시 <컴포넌트명>Props 와 같은 형태로 파스칼 케이스를 지켜서 작성한다.
  • export interface ButtonProps {}
• 도메인 관련 타입 선언 시 <도메인> 과 같은 형태로 파스칼 케이스를 작성한다.
  • export interface Bookmark {}
  • 모노레포지만.. 백엔드 인터페이스 기다릴 수 없다! 각자 만들고 리팩터링 때 합치자!
• 스타일 관련 코드 컨벤션은 사용해보고 추후에 결정한다.
• Early Return 패턴을 사용한다.
• 이벤트 핸들러 props에는 on 접두사를 붙이고, 값으로 넘길 때에는 handle 접두사를 붙인다.

function Form({ onSubmit }) {

	const handleSubmit = () => {
		onSubmit();
	};
	
	return (<form>
		<button type="submit" onClick={handleSubmit}></button>
	</form>);
}

function List({ data, onClick }) {
	const genClickHandler = (id) => () => onClick(id);
	
	return (<ul>
		{data.map((id) => <li onClick={genClickHandler(id)}></li>)}
	</ul>);
}

• 함수명은 동사뒤에 명사가 오도록 조합하고 카멜 케이스로 작성한다..
• 조건 관련 변수에는 is를 붙이지 않는다.
  • ex. isChecked ❌ checked 🙆🏻‍♀️