본격 개발 시작하기 전에 해야할 게 이렇게 많다니..!!
세상은 넓고 내가 모르는 것은 많다
오늘 회의에서는 코드 컨벤션, 커밋 컨벤션을 정했다
아는 게 없어서 토할 거 같았지만 쫄지 마 임뫄!
깃 플로우
브랜치는 main, develop, feature/* 를 사용
흐름
feature => develop => main
- feature => develop (squash)
- develop => main (merge)
main
- main에 병합하려면 PR과 승인이 필요
develop
- feature/* 에서 작업이 끝난 내용은 squash merge로 develop에 병합
Squash란?
feature/*
- *은 이슈 번호를 사용
커밋 컨벤션
커밋 메세지 포맷
<>: required []: optional
# subject
<issue> <type>[scope]: <description>
//스코프 : 페이지 단위로 ex. [#123]feat[랜딩]:리마인딩
#body
[body text]
#footer
[refs] : #이슈번호를 쓰면 이슈쪽에서 해당 커밋을 확인할 수 있다 커밋 종류
| 타입 | 의미 |
|---|---|
| feat | 새로운 기능 추가 |
| fix | 버그 수정 |
| style | 코드 포맷 변경 |
| refactor | 코드 수정 |
| comment | 주석 추가 |
| docs | 문서 수정 |
| test | 테스트 코드 추가 또는 변경 |
| chore | 세팅 관련 변경 |
| rename | 폴더 이동 또는 이름 변경 |
| remove | 파일 삭제 |
브랜치 이름
feature/이슈번호
스코프 종류
페이지 단위
ex)[#123] feat(Home):
커밋 내용
- 가능하면 생략
- 가능한 간결하게 부가 설명
- 변경 내용이 많을 때 내용 목록
커밋 바닥글
생략
feature -> sqaush merge -> develop -> merge ->
https://im-developer.tistory.com/182
commit a + b + c를 합쳐서 새로운 commit, abc를 만들어지고 master에 추가된다.abc는 1개의 parent를 가진다.feature 브랜치의 commit history를 합쳐서 깔끔하게 만들기 위해 사용한다.
hooks => 글로벌 훅스 / 컴포넌트 후크
ex. 스크롤 체크
코딩 컨벤션
폴더 구조
public/
src/
assets/
components/
*lib/
pages/
recoil/
*utils/주석
- 가능한 주석을 사용하지 않고 이해가 가능한 변수나 함수 이름을 사용
- 복잡한 로직에는 필수로 적용
주석 키워드
TODO: 추후 할 작업이나 개선 방향이 있는 경우
케이스 규칙
PascalCase (타입스크립트 등)
- type
- interface
- component
camelCase
- let variable
- function
- hook
- props
UPPER_CASE
- const variable
변수명
- 역할을 유추할 수 있는 이름 사용
- e, i, v 같은 단일 글자 변수 사용 금지
- 미리 정의 하지 않은 pw 같은 추상적 또는 단축 지양
예약 단축어
- evt : 이벤트
boolean 접두사
가능한 is can has 같은 접두사 사용
함수명
- 함수 이름은 동사로 시작
- 이벤트를 받는 함수의 경우
handle{Target}{EventType}형태로 사용
ex)handleCreateButtonClick
파일명
.ts는 camelCase 사용.tsx는 PascalCase 사용
Prettier
| 옵션 | 값 |
|---|---|
| singleQuote | true |
| semi | false |
| useTabs | false |
| tabWidth | 2 |
| trailingComma | none |
| arrowParens | avoid |
| bracketSpacing | true |
| bracketSameLine | false |
- singleQuote : ''
- semi: 세미콜론 자동 X
- trailingComma : 마지막에 , (ex. {a:1,b:1,})
- bracketSameline : <Component src='' onClick=''...>
eslint
extends
parser
- @typescript-eslint/parser
plugins
- @typescript-eslint
rules
| 옵션 | 값 |
|---|---|
| @typescript-eslint/no-shadow | [error] |
| no-shadow | off |
| no-undef | off |
srcs/
assets/
=> css, img, ttf : 여기서 가져와서 웹 번들링을 하면 이름이 이상하게 바뀌니까 favicon같은 경우는 html 메타에 넣으면 완전 바뀌니까 static에다 따로 넣어준다
=>
An "asset" is any file that your project uses that is not code. Images, videos, sounds, and fonts are all considered to be assets.
components/
config/
constants/ :상수만 모아놓는 용도
contexts/
hooks/
lib/
pages/
recoil/
static/ : 정적 html 파일, 주소가 고정되어야 하는
util/ : 공통으로 사용할 수 있는 코드(바로 가져다가 쓸 수 있는 코드) - 다른 곳에서 긁어온
libs/ : 외부 디펜던시 (자바에서 사용, 자바스크립트에서는 package.json) / 우리 도메인에서만 사용할 수 있는 코드
ex. fileFormat.js
ex. convertFormat(1024, 'KB') -> 1KB //이번에 만든 것을 다른 곳에서만 사용할 수 있게
ex. libs // 외부에서 많이 바꿔서 사용해서
recoil에서 api 중개 처리해주는 것을 하나하나
create에서 intercept로
react query를 할 것을 recoil이 대신해줄 수 있음 (호환) TODO: 검색해서 사용하기
typescript interface
함수
- 처리하면 process
- 가져오면 get, fetch 등
화살표 함수
: noun first
선언식
: verb first
-
tsx가 컴포넌트
-
스페이스 2개 (탭은 나중에 다른 거에서 봤을 때 열이 안 맞음)
세미콜론을 쓰지 않으면 문제가 생김
- trailingComma : 마지막에 넣을지 말지에 대해
커뮤니티에서 지원을 해주는 것
- react-native-community를 통해서 확인을 하고 있다
- 취직을 하는 것이 가장 좋다 (필요해야 공부가 된다)
- 프로젝트 끝나고 나서 공부하기
React Native, emotion 등에 공부를 하기
돌아가는지 확인하기
