코딩컨벤션은 팀프로젝트를 할때 팀원들간의 코드 스타일을 맞춰 가독성을 높여 팀프로젝트간 소통을 원활하게 하는 방법중에 하나이다.
1. NAMING CONVENTIONS
A. components 이름은 Pascal case로 작성한다.
⇒ pascal case : 첫 단어를 대문자로 시작하는 표기법
Header.tsx Footer.tsx MainBanner.tsx BlogList.tsx
B. Non-components 이름은 Camel case로 작성한다.
⇒ Camel case : 띄어쓰기 대신 대문자로 단어를 구분하는 표기 방식
myUtilityFile.js cookieHelper.js fetchApi.js
C. 속성명은 Camel case로 작성한다.
⇒ className
<div className=""></div>,onClick, onSubmit
<div onClick="{}" onSubmit="{}"></div>2. BUG AVOIDANCE
A. typescript를 사용해서 타입에러를 방지한다
B. console.log()를 모두 지운다
3. ARCHITECTURE & CLEAN CODE
A. utility 폴더를 만들어서 반복사용되는 함수를 관리한다. 사용시에는 import해서 쓴다
- 가능하다면 컴포넌트 안에서 함수를 생성하지 않는다.
B. pages와 component 폴더를 각각 만든다
C. 하나의 파일에 하나의 React component만 만든다.
D. 프로젝트 기간 동안에는 주석을 사용하되, 제출할때는 주석을 지운다
4. ES6
A. spread 연산자를 사용한다.
B. 구조 분해 할당을 사용한다.
C. let과 const만 사용한다. (var 사용금지)
D. 되도록 화살표 함수를 사용한다.
E. 직접 null을 체크하기 보다 optional chaining 연산자를 사용한다.
F. 리액트 라우터 : useNavigate 메서드 사용하기
5. CSS
A. inline css를 사용하지 않는다
