목차
팀 소개
팀명 - 도원결의
김동현 | 안녕하세요. 귓볼이 큰 유비입니다. |
안혜수 | 안녕하세요. 관우입니다. 술이 식기전에 돌아오겠소. |
이진욱 | 안녕하세요. 장비입니다. 막내입니다. |
주제
기획 의도
주요 타겟층
- 자신의 개발 지식을 공유 하고자 하는 사람
- 다른 사람의 개발 지식을 공유 받고자 하는 사람
- 개발 도중 생긴 이슈를 해결하고자 하는 사람
- 취업이나 이직 관련 정보를 얻고자 하는 사람
- 다른 개발자들과 교류가 필요한 사람
핵심기능
- 개발 지식을 개발자에게 익숙한 마크 다운 편집기로 가공, 생산 공유할 수 있다.
- 개발 중 발생한 이슈에 대한 질문과 답변을 주고 받을 수 있다.
- 안구 건강을 위해 라이트모드, 다크모드를 적용할 수 있다.
- 다른 사용자의 좋아요, 댓글 알림을 받을 수 있다.
스토리보드
기술 스택
- 라이브러리 : React, React Query, React Router, Storybook
- 언어 : Typescript
- 번들러 : Vite
- 패키지 : npm
- API : axios
- 포매터 : ESLint, Prettier
- 상태관리 : Zustand
- 디자인 : Emotion (css prop)
- 배포 : Vercel or Netlify
팀 규칙
브랜치 전략
main
: 배포dev
: feature
의 분기점이 되는 브랜치, feature
가 머지되는 브랜치feature
: 기능 단위 개발을 위한 브랜치커밋 컨벤션
feat | 새로운 기능 추가 |
fix | 버그 수정 |
refactor | 리팩토링 |
design | CSS 등 UI 디자인 변경 |
comment | 주석 추가 및 변경 |
style | 코드 포맷팅, 세미콜론 누락 등 |
chore | 위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 등) |
init | 프로젝트 초기 생성 |
rename | 파일 혹은 폴더명 수정하거나 옮기는 경우 |
remove | 파일을 삭제하는 작업만 수행하는 경우 |
코드 컨벤션
Common
- 한 줄 짜리 if 문도 블럭처리
- 컴포넌트 파일명
PascalCase
- 컴포넌트가 비대해지면
PascalCase
폴더명에index.ts
로 export
- 컴포넌트 화살표 함수로 작성
export
할 때- 컴포넌트만
default export
- 그 이외는
named export
- JSDoc(TSDoc)으로 주석적기
- 중첩된 객체에만
structuredClone
사용, 이외에는 스프레드 연산자 사용
- 변수명 길어지더라도 아예 생략없이(단, 자주쓰는 줄임말은 가능)
- 이벤트 핸들러명은
handle
prefix
- props로 넘길 때는
on
prefix를 사용한다.
- Emotion
styled
사용하지 않는다. css prop
을 사용. 스타일을 별도의 파일로 분리해 사용하고 컴포넌트 파일과 같은 폴더에 위치시킨다.
Typescript
- 인터페이스 or 타입
- api 응답과 관련된 것만 인터페이스, 나머지는 다 타입으로 작성
- 변경되지 않는 객체 as const 붙이기
- 타입스크립트 prefix 적지않기
- Props suffix 붙이기, 컴포넌트 Props 타입은 분리하지 않기(재사용되는 경우 제외)
- 타입스크립트 타입 선언에서도 코드 반복을 줄이기
- 유틸리티 타입 활용
- 유니온, 인터섹션 활용