브랜치 전략
- GitHub Flow
- Squash Merge
- 브랜치명:
[type]/#ISSUE-NUMBER_snake_case
- ex) feature/#1_초기_세팅
- 머지한 브랜치는 삭제할 것
// ISSUE TODO - [ ] sdaf - [ ] sdaf - [ ] sdaf - [ ] sdaf
Type Alias
vs Interface
Type Alias
vs Interface
우리 팀 기준
- 객체 타입은
interface
→ 상속 받는 경우가 자주 있는데 이 경우 성능이 좋다고 함
- 함수, union type, util type 등은
type
→ 가독성이 높음
선택지
- type
- 함수 타입을 지정할 때 가독성이 좋음
- 미리보기 등을 좀 더 잘 지원한다고 함
- 선언 병합을 지원하지 않기 때문에 혼돈의 여지가 줄어듦
type Function = (args: number) => void; type UT = ReturnType<Function>
type A = { a: number; } type A = { b: number; } // errror
- Interface
- 상속에 유리하도록 동작
export interface B { a: number; } interface B { b: number } { a: number; b: number; }
디자인 툴
Framer!
- 대략적인 와이어프레임을 AI에게 위임할 수 있다
- 우리는 디자이너가 아니니까.. 😿
ESLint & Prettier 룰
- eslint // 코드 스타일 및 문법을 강제하는 툴 - prettier // 코드 포매터 - eslint-config-prettier // eslint formatting 기능을 없애주는 설정 - eslint-plugin-prettier // eslint에서 prettier의 formatting 기능을 사용하도록 도와주는 기능 - eslint-plugin-jsx-a11y // 웹 접근성과 관련한 eslint 플러그인 - eslint-plugin-react-hooks // react hooks 사용과 관련하여 지켜야 할 사항을 알려주는 플러그인 - eslint-plugin-import // import, export 순서를 정렬해준다. - eslint-plugin-simple-import-sort // import, export 순서를 정렬해준다. - eslint-import-resolver-typescript // 절대 경로를 사용하는 경우 ESLint에게 알려주는 설정 - @typescript-eslint/eslint-plugin // TypeScript의 문법을 이해하고 규칙에 맞게 수정해주는 eslint 플러그인 - @typescript-eslint/parser // TypeScript 환경에서 Babel 보다 더 적합한 파서
{ "singleQuote": true, // 홑따옴표 사용 여부 "semi": true, // 세미콜론 사용 여부 "useTabs": false, // 들여쓰기에 tab 사용 여부 "tabWidth": 2, // 들여쓰기 간격 설정 "trailingComma": "all", // 마지막 줄 comma 사용 여부 "printWidth": 80, // 코드 한 줄 당 최대 너비 "arrowParens": "avoid", // 화살표 함수에서 소괄호 사용 여부 "endOfLine": "auto" // EOL 설정 }
디렉토리 구조
- 비슷한 역할 별로 묶기
✨ 1 - api/ |- types/ # API 요청 및 응답 관련 타입 |- post.ts - common - components # 공용 컴포넌트 - hooks |- queries/ # Tanstack Query - query 파일 |- mutations/ # Tanstack Query - mutation 파일 |- useLogin.ts |- useLogout.ts - pages |- loginPage/ |- index.tsx |- components/ |- LoginButton/ |- index.tsx |- LoginButton.variants.ts |- loginInput/ |- index.tsx |- logoutPage/ - constants/ # 상수 관련 파일 - stories/ # 스토리북 관련 파일 - utils/ # 다양한 유틸 함수 - styles/ # 스타일 관련 파일 |- global.css - routes/ # 라우터 관련 파일
PR & ISSUE
PR TEMPLATE
## 🌍 이슈 번호 <!-- - #number --> - 이슈 번호 ## ✅ 작업 내용 - 구현한 내용 - 세부 작업 ## 📝 참고 자료 - 작업한 내용에 대한 부연 설명 ## ♾️ 기타 - 추가로 필요한 작업 내용
ISSUE TEMPLATE
## 배경 - 문제 - 팀원들과 이야기 해보고 싶은 부분 - 등을 설명해주세요 ## TODO - 해야 할 일을 작은 단위로 구별해서 작성해주세요 ex) - [x] React 프로젝트 생성 - [x] TS 설치 - [] eslint 설치 - [ ] prettier 설치 ## ETC
스타일 라이브러리
- tailwind ❤ 😜 ❤