자바스크립트 스타일 가이드 및 코딩 규칙 (Style Guide and Coding Conventions)

모든 자바스크립트 프로젝트에 항상 동일한 코딩 규칙을 사용하십시오.


자바스크립트 코딩 규칙

코딩 규칙은 프로그래밍의 스타일 가이드 라인(style guidelines for programming)입니다 . 일반적으로 다음을 포함합니다:

  • 변수(variables) 및 함수(functions)의 이름 지정 및 선언 규칙(Naming and declaration rules)
  • 공백(white space), 들여 쓰기(indentation) 및 설명(comments) 사용 규칙.
  • 프로그래밍 실습 및 원리(practices and principles)

코딩 규칙은 품질을 보증한다(secure quality):

  • 코드 가독성 향상
  • 코드 유지보수가 쉬워집니다.

코딩 규칙은 팀이 따라야 하는 규칙을 문서화한 규칙이거나, 개인적인 코딩 습관(practice)일 수 있습니다.다.


변수 이름 (Variable Names)

W3schools에서는 식별자(identifier)(변수 및 함수) 이름에 camelCase를 사용합니다.

모든 이름은 문자(letter)로 시작합니다.

이 페이지의 맨 아래에서 이름 지정 규칙(naming)에 대해 더 자세히 설명합니다.


firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

연산자(Operators) 주변 공간(Spaces)

연산자 (= + – * /) 주위와 쉼표 다음에 공백(spaces)을 넣으십시오:

Examples:


var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];

코드 들여쓰기(Indentation)

코드 블록의 들여쓰기에는 항상 4칸(spaces)을 사용하십시오:

Functions:


function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

문 규칙(Statement Rules)

간단한 문에 대한 일반 규칙:

  • 항상 간단한 문(statement)을 세미콜론으로 끝내십시오.

Examples:


var values = ["Volvo", "Saab", "Fiat"];

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

복잡한(복합) 문에 대한 일반 규칙:

  • 첫 번째 줄 끝에 여는 괄호(opening bracket)를 배치합니다.
  • 여는 괄호(opening bracket) 앞에 하나의 공백(one space)을 사용합니다.
  • 공백을 넣지 않고 새 줄에 닫는 괄호(closing bracket)를 배치합니다.
  • 복잡한 문(statement)을 세미콜론으로 끝내지 마십시오.

Functions:


function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

Loops:


for (i = 0; i < 5; i++) {
    x += i;
}

Conditionals:


if (time < 20) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}

객체 규칙(Object Rules)

객체 정의에 대한 일반 규칙:

  • 객체 이름과 같은 줄에 여는 괄호(opening bracket)를 배치합니다.
  • 콜론과 각 속성과 값 사이에 하나의 공백(one space)을 사용합니다.
  • 숫자 값이 아닌 문자열 값 주위에 따옴표를 사용합니다.
  • 마지막 속성 값 쌍 뒤에 쉼표를 추가하지 않습니다.
  • 공백을 넣지 않고 새 줄에 닫는 괄호(closing bracket)를 배치합니다.
  • 항상 세미콜론으로 "객체 정의(an object definition)"를 종료합니다.

Example


var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

짧은 객체는 다음과 같이 속성 사이에 공백 만 사용하여 한 줄에 압축하여 작성할 수 있습니다:


var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

한 줄 길이 < 80

가독성을 위해 한 줄에 80 문자 이상 사용하지 않습니다.

자바스크립트 문이 한 줄에 들어가지 않으면, 줄 바꿈하기 가장 좋은 자리는 연산자(operator) 또는 쉼표(comma) 다음 입니다.

Example

코드 줄 바꿈하기 가장 좋은 위치는 연산자(operator) 또는 쉼표(comma) 다음 입니다.



이름 지정 규칙(Naming Conventions)

항상 모든 코드에 대해 동일한 명명 규칙을 사용하십시오. 예:

  • camelCase로 작성된 변수 및 함수 이름
  • 대문자(UPPERCASE)로 작성된 전역 변수(Global variables) (우리는 아니지만, 꽤 일반적입니다)
  • 상수(PI와 같은)는 대문자(UPPERCASE)로 씁니다.

변수 이름에 strong>hyp-hens, camelCase, 또는 strong>under_scores를 사용해야 합니까?

이것은 프로그래머가 자주 토론하는 질문입니다. 답은 누구에게 묻느냐에 달려 있습니다:

Hyphens in HTML and CSS:

HTML5 속성은 data- (data-quantity, data-price)로 시작할 수 있습니다.

CSS는 속성 이름 (font-size)에 hyphens을 사용합니다.

밑줄(Underscores):

많은 프로그래머는, 특히 SQL 데이터베이스에서, 밑줄 (date_of_birth)을 사용하는 것을 선호합니다.

밑줄은 PHP 문서에서 자주 사용됩니다.

PascalCase:

PascalCase는 종종 C 프로그래머가 선호합니다.

camelCase:

camelCase는 자바스크립트 자체(JavaScript itself), jQuery 및 기타 자바스크립트 라이브러리에서 사용됩니다.


HTML에 자바스크립트 로딩(Loading)

외부 스크립트를 로드하기 위해 간단한 구문을 사용하십시오 (type 속성은 필요하지 않습니다):




HTML 요소에 액세스하기

"정돈되지 않은(untidy)" HTML 스타일을 사용하면, 자바스크립트 오류가 발생할 수 있습니다.

이 두 개의 자바스크립트 문은 서로 다른 결과를 생성합니다:


var obj = getElementById("Demo")

var obj = getElementById("demo")

가능한 한 HTML에 동일한 이름 지정 규칙 (자바스크립트와 같이)을 사용하십시오.

Visit the HTML Style Guide를 방문해 보십시오.


파일 확장자(File Extensions)

HTML 파일의 확장자는 .htm이 아닌 .html입니다.

CSS 파일의 확장자는 .css입니다.

자바스크립트 파일의 확장자 는 .js입니다.


소문자 파일 이름 사용

대부분의 웹 서버 (Apache, Unix)는 파일 이름에서 대/소문자를 구분합니다:

london.jpg는 London.jpg로 액세스할 수 없습니다.

다른 웹 서버 (Microsoft, IIS)는 대/소문자를 구분하지 않습니다:

london.jpg는 London.jpg 또는 london.jpg로 액세스할 수 있습니다.

대문자와 소문자를 혼용하면 매우 일관성이 있어야 합니다.

대/소문자를 구분하지 않고 대/소문자를 구분하는 서버로 이동하면, 작은 오류 만으로도 웹 사이트가 다운될(break your web site) 수 있습니다.

이러한 문제를 방지하려면 항상(가능하면) 소문자 파일 이름을 사용하십시오.


Performance

코딩 규칙은 컴퓨터에서 사용되지 않습니다. 대부분의 규칙은 프로그램 실행에 거의 영향을 미치지 않습니다.

들여 쓰기와 여분의 공백은 작은 스크립트에서는 중요하지 않습니다.

개발중인 코드의 경우, 가독성이 우선되어야 합니다. 더 큰 프로덕션 스크립트는 축소해야 합니다(should be minified).

출처: JavaScript Style Guide and Coding Conventions

Leave a comment