코딩 컨벤션 → 통일성 높게가져가기주석달기 !! tsdoc → 설명이 필요한 부분에서 주석달기(모든 건 x) 주석을 전역 타입에서 사용해보고, 추후 논의 컴포넌트 경로
- 폴더구조 → 프로젝트 세팅하면서 정하기
/src │ App.tsx │ Index.tsx │ react-app-env.d.ts │ Routes.tsx ├── /@type │ └── index.d.ts ├── /assets │ ├── Images │ └── Svgs ├── /components │ ├── /Commmon │ ├── /Direct │ ├── /Home │ ├── /Login │ └── /Signup ├── /pages │ ├── /Direct │ ├── /Home │ └── /Login ├── /styles │ ├── /UI │ ├── globalStyles.ts │ ├── styled.d.ts │ └── theme.ts
- js, ts, style (네이밍)
- 상수: 대문자 + 스네이크 네이밍 방법론
중복 상수 폴더로 관리? - 줄임말 쓰지 않기 풀 네임 (btn말고 button으로)
- 동사 + 명사 → getValue | getRandomNumber | fetchUsers | onChangeInput
- 이벤트
- 현재 컴포넌트 내 이벤트 - on + eventName : onChangeInputValue
- props로 받는 것 - ~handler : changeInputValueHandler
- 함수 네이밍 규칙 동일하게 따르기
- 상태관리
- 2 depth이상 넘겨줄 때, 형제 컴포넌트는 전역 상태로 관리하기
- 타입관리
- type 키워드를 사용해서 타입을 정의한다.(interface X, https://hanpur.notion.site/ts-interface-type-2645a8c776b44902aca57d8225f75401)
- 재사용할 타입만 분리하여 전역으로 관리 (index.d.ts파일에서) - 재사용안하는 건, 해당파일의 최상단에 정의
- 타입 별칭 네이빙 방법론으로는 파스칼 케이스 방법론을 따른다.
- 스타일
- z-index는 100단위로 만약 사용했다면 꼭 말하기!!!
- emtion props스타일 가이드 (object 스타일 사용하기)
네이밍
// Or with object styles const Image1 = styled('div')<ImageProps>( { backgroundSize: 'contain' // props가 안들어가는 속성들 }, props => ({ // props가 들어가는 속성들을 처리 width: props.width, background: `url(${props.src}) center center` }) )
- 작업용 주석(각자 TODO, userID, 언제할거다)
- 설명용 주석: 설명이 필요한 부분
- vscode todo tree
/* * 어떤 일을 하는지 * 매개변수 * 리턴값 */
- type -> style -> component 순서
- 컴포넌트 정의를 함수 표현식 (arrow)
- <></>
- rendering 관련 return문 생략 or 작성(map, filter, etc…) / 일단 보류
- 각 컴포넌트 파일은 하나로 분리한다. 자식 컴포넌트를 컴포넌트화 시키게 된다면 새로운 파일로 분리해서 작업을 진행한다. (논의 필요)
- alias 절대 경로 이름 지정
- @: src는 엣@ 사용
- 같은 폴더 위치라면 상대경로로 그 외에는 절대경로 사용