| 분류 |
Case |
예시 |
메모 |
| ID |
카멜 케이스, 헝가리안 표기법 |
#idExample |
오브젝트 종류는 헝가리안 표기법을 변용한 소문자로 표기, 목적은 대문자로 표기 { 예 : #btnSubmit, #frmSignup } |
| Class |
케밥 케이스 |
.class-example |
반복 사용하는 요소에 대해 자연어에 따라 명명, 기능이 아닌 형태에 따라 작명 { 예 : .button-small-round, .section-title } |
| Dataset |
케밥 케이스 |
data-example |
들어갈 데이터의 종류를 포함된 기능 흐름과 자연어에 따라 명명 { 예 : data-user-name, data-item-template } |
| SASS |
케밥 케이스 |
$scss-example |
해당 선언이 사용될 용도에 따라 명명 { 예 : $main-color, @buttton-default } |
| Javascript |
|
|
|
| Function, Class |
카멜 케이스, 파스칼 케이스 |
funcExample(), ClassExample |
펑션은 종류나 기능에 따라 자유롭게 명명 { 예 : function getUserList() }, 클래스는 목적을 분명하게 드러내는 형태로 명명 { 예 : MakeAccount } |
| Constant |
카멜 케이스, 헝가리안 표기법 |
constExample |
상수가 요소일 경우 요소의 이름을 단순화, 아닐 경우 내용에 따라 명명 { 예 : const btnSubmit, const getUserList } |
| Variable |
카멜 케이스 |
varExample |
상동 { 예 : var btnClickable, let dynamicNumber }, 반드시 필요한 경우가 아니라면 전역 변수인 var 대신 기능 블록 내에서 let을 사용 |
| Database |
소문자.대문자 |
res.DATA |
리소스의 이름은 소문자로 표기, 컬럼은 대문자로 표기 { 예 : user.NAME, pay.PRICE } |
| Element |
카멜 케이스 변형 |
(e) |
단순 구분자나 이벤트의 경우 최소화하여 표현, 전달 인자의 경우 정확한 목적을 표기 { 예 : (e), (i), (objectName) } |
| Etcetera |
|
|
|
| JSON |
소문자 |
{ "name": "Example" }, |
데이터명은 반드시 소문자로 표기하며 콜론과 붙여쓰기, 반드시 큰 따옴표 사용 { 예 : "name": "John Doe" } |
| Javascript Grammar |
- |
- |
따옴표는 반드시 작은 따옴표로 시작하여 큰 따옴표를 포함, 각 괄호와 콜론 사이는 띄어쓰기 하여 가독성 확보 |
|
|
|
{ 예 : if (isEmpty(e) == true) { document.querySelector('[data-object="template"]') } } |
|
|
|
블록 내 변수는 let, 전역 변수는 var, 상수는 const로 선언 구분 |
| Common |
- |
- |
중괄호는 시작 지점과 끝 지점을 완전한 라인으로 분리, 화살표 펑션은 가급적 하나의 라인으로 완료 |
|
|
|
백틱 (``) 을 사용한 문자열이 여러 행으로 이루어질 경우, 중괄호 사용시와 같은 규칙 적용 |
| Annotation |
|
|
|
| HTML |
- |
- |
태그 Structure 사용 규칙은 추가 문서를 통해 정리 예정 |
|
|
|
ID 등으로 구분된 DOM이나 반복해서 사용해야 하는 요소의 경우 </div> 와 같이 오브젝트가 닫히는 지점에서 주석으로 표시 |
|
|
|
각 페이지마다 전혀 사용하지 않는 코드는 확인하고 삭제할 것 { 예 : 게시판 페이지에 아이디 찾기 팝업 코드 } |
| CSS |
- |
- |
SASS Nesting은 남용될 경우 디자인의 구조적 의존도가 지나치게 높아지므로 반드시 필요한 최소 / 최저한도로만 사용할 것 |
|
|
|
CSS는 HTML 페이지의 상부에서부터 포함 범위가 큰 요소부터 정렬하며, 범위에 따라 구분선을 표시 |
|
|
|
반복해서 사용되거나 Nesting 구조가 복잡한 요소의 경우 해당 요소의 용도를 정확하게 명기 |
|
|
|
색상, 사이즈 유닛 선언, 믹스인 등과 같이 반복 사용되는 요소는 module 형태로 구분 |
|
|
|
@import를 통해 CSS 최적화를 해야 하는 경우, CSS 기본 주석(/* */)을 이용해 각부 위치를 명기 |
|
|
|
.on, .open, .off 등과 같이 다른 요소에서 혼용될 수 있는 클래스는 완전히 해당 요소에 포함시켜 혼동을 피함 |
| Javascript |
- |
- |
데이터를 출력, 또는 입력받아야 할 경우, 대상 Element는 클래스가 아닌 아이디나 데이터셋으로 선택 |
|
|
|
하나의 펑션이나 오브젝트에 대한 영역은 /**/ 주석으로 감싸서 구분, 각 라인에서 설명이 필요할 경우 // 주석으로 부연 |
|
|
|
기능 확인을 위해 추가한 콘솔 출력은 완료된 후 삭제할 것 |
| Etcetera |
- |
- |
주석은 협업자가 내용을 빠르게 파악하고 이용할 수 있게끔 기능이나 용도를 최대한 명확하게 작성 |