-
Notifications
You must be signed in to change notification settings - Fork 1
코딩_커밋_컨벤션
Kyungsu Kang edited this page Dec 1, 2020
·
2 revisions
이 컨벤션은 NHN과 Toast의 컨벤션을 보고 정리한 것입니다, 둘은 NHN 계열의 자료로, 전자는 2009년, 후자는 2019년에 정리된 문서입니다.
문서의 맨 마지막 참고자료에 두 컨벤션을 게시하였습니다.
-
네이밍 규칙
-
이름
은소문자, 숫자, 언더스코어(_)
의 조합으로 작성하며,시작
은소문자
로만 작성한다. - id 및 class 네이밍 규칙
- PC 화면에서의 HTML을 작성할 때에는 아래와 같이
레이아웃 약속어
를 따른다. -
카멜 표기법
을 원칙으로 한다.-
클래스
선언 시에는첫 글자를 대문자
로 한 카멜 케이스를 사용한다.
-
- PC 화면에서의 HTML을 작성할 때에는 아래와 같이
-
상수
는영문 대문자 스네이크 표기법
을 사용한다. -
배열
의 이름은복수형
으로 만든다. -
정규표현식
의 첫 글자는 'r'로 시작한다. -
함수
는 동사와 명사의 조합으로 하되, 형용사를 넣지 않는다. -
이벤트 핸들러
는 'on'으로 시작한다. -
반환 값이 boolean형인 함수
는'is'
로 시작한다. -
private 변수
명은언더스코어(_)
로 시작한다. - 범용적인 대문자 약어 (ex. URL, HTML)등은 대문자 그대로 사용한다.
-
- 들여쓰기 : 사용자의 개발 환경에 따라서 들여쓰기가 다르게 보일 수 있으므로 Tab과 Space 중 하나만을 사용함을 원칙으로 한다.
- 문장종료 : 세미콜론(;)을 필수로 한다.
-
전역변수
- 절대 사용하지 않는다.
-
암묵적 전역 변수
를 사용하지 않는다. (ex. let a = b = 0; 이라고 작성 시 b는 전역)
-
선언과 할당
-
변수
-
const는 let보다 상단
에 작성한다. → 가독성이 높아진다.- var는 사용하지 않는다. → var에 관한 모든 규칙은 작성하지 않는다. (ES5 문법)
- const와 let은 사용 시점에 선언 및 할당한다. = 그룹화
- 선언과 할당을 동시에 하는 변수를, 선언만 하는 변수보다 먼저 선언한다.
-
-
배열과 객체
-
외부 모듈과 내부 모듈을 구분하여 사용한다.
-
블록 스코프
밖에서 변수를 선언하지 않는다. -
외부 모듈과 내부 모듈을 변수 참조
할 때에는 선언 사이에공백
을 둔다.
-
-
배열과 객체
는 생성자 함수를 사용하지 않고리터럴로 선언
한다. -
복잡한 객체를 복사할 때에는
전개 연산자
를 사용한다.const itemsCopy = [...item];
-
객체의 프로퍼티가 1개인 경우에만 한 줄로 정의
하고, 2개 이상인 경우에는 개행한다.
-
-
함수
-
함수 생성자
는 사용하지 않는다. → 함수 생성자를 사용하면 수행 시점에eval
로 처리되어 실행 속도가 느려진다. -
메서드
와메서드
사이는 개행한다. -
즉시 실행 함수
는 혼선을 줄이기 위해 한 가지 방식으로만 사용하고, 이견이 없을 시 아래 예시와 같이 작성한다.(function() { ... }());
-
-
화살표 함수
- 함수 표현식 대신
화살표 함수
를 사용한다. → 별도의 this 바인딩 없이 상위 컨텍스트에 바인딩되기 때문에 추론이 쉽다는 장점이 있다.-
화살표 함수의 파라미터가 1개일 때에는 괄호를 생략한다.
-
암시적 반환
을 최대한 활용한다. -
클래스 내부에서 사용할 경우에는 이견이 있을 수 있다. 클래스 내부에서 화살표 함수를 쓸 경우 프로토타입이 되어 객체마다 메모리를 사용한다.
class TestObj { constructor() {} a () { console.log('a'); } b = () => console.log('b'); } let obj1 = new TestObj(); let obj2 = new TestObj(); obj1.a === obj2.a // True obj2.b === obj2.b // false
-
- 함수 표현식 대신
-
Promise Exeutor 함수
-
Promise Executor
함수에는 async 함수를 사용하지 않는다.
-
-
Destructuring
- 오브젝트의 프로퍼티에 접근할 경우
구조분해할당(Destructuring)
을 사용한다.-
새로운 이름으로 정의할 경우에는 사용하지 않아도 된다.
// GOOD const changeFirstName = user.firstName; const {firstName: changeFirstName} = user;
-
- 오브젝트의 프로퍼티에 접근할 경우
-
템플릿 문자열
- 변수 등을 조합한 문자열을 생성할 경우
템플릿 문자열
을 사용한다.
- 변수 등을 조합한 문자열을 생성할 경우
-
-
클래스와 생성자
- class와 extends를 활용하여 객체 생성 및 상속을 구현한다.
- mixin을 사용할 때에만 prototype을 사용한다.
-
모듈
- 항상
import
와export
를 이용한다. - wildcard import ('*')를 사용하지 않는다. (import * as module name은 허용된다.) → 식별자 충돌을 예방한다.
- 항상
-
블록구문
-
한 줄 짜리 블록이라도 스코프
를 사용한다. → 잠재적인 위험 요소를 줄인다. - 키워드와 조건문 사이는 빈칸을 사용한다.
-
switch
문은 cas와 case, deault 사이에 개행을 둔다.- case 마지막에
default문이 없다면 주석
으로 표기한다.
- case 마지막에
-
-
데이터형
- 미리 약속된
데이터형 확인법
을 사용한다. (typeof)
- 미리 약속된
-
조건확인
-
삼중 등호 연산자
('===', '!==')만 사용한다.
-
-
반환하기
- 함수에서
반환은 한 번
만 한다. 단, 예외처리는 제외한다. - return문 바로 위는 한 칸을 비워 놓는다.
- 함수에서
-
순회하기
- 일반화된 순회 메서드를 사용한다. (for문, for of문, for in문, forEach문)
-
for-in문
에서는 hasOwnProperty 반드시 조건 검사를 수행한다. → 상속받은 프로퍼티로 인해 문제를 예방한다.
-
주석
- 주석을 설명하려는 구문에 맞춰서 들여쓰기를 한다.
- 여러 줄 주석을 하는 경우 첫 줄과 마지막 줄은 비운다.
- 코드를 주석 처리 할 때에는 한 줄 주석을 사용한다.
- 참고자료
- https://nuli.navercorp.com/data/convention/NHN_Coding_Conventions_for_Markup_Languages.pdf - NHN 코딩 컨벤션 (2009년 당시 네이버)
- https://ui.toast.com/fe-guide/ko_CODING-CONVENSION/ - TOAST UI
master, dev, feat branch만 사용, 추후 release, hotfix 재 논의 issue Tracking의 방식을 채용.
feat example
- feat/issueCreatePage
- feat/issueButton
- feat/...
[tagName]공백
가급적 국문의 제목공백
#issueNumber
- feat PR, merge 하고 나면 자신의 branch는 자신이 직접 삭제할 것
- issue Tracking
- branch 생성 시에는 서로 꼭! 말하기.
- 참고 자료