SiL 에서 작성했던 코드 컨벤션

[ 코드 스타일 규칙 ]

 

-싱글쿼터(' ') 사용을 기본으로 한다.

-모든 코드 끝에는 세미 콜론(;)을 붙인다.

// .prettierrc.js

module.exports = {
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  printWidth: 80,
};

 

[ 네이밍 규칙 ]

- 폴더 및 파일명

폴더명 : 하이픈(-) 사용 / 속성 추가 시 언더바(_) 2개 사용

action-types.js
teamsTree__action.js
teamsTree__reducer.js

 

 

- image

이미지 파일명 : 언더바(_) 사용 / ‘형태_의미_순서_상태’ 순서로 조합

btn_cancel_001.jpg

형태_의미_순서_상태
tab_info_01_on.jpg

 

- Javascript

JS 변수명 : lowerCamelCase 사용

가장 앞 글자는 소문자 +++ 띄어쓰기 할 문자는 대문자로 시작해서 이어 붙인다.

let barHeight;
let treeBar;

 

- CSS

class명 : lowerCamelCase 사용 / 속성 추가 시 언더바(_) 2개 사용

가장 앞 글자는 소문자 +++ 띄어쓰기 할 문자는 대문자로 시작해서 이어 붙인다.

.redBox{...} 
.stickMan__head
.stickMan__arms
.stickMan__feet

 

- CSS-in-JS

CSS-in-Js class명 : lowerCamelCase 사용 / 속성 추가 시 언더바(_) 2개 사용

가장 앞 글자는 소문자 +++ 띄어쓰기 할 문자는 대문자로 시작해서 이어 붙인다.

.redBox{...} 
.stickMan__head
.stickMan__arms
.stickMan__feet

 

 

레이아웃 예약어

#wrapper - 페이지 전체 영역 그룹핑
#header - 머리글 영역
#container - 본문영역 그룹핑
#content - 주용컨텐츠 영역
#footer - 바닥글
#pop-wrapper - 팝업 페이지 전체 영역 그룹핑
#pop-header - 팝업 머리글 영역
#pop-container - 팝업 본문영역 그룹핑
#popContent - 팝업 주용컨텐츠 영역
#popFooter - 팝업 바닥글
#gnbNav - 글로벌 네비게이션 영역 메뉴
#lnbNav - 로컬 네비게이션 영역의 메뉴
#snbNav - 사이드 네비게이션 영역의 메뉴

 

- Component

컴포넌트명 - UpperCamelCase / 속성 추가 시 언더바(_) 2개 사용

가장 앞 글자는 대문자 +++ 띄어쓰기 할 문자는 대문자로 시작해서 이어 붙인다.

MemberList.js
TeamsOrgPage.js
TeamsOrg__LeftArea.js
TeamsOrg__RightArea.js