🛠️ 기술 스택
비동기 및 에러 처리는 어떻게 할 것인가 ?
- 종혁
- [ suspense 컴포넌트 + errorboundary 컴포넌트 ] 를 사용하여 제어하는 것이 좋아보인다 !
- errorboundary 컴포넌트가 감싸는 형태
⇒ 비동기는
suspense 컴포넌트 로 처리, 에러 처리와 관련된 errorboundary 컴포넌트에 대해선 추가 조사가 필요
💄 코드 컨벤션
🧑🏻💻 eslint, prettier
eslint, prettier 추천해주는거 까지 + prettier에서 설정 추가하기 (tap 칸 수, 속성 줄 바꿈 등등)
- 홑따옴표 (’ ’) 사용
⚡️ code 규칙
- 컴포넌트 생성할 때는 화살표 함수 사용
- if문 curly룰 적용
네이밍
- type, 컴포넌트, 파일명 ⇒ PascalCase (ex.
MainPage.tsx)
- 함수, 변수(state 등)명 ⇒ camelCase
- 함수명 - 함수 네이밍은 동사 + 명사 (ex. onChange, getUserData …)
- 함수명, 변수명 작성 시, 함축어 말고 풀네임 : btn ⇒ button
- 상수명 ⇒ UPPER_SNAKE_CASE (ex.
API_KEY)
이벤트 핸들러
- 이벤트 발생 시 동작하는 함수들 ⇒ on~~ (ex.
onBackMove)
css
- font-size : rem
- widht, height : px, vw, vh (100%가 아닌 %는 지양)
- margin, padding : px
styled부분은 컴포넌트 아래에 작성하기
type
interface사용
- alias 절대 경로(경로 별칭) ⇒ /src = @
- API 응답 타입 위치
- 재사용성 높은 것은 type.ts 폴더에 관리
- nullish 연산자
- 일단 사용하되, PR 때 논의 (눈에 잘 안 보일 경우 안쓰는 방향으로 조정)
- 삼항연산자, 축약 표현(&&) vs if문
- JSX 내부에선 필연적으로 삼항연산자, 축약 표현(&&)
- JSX 외부, 즉 함수를 정의할 때는 PR 때 논의
- 삼항연산자 중첩 금지
- if문 ⇒ 가능하면 Early Return
- curly-rule 사용
React 컴포넌트 타입
- 리액트 v18로 넘어오면서
React.FCorprops & 반환 타입을 직접 지정하는 형태로 타이핑 해줘야 한다.
⇒ React 컴포넌트 타입은 React.FC을 사용
const Welcom: React.FC<WelcomeProps> = ({ name }) => { ... } // 근데 책에 나와있는 예시에서는 별도로 컴포넌트 타입을 지정해주지 않음
📂 디렉토리 구조
작업 중 필요에 따라 유기적으로 변동
(아래는 예시로 가져온 디렉토리 구조) ├── src └── assets | │ ├── components | | └── Post // default 컴포넌트에서 분리가 발생하면 여기에 넣기 | | └── index.tsx // default 컴포넌트 │ ├── types // 명세 + 한 번 이상 쓰이는 타입 파일 | ├── pages | ├── constants // 스타일 상수, 그냥 상수는 파일로 분리! | ├── hooks | ├── apis | ├── atoms | ├── utils | ├── styles | ├── storage | ├── App.tsx | ├── index.tsx └──
⚙️ github
⌥ 브랜치 전략
github flow 기반
main : 배포 전용 브랜치develop : 개발 전용 브랜치pull 받을 때는 develop로 부터 받으며, develop에서 브랜치 분기가 일어난다.
- 기능을 추가할 때는
feature/기능명
- 무언가를 수정할 때는
fix/기능명
- 스타일 수정할 때는
style/기능명
- 주석 제거, 등등 문서 작업
docs/기능명
- 이슈를 사용한다면
feature/#이슈번호/기능명
- 기능 명 작성 시, 단어가 여러 개일 경우
-으로 구분한다.
PR 보낼 때 feature/@ → develop 로 보낸다. ⇒ PR 보내고 브랜치를 삭제하는 방식
- 실질적으로 레포에 남아있는 브랜치는
main, develop
develop 브랜치에서 작업 내용 검수한 후 배포 전 main 브랜치로 머지 🌈 커밋 컨벤션
gitmoji + 템플릿 기반 commit 작성 (+ 이슈 번호)
- 커밋 메세지 형태 (템플릿 형태에 맞게 수정 필요)
✨ 타이머 기능 추가 - 메인 페이지에 타이머 기능을 추가 하였습니다. 이슈 번호 : #6
- 깃모지 사용법
- 커밋과 이슈 연결하기
![[개발] Github 이슈와 커밋 메시지를 연결해보자](https://www.notion.so/image/https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Ffavicon%2Ftistory_favicon_32x32.ico?table=block&id=99a987b4-06fb-47df-be26-e6070dac2e66&cache=v2)
![[개발] Github 이슈와 커밋 메시지를 연결해보자](https://www.notion.so/image/https%3A%2F%2Fimg1.daumcdn.net%2Fthumb%2FR800x0%2F%3Fscode%3Dmtistory2%26fname%3Dhttps%253A%252F%252Fblog.kakaocdn.net%252Fdn%252FcQYszU%252FbtqP9rNDDT4%252FxrrD6RrKWTkltTzasrGrc1%252Fimg.png?table=block&id=99a987b4-06fb-47df-be26-e6070dac2e66&cache=v2)
아래 명령어 사용시 커밋 template 적용 가능.
파일 이름을 .gitmessage.txt 로 변경(파일 명 앞에 온점 중요합니다)해주시고 파일이있는 디렉토리에서 명령어를 실행해주시면 됩니다. or 디렉토리까지 적어주시면됩니다
git config --global commit.template .gitmessage.txt
git config --global commit.template /test/study/.gitmessage.txt
폴더 대소문자 구분을 위하여
git config core.ignorecase false 으로 대소문자 구분 가능하게 설정 후git rm -r --cached . 로 현재경로의 캐시를 지워주신뒤 add, commit 등 진행해주시면 됩니다슬랙&깃 연동