코딩 컨벤션(feat. React)

lovjgb·2022년 7월 27일
0

React

목록 보기
1/2
post-custom-banner

깃허브에 올릴 과제를 살펴보면서.. 코딩 컨벤션을 들어봤지만 제대로 적용하지 않고 있던게 생각났다.
이번 기회에 배우고 제대로 사용해야 겠다 싶어서 알아보게 되었다.

코딩 컨벤션이란?

  • 코드컨벤션(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

띄어쓰기 대신 언더바(_)

  • SQL 데이터베이스, PHP문서

5. Kebab Case

띄어쓰기 대신 하이픈(-)

  • 자바스크립트 에서는 하이픈을 사용하지 않는게 좋다..

오퍼레이터 주변 공간

  • 항상 연산자( = + - * / )와 쉼표 뒤에는 공백을 넣기

줄 길이

  • 80 미만

주석

<!-- text -->


React에서 추가로 알아야 될 코딩 컨벤션

ES6

  • spread 연산자를 사용한다.
  • 구조 분해 할당을 사용한다.
  • let과 const만 사용한다. (var 사용금지)
  • 되도록 화살표 함수를 사용한다.
  • 직접 null을 체크하기 보다 optional chaining 연산자 (?.)를 사용한다.

TESTING

  • 테스트를 작성한다.
  • 적정 수준의 테스트 커버리지를 유지한다.
  • 하나의 테스트 파일에서 하나만 테스트 한다.
  • 테스트 코드안에서 로직을 사용하지 않는다.
  • 테스트 클래스는 하나의 클래스만 테스트 한다.
  • 네트워크, 데이터 베이스와 직접 통신하지말고 가짜 함수를 사용한다.

CSS

  • inline css를 사용하지 않는다.
  • 명명 규칙을 지킨다. (네이밍 컨벤션 - bem, SUIT 등)




참고 링크

profile
lovjgb
post-custom-banner

0개의 댓글