코딩 컨벤션

코딩 컨벤션이란?

• 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약이다.
• 특히 자바스크립트는 다른 언어에 비해 유연한 문법구조(동적 타입, this 바인딩, 네이티브 객체 조작 가능)를 가지기 때문에 개발자 간 통일된 규약이 없다면 코드의 의도를 파악하거나 오류를 찾기 어렵다.

 

장점

• 가독성이 좋아진다.
• 성능에 영향을 주거나 오류를 발생시키는 잠재적 위험 요소를 줄여준다.
• 유지보수 비용이 절약된다.

 

코딩 컨벤션 적용하기

• 삼중 등호 연산자인 ===, !==만 사용한다.
• 변수, 함수 Camel Case로 표기하기
  • 낙타의 혹처럼 첫단어는 소문자로, 나머지는 대문자로 시작하게 작성한다.
  • ex) stringArray
• 상수는 대문자, Snake Case로 표기하기
  • ex) STRING_ARRAY
• 변수명 통일화
  • ex) shop? store? 모호한 단어를 하나로 선택하기
• 함수 표현식 대신 화살표 함수 사용하기
  • 화살표 함수는 별도의 this 바인딩 없이 상위 컨텍스트에 바인딩되기 때문에 함수 표현식보다 혼란이 적으며 추론이 쉽다.

 

컨벤션의 도움을 주는 도구

ESLint

너 그거 잘못 짯어!

• ES는 EcmaScript, 즉 자바스크립트를 의미하는 것
• Lint는 보푸라기라는 뜻인데 에러가 있는 코드에 표시를 달아놓는 것

즉, JS 문법 중 에러가 있는 곳에 표시를 달아주는 도구이다!

• 문법 에러뿐만 아니라 코딩 스타일도 정할 수 있따.
• 팀에서 하나의 코딩 스타일을 적용하고 ESLint에 설정해두면 마치 한 사람이 코딩을 한 것 같은 결과를 얻을 수 있습니다.
• 사용하려면 npm이 필요합니다.
  • 요즘 자바스크립트 앱을 만드는 데엔 npm은 기본입니다

  npm install -g eslint eslint-config-airbnb-base eslint-plugin-import
  

  • 개발용으로만 사용되고 eslint 명령어를 사용해야 하기 때문에 -g(글로벌 옵션)로 설치해줍니다
  • eslint-config-airbnb-base는 자주 쓰이는 airbnb사의 코딩 스타일입니다
  • eslint-plugin-import는 그냥 플러그인의 예시로 넣어보았습니다.
    • airbnb-base를 사용하려면 필요합니다.
    • 플러그인은 몇 가지 규칙을 추가해줍니다.
  • 설치 완료 후 ESLint의 설정을 담은 .eslintrc를 만듭니다.
  • 여기에서 플러그인이나 규칙에 대한 정의를 JSON 형식으로 넣어줍니다.
• 다양하게 커스텀으로 설정을 할 수 있어서 확장성이 높다.

Prettier

프리티어는 코드를 "더" 예쁘게 만든다

• ESLint의 역할 중 포매팅과 겹치는 부분이 있지만 Prettier는 좀 더 일관적인 스타일로 코드를 다듬는다
• Prettier는 코드를 읽어들여서 사용자 옵션에 따라 코드를 다시 포맷팅하는 코드 포맷터
• 사람(개발자)에게 더 친숙하도록 알아서 바꿔줌

포맷팅

• 포맷팅은 일관된 코드 스타일을 유지하도록 하고 개발자로 하여금 쉽게 읽히는 코드를 만들어 준다.
• 이를 테면 "들여쓰기 규칙", "코드 라인의 최대 너비 규칙"을 따르는 코드가 가독성이 더 좋다.

ESLint와 다른점

• 코드 품질과 관련된 기능은 하지 않는 것
• Prettier는 ESLint와 달리 규칙이 미리 세팅되어 있기 때문에 설정 없이도 바로 사용할 수 있다.

코드 품질

• 어플리케이션의 잠재적인 오류나 버그를 예방하기 위함이다.
• 사용하지 않는 변수 쓰지 않기, 글로벌 스코프 함부로 다루지 않기 등이 오류 발생 확률을 줄여 준다.
• 여전히 ESLint를 사용해야 하는 이유는 남아 있다.
• 포맷팅은 프리티어에게 맡기더라도 코드 품질과 관련된 검사는 ESLint의 몫이기 때문이다.
• 따라서 이 둘을 같이 사용하는 것이 최선이다.

자동화

• 린트는 코딩할 때마다 수시로 실행해야하는데 이러한 일은 자동화 하는 것이 좋다
• 코딩할때 실시간으로 검사하는 방법도 있다.
• vs-code의 eslint와 prettier 익스텐션이 그러한 기능을 제공한다.

 

 

REF

• https://ui.toast.com/fe-guide/ko_CODING-CONVENTION
• 제로초 블로그