JS Style Guide
모든 JavaScript 프로젝트에 대해 항상 동일한 코딩 규칙을 사용해야한다.
JavaScript Coding Conventions
코딩 규칙은 프로그래밍을 위한 스타일 지침이다. 일반적으로 아래 내용을 다룹니다.
- 변수 및 함수에 대한 명명 및 선언 규칙
- 공백, 들여쓰기 및 주석 사용에 대한 규칙
- 프로그래밍 관행 및 원칙
코딩 규칙은 품질을 보장한다:
- 코드 가독성 향상
- 용이한 코드 유지 관리
코딩 규칙은 팀이 따라야 하는 문서화된 규칙이거나 개인의 코딩 관행일 수 있다.
이번 장은 W3Schools에서 사용하는 일반적인 JavaScript 코드 규칙을 설명한다.
또한 다음 장의 "모범 사례"를 읽고 코딩 함정을 피하는 방법을 배워야 한다.
Variable Names
W3schools에서는 식별자 이름(변수 및 함수)에 camelCase를 사용한다.
모든 이름은 문자(letter)로 시작한다.
이 페이지의 맨 아래에서 명명 규칙에 대한 광범위한 자료를 찾을 수 있다.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);Spaces Around Operators
항상 연산자( = + - * / )와 쉼표 뒤에 공백을 넣어야 한다.
Examples:
let x = y + z; const myArray = ["Volvo", "Saab", "Fiat"];
Code Indentation
코드 블록의 들여쓰기에는 항상 2개의 공백을 사용해야한다.
Functions:
function toCelsius(fahrenheit) { return (5 / 9) * (fahrenheit - 32); }
들여쓰기에 탭(tabulator)을 사용하면 안된다. editors는 탭을 다르게 해석할 수 있다.
Statement Rules
간단한 문장에 대한 일반 규칙:
- 간단한 문장은 항상 세미콜론으로 끝내야 한다.
Examples:
const cars = ["Volvo", "Saab", "Fiat"]; const person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" };
복잡한(복합) 문에 대한 일반 규칙:
- 여는 괄호를 첫 번째 줄 끝에 놓는다.
- 여는 대괄호 앞에 공백을 하나 입력한다.
- 선행 공백 없이 닫는 대괄호를 새 줄에 넣는다.
- 복잡한 문장을 세미콜론으로 끝내면 안된다.
Functions:
function toCelsius(fahrenheit) { return (5 / 9) * (fahrenheit - 32); }
Loops:
for (let i = 0; i < 5; i++) { x += i; }
Conditionals:
if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; }
Object Rules
객체 정의에 대한 일반 규칙:
- 여는 괄호를 개체 이름과 같은 줄에 놓는다.
- 콜론과 각 속성과 해당 값 사이에 공백 하나를 사용한다.
- 숫자 값이 아닌 문자열 값 주위에 따옴표를 사용해야 한다.
- 마지막 속성-값 쌍 뒤에 쉼표를 추가하면 안된다.
- 공백 없이 새 줄에 닫는 대괄호를 놓는다.
- 항상 세미콜론으로 개체 정의를 끝내야 한다.
Example
const person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" };
짧은 객체는 다음과 같이 속성 사이에만 공백을 사용하여 한 줄에 압축하여 쓸 수 있다.
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Line Length < 80
가독성을 위해 80자보다 긴 줄은 피해야한다.
JavaScript 문이 한 줄에 맞지 않는 경우 가장 좋은 위치는 연산자 또는 쉼표 뒤다.
Example
document.getElementById("demo").innerHTML = "Hello Dolly.";
Naming Conventions
모든 코드에 대해 항상 동일한 명명 규칙을 사용해야한다. 예를 들어:
- camelCase로 작성된 변수 및 함수 이름
- 대문자로 작성된 전역 변수 (w3schools는 그렇지 않지만 꽤 일반적이다)
- 대문자로 작성된 상수(예: PI)
- 변수 이름에 hyp-hens, camelCase 또는 under_scores를 사용해야 할까?
이것은 프로그래머가 자주 토론하는 질문이다. 대답은 묻는 사람에 따라 다르다.
HTML 및 CSS의 하이픈:
HTML5 속성은 data-(data-quantity, data-price)로 시작할 수 있습니다.
CSS는 속성 이름(글꼴 크기)에 하이픈을 사용합니다.
하이픈은 빼기 시도로 오인될 수 있다.
JavaScript 이름에는 하이픈을 사용할 수 없다.
Underscores:
많은 프로그래머는 특히 SQL 데이터베이스에서 밑줄(date_of_birth)을 사용하는 것을 선호한.
밑줄은 PHP 문서에서 자주 사용된다.
PascalCase:
PascalCase는 종종 C 프로그래머가 선호한다.
camelCase:
camelCase는 JavaScript 자체, jQuery 및 기타 JavaScript 라이브러리에서 사용된다.
$ 기호로 이름을 시작하면 안된다. 많은 JavaScript 라이브러리 이름과 충돌하게 되기 때문이다.
Loading JavaScript in HTML
외부 스크립트를 로드하는 데 간단한 구문을 사용한(유형 속성은 필요하지 않음).
<script src="myscript.js"></script>
Accessing HTML Elements
"정확하지 않은(untidy)" HTML 스타일을 사용하면 JavaScript 오류가 발생할 수 있다.
아래 두 JavaScript 문은 다른 결과를 생성한다.
const obj = getElementById("Demo") const obj = getElementById("demo")가능하면 HTML에서 동일한 명명 규칙(JavaScript와 같이)을 사용하자.
HTML 스타일 가이드 참조
Always Declare Document Type
HTML 파일에는 .html 확장자가 있어야 한다(.htm 허용).
CSS 파일의 확장자는 .css여야 한다.
JavaScript 파일에는 .js 확장자가 있어야 한다.
Use Lower Case File Names
대부분의 웹 서버(Apache, Unix)는 파일 이름에 대해 대소문자를 구분한다.
london.jpg는 London.jpg로 액세스할 수 없다.
다른 웹 서버(Microsoft, IIS)는 대소문자를 구분하지 않는다.
london.jpg는 London.jpg 또는 london.jpg로 액세스할 수 있다.
대문자와 소문자를 혼합하여 사용하는 경우 매우 일관성이 있어야 한다.
대소문자를 구분하지 않는 서버에서 대소문자를 구분하는 서버로 이동하면 작은 오류로도 웹 사이트가 손상될 수 있다.
이러한 문제를 방지하려면 항상 소문자 파일 이름을 사용해야한다(가능한 경우).
Performance
코딩 규칙은 컴퓨터에서 사용되지 않는다. 대부분의 규칙은 프로그램 실행에 거의 영향을 미치지 않기 때문이다.
들여쓰기 및 추가 공백은 작은 스크립트에서 중요하지 않다.
개발 중인 코드의 경우 가독성이 우선되어야 한다. 더 큰 프로덕션 스크립트는 최소화해야 한다.
