코딩 컨벤션 2

이 글은 아래 링크의 내용을 바탕으로 작성되었습니다.

https://ui.toast.com/fe-guide/ko_CODING-CONVENTION

코딩컨벤션

 

저번 코딩 컨벤션 글에 이어서 이번에는 TOAST UI 에서 알려주는 코딩컨벤션을 추가로 정리해보고자 합니다. 전의 내용과 겹치는 부분은 자동으로 뺐습니다.

 

 

 

숫자, 문자

단수형 이름을 사용합니다.

 

 

 

배열

복수형 이름을 사용합니다. 반드시 리터럴로 선언합니다. 배열을 복사할 시에 전개 연산자(...)를 최대한 활용해서 가독성을 높이도록 합니다.

 

 

 

객체

객체 안의 내용을 복사할 시에 전개 연산자(...)를 최대한 활용합니다. 객체의 프로퍼티가 1개인 경우에만 한 줄 정의를 허용하며, 2개 이상일 때는 무조건 개행을 넣어야 합니다. 객체 내부의 함수, 즉 메서드를 넣을 때는 : 를 쓰지 않는 축약형 표현을 쓰도록 합니다. 이를 통해 그것이 메서드라는 것을 더 명확하게 정의할 수 있습니다. 메서드를 모아서 넣는 것이 좋겠지만, 그럴 때 그 사이에는 개행이 들어가야 합니다.

 

 

 

함수

함수는 사용 전에 선언해야 하며, 함수 선언문은 되도록 변수 선언문 다음에 오게 해야합니다. 그리고 함수를 선언하기 전에 실행하는 관행은 쓰지 마십시오. 함수 선언식은 괜찮아도 함수 표현식의 경우는 호이스팅이 되지 않기 때문에 되도록 쓰지 않는 것이 좋습니다.

 

즉시 실행 함수를 쓸 때는 괄호를 여러가지로 표현할 수 있지만 혼란을 줄 수 있으니 다음의 스타일만을 일관적으로 사용하십시오.

 

(function() { ... }());

 

블록 스코프, 즉 {} 안에서는 (while, for, if 등 쓸 때 등) 절대 함수 선언식을 쓰지 마십시오. 선언식을 쓰는 순간 블록 스코프 상위에서도 사용될 수 있도록 호이스팅이 수행되지만 블록 스코프 안에 있으면 뭔가 그 블록 스코프 내에서만 사용할 수 있게 되어 있는 듯한 오해를 주기 때문입니다. 굳이 써야한다면 호이스팅이 적용되지 않는 함수 표현식을 사용해서 함수를 정의하기 바랍니다.

 

일반적인 함수 표현식 대신에 화살표 함수를 활용한 표현식을 쓰기 바랍니다. 화살표 함수 안에서의 this 는 기존 처럼 .bind 를 통한 this 명시 작업이 필요없이 상위 this 가 자동으로 할당되기 때문입니다.

 

화살표 함수에서 return 을 쓰지 않을 수 있는 암시적 반환을 최대한 활용하는 것이 좋습니다.

 

객체나 배열의 값을 변수에 담아서 가져올 때는 최대한 구조해체 할당을 사용합니다. 하지만 새로운 변수 이름으로 받아오고 싶으면 그렇게 하지 않아도 됩니다.

 

반환은 되도록 한번만 쓰십시오. 예외 처리를 위한 return 은 써도 괜찮습니다(그냥 return 만 사용). 가독성을 위해 return 문 위는 한칸 띄우도록 합니다.

 

 

 

정규표현식

정규 표현식은 'r' 로 시작하는 카멜케이스 방식으로 이름을 짓습니다.

 

 

 

이벤트 핸들러

이벤트 핸들러(이벤트 리스너에 넘겨주는 콜백 함수)의 경우, 'on' 으로 시작하는 카멜케이스 방식으로 이름을 짓습니다.

 

 

 

Boolean 을 리턴하는 함수

Boolean 을 리턴하는 함수 또한 Boolean 상수나 변수와 마찬가지로 'is' 로 시작하는 카멜케이스 방식으로 이름을 짓습니다.

 

 

 

지역 변수

함수 내에 선언되어 함수 내에서만 사용되는 지역 변수 혹은 private 변수(타입스크립트라면)명은 _로 시작합니다.

 

 

 

전역 변수

전역 변수는 절.대 사용하지 않습니다. 암묵적 전역 변수 또한 마찬가지입니다.

 

 

 

const 와 let

값이 절대 변하지 않는 변수는 const 를, 값이 로직이 진행됨에 따라 변하는 변수는 let을 써서 선언한다. (var 는 절대로 쓰지 않는다!) 그리고 const 를 let 보다 위에 위치시킵니다. 이러면 누군가 코드를 읽을 때 '이 변수는 재할당에 사용되지 않으니 아래 있는 let 에 더 신경써야겠군' 하고 파악할 수 있기 때문에 코드를 읽기 쉽게 해줍니다.

 

const 와 let 은 모두 그 변수가 사용되는 시점에 최대한 가까이에 위치시키도록 합니다. 물론 선언문들을 모아두는 것은 좋지만 한번에 다 몰아서는 안된다는 의미입니다.

 

선언과 동시에 할당을 하는 변수부터 먼저 선언하고, 선언만 하는 변수들은 let 으로 한번에 모아서 선언하도록 합니다.

 

 

 

외부 모듈과 내부 모듈

외부 모듈(제 3자의 모듈)과 내부 모듈(팀이나 개발자 개인이 개발한 모듈)을 선언할 때, 서로 그룹으로 모아서 선언하도록 하고 그룹들 사이에 공백을 두도록 한다.

 

 

 

템플렛 문자열

최대한 사용하도록 합니다.

 

 

 

모듈

require 와 같은 다른 모듈 로드 방법과 혼용하지 말고 오직 import 와 export만 사용합니다. 또한 import * 와 같은 wildcard import 는 사용하지 않도록 합니다.