Skip to end of metadata
Go to start of metadata

작성일자 : 2015.03.01

작성자 : 전경훈

 

Java에서는

  • 클래스 명의 첫글자는 대문자
  • 변수 및 메소드명의 첫글자는 소문자
  • 변수명은 명사형
  • 메소드명은 서술형 (동사+목적어) 
  • camal 표기법

등등의 기본적인 코딩 관례가 있다.

그러나 HTML, CSS, Javascript 같은 Front-End 언어에서는 Java처럼 강력한 코딩 관례가 없다. 그래서 각 개발자가 각 개발자의 입맛대로 중구난방으로 코딩하게 되고, 유지보수가 힘들게 된다.

그래서 우리 바로보드에서는 Front-end 코딩 관례를 정하려고 한다. 

원칙은 다음과 같다.

  • Darum 의 표준 관례를 참고한다.
  • 구글, jquery, bootstrap 등의 예시를 참고한다.
  • 애매한 경우, 우리가 원칙을 세운다.

 

0. 공통규칙

  • naming에 첫 시작글자는 숫자, 특수문자, 대문자의 사용은 지양한다. 
    • ex) 2json (error)
  • naming은 '형태_의미_상태' 순서로 조합하며, 3단계를 넘어가지 않도록 권장한다. 
    • ex) btn_apply_on
  • naming 정의 시 prefix(접두어), subfix(하위단계), suffix(접미어) 를 최대한 사용한다.

1. HTML, CSS

  • HTML 및 CSS 의 Attribute Value 는 큰 따옴표로 감싼다. 
    • ex) <html lang="ko"> , <div id="boardTable"> 
  • id는 camel case 방식으로 한다. 
    • ex) id="boardTable" 
  • class는 하이픈(hyphen - ) 방식으로 한다. 
    • ex) class="form-control" 
    • 참고. Darum에서는 underscore( _ )를 권장하지만, 유명 JS 프레임워크인 jQuery 및 BootStrap 등에서는 하이픈을 사용하고, 우리가 구매한 원본 쇼핑몰에서 하이픈을 사용하기 때문에 바로보드에서 하이픈을 사용한다.
  • id 명은 화면에서의 고유 기능을 명시하도록 naming 한다. 
    • ex) id="btnSearch" (error) , id="btnGnbSearch" (tick)
  • class 명은 요소 기능을 표현하도록 naming 한다.
    • ex) class="selected" 
  • URL 및 FILE 규칙 (  (red star) 협의가 필요함 )
    • file 명은 Snake 방식으로 한다. 
      • ex) jstree-overview.do or jstree_overview.do 
    • URL은 RESTful 방식을 지향한다. 

    • CSS 파일명은 공통요소 묶음인 common.css 와, 서비스 대분류에 따른 서비스명-대분류명으로 css name을 만들어 사용한다.
      • ex) common.css , common-
      • 각 페이지에 import 되는 css는 common.css ,  해당 페이지 css 파일 등 두개 이하가 되도록 한다.
    • static(이미지, 오디오 등) 파일명은 Snake 방식을 사용한다.
      • ex) btn_common.png
    • static 데이터는 데이터 종류 별 폴더를 생성하고, 대분류별 폴더 밑에 저장한다.
      • ex) images/admin/intro_icon.png
    • prefix, subfix는 다음 페이지를 참조한다. http://darum.daum.net/convention/name

2. Javascript

  • 변수명, 메소드명, 테이블명은 기본적으로 Camal Case 방식을 사용한다
    • ex) var testButton , getDataFromTable(), new TestClass
  • 전역변수는 공통 상수 외에 가급적 사용을 지양하며, 사용시 대문자와 '_' 를 조합한다.
    • ex) CONSTANT_VALUES
  • 자바스크립트 내에서 문자열을 표현할 때, 작은 따옴표를 사용한다.
    • ex) var testString = 'Hello World!'; , var enterBtn = $('#enterBtn');
    • 자바스크립트에서는 큰따옴표, 작은따옴표 모두 사용 가능하나, HTML에서 큰따옴표를 쓰는 것이 기본이므로, HTML 제어 시 겹칠 수가 있다.
  • 문장(statement)의 끝에 세미콜론을 명시한다.
    • 자바스크립트는 문장(statement)의 끝을 알리는 세미콜론이 생략가능하나 코드의 명확성 및 오작동 방지를 위해 명시하도록 한다.

 

참고.

Labels
  • None