이름은 기본적으로 **스네이크 케이스(Snake case)**로 표기한다.
snake_case
영문 소문자, 숫자, 언더스코어(_)로 작성한다.
언더스코어(_)는 2개 이상의 단어를 조합할 때 만 사용한다.
단어와 숫자 조합하는 경우 언더스코어(_)를 생략한다.
이름은 영문 대문자, 숫자로 시작할 수 없다.
section_list
no1
btn2
이름은 기본적으로 영문 소문자+대문자, 카멜케이스(camelCase) 로 작성한다.
camelCase
js파일명, 변수명, 함수명 등 javascript단에서 처리하는 이름은 카멜케이스로 작성한다.
React component 이름(context등) 및 style-components 스타일 이름은 영문 대문자로 시작한다.
'00~99_페이지이름.html' 로 사용한다.그루핑숫자_메뉴이름_의미_상태.html1) 기본적인 HTML 네이밍
00_인트로.html
00_mykin_nboard_view.html
00_1_업종별_상세_기업.html
2) 팝업 네이밍
00_pop.html 또는 pop.html
3) 아이프레임(iframe) 파일
00_ifr.html 또는 ifr_.html
서비스영문이름.scss ,서비스영문이름_상태.scss로 사용한다.
news_home.css
news_admin.css
news_pop.css
_list_product.scss
_product_detail.scss
_store_search.scss
컴파일 완료 한 css는 min 압축 형식을 html과 연결한다.
<link href="./css/style.min.css" rel="stylesheet"/>
scss에서 여러 페이지에서 쓰이는 컴포넌트는 components폴더에 정리 고유한 레이아웃 형식 및, 단 건으로 쓰이는 경우 layout 폴더에 정리
components >
_list.scss
_tab.scss
_login.scss
_form.scss
_search.scss
layout >
_header.scss
_footer.scss
_main.scss
_rental_process.scss
css 묶어서 재 사용 할 수 있는 모듈의 경우 mixins
또는 코드의 가독성을 위해 mixins시켜 해당 scss 상단에 위치.
라이브러리에서 가져온 css 클래스를 수정할 경우, scss(css)파일을 새로 생성하여 수정. 절대 원본 라이브러리의 css에 손대지 않는다.
소문자+대문자, 카멜케이스(camelCase) 로 작성한다.common.js
form.js
storeSearch.js
productDetail.js