깃허브에 올릴 과제를 살펴보면서.. 코딩 컨벤션을 들어봤지만 제대로 적용하지 않고 있던게 생각났다.
이번 기회에 배우고 제대로 사용해야 겠다 싶어서 알아보게 되었다.
코딩 컨벤션이란?
- 코드컨벤션(Code Convention) or 코딩 컨벤션 (Coding Convention)
- 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약을 말한다.
- 가독성이 높아진다.
- 정해진 규칙이 있기 때문에 명칭을 빠르고 정확하게 정할 수 있다.
- 유지보수가 많은 비용과 시간이 할애되기 때문에 애초에 적절한 코드로 작성하게 된다면 이 부분이 조금이나마 줄어들 수 있을 것이다.
명명 규칙? (Programming Naming Conventions)
1. Camel case
소문자로 시작 소->대->소 로 띄어쓰기 대신 대문자, 소문자를 바꾼다.
- Non-components(폴더 등등 의 파일 이름(file.js)
- 속성명
- CSS
- id
- 변수
- 함수(동사로 시작)
2. Pascal Case
대문자, 띄어쓰기 대신 모두 대문자를 한다.
- C
- javascript class
- Components(컴포넌트 파일 이름) (App.jsx)
4. Snake Case
띄어쓰기 대신 언더바(_)
5. Kebab Case
띄어쓰기 대신 하이픈(-)
- 자바스크립트 에서는 하이픈을 사용하지 않는게 좋다..
오퍼레이터 주변 공간
- 항상 연산자( = + - * / )와 쉼표 뒤에는 공백을 넣기
줄 길이
주석
<!-- text -->
React에서 추가로 알아야 될 코딩 컨벤션
ES6
- spread 연산자를 사용한다.
- 구조 분해 할당을 사용한다.
- let과 const만 사용한다. (var 사용금지)
- 되도록 화살표 함수를 사용한다.
- 직접 null을 체크하기 보다 optional chaining 연산자 (?.)를 사용한다.
TESTING
- 테스트를 작성한다.
- 적정 수준의 테스트 커버리지를 유지한다.
- 하나의 테스트 파일에서 하나만 테스트 한다.
- 테스트 코드안에서 로직을 사용하지 않는다.
- 테스트 클래스는 하나의 클래스만 테스트 한다.
- 네트워크, 데이터 베이스와 직접 통신하지말고 가짜 함수를 사용한다.
CSS
- inline css를 사용하지 않는다.
- 명명 규칙을 지킨다. (네이밍 컨벤션 - bem, SUIT 등)
참고 링크