HTML ,css, image 공통

  1. 이름은 기본적으로 **스네이크 케이스(Snake case)**로 표기한다.

    snake_case
    
  2. 영문 소문자, 숫자, 언더스코어(_)로 작성한다.

  3. 언더스코어(_)는 2개 이상의 단어를 조합할 때 만 사용한다.

  4. 단어와 숫자 조합하는 경우 언더스코어(_)를 생략한다.

  5. 이름은 영문 대문자, 숫자로 시작할 수 없다.

    section_list
    no1
    btn2
    

JS 공통

  1. 이름은 기본적으로 영문 소문자+대문자, 카멜케이스(camelCase) 로 작성한다.

    camelCase
    
  2. js파일명, 변수명, 함수명javascript단에서 처리하는 이름은 카멜케이스로 작성한다.

  3. React component 이름(context등) 및 style-components 스타일 이름은 영문 대문자로 시작한다.


HTML,SCSS(CSS)

  1. HTML
    1. '00~99_페이지이름.html' 로 사용한다.
    2. 그루핑숫자_메뉴이름_의미_상태.html
1) 기본적인 HTML 네이밍

00_인트로.html
00_mykin_nboard_view.html
00_1_업종별_상세_기업.html
2) 팝업 네이밍
00_pop.html 또는 pop.html

3) 아이프레임(iframe) 파일
00_ifr.html 또는 ifr_.html
  1. CSS , SCSS
    1. 서비스영문이름.scss ,서비스영문이름_상태.scss로 사용한다.

      news_home.css
      news_admin.css
      news_pop.css
      
      _list_product.scss
      _product_detail.scss
      _store_search.scss
      
    2. 컴파일 완료 한 css는 min 압축 형식을 html과 연결한다.

      <link href="./css/style.min.css" rel="stylesheet"/>
      
    3. scss에서 여러 페이지에서 쓰이는 컴포넌트는 components폴더에 정리 고유한 레이아웃 형식 및, 단 건으로 쓰이는 경우 layout 폴더에 정리

      components > 
      _list.scss
      _tab.scss
      _login.scss
      _form.scss
      _search.scss
      
      layout > 
      _header.scss
      _footer.scss
      _main.scss
      _rental_process.scss
      
    4. css 묶어서 재 사용 할 수 있는 모듈의 경우 mixins

    5. 또는 코드의 가독성을 위해 mixins시켜 해당 scss 상단에 위치.

    6. 라이브러리에서 가져온 css 클래스를 수정할 경우, scss(css)파일을 새로 생성하여 수정. 절대 원본 라이브러리의 css에 손대지 않는다.


JS

  1. React나 Vue와 같은 라이브러리 파일이 아닌 일반적인 javascript로 사용된 경우 영문 소문자+대문자, 카멜케이스(camelCase) 로 작성한다.
common.js
form.js
storeSearch.js
productDetail.js