TIP 1 | JS - 스타일가이드

Yonghyun·2021년 8월 15일
0

TIP

목록 보기
1/4

코딩 규칙이 필요한 이유

자바스크립트 코딩 규칙은 스타일 가이드나 코딩 컨벤션, 코딩 스타일, 표준 스타일이라고 한다. 자바스크립트는 웹 문서에 동적인 효과를 주기 위해 출발한 언어이므로 다른 프로그래밍 언어에 비해 데이터 유형이 유연해서 곳곳에 사용자가 주의를 기울이지 않으면 오류가 발생 할 수 있다.
또한 오픈소스에 기여하거나 누군가와 공유할 소스일 경우 코드를 더욱 깔끔하게 작성해야한다. 이때 스타일 가이드를 따라서 작성하면 소스 코드의 오류도 줄이고 일관성이 생겨 읽기가 쉬워진다. 이렇게 스타일 가이드에 따라 작성된 웹 사이트나 애플리케이션은 유지,보수할 때도 수월하고 비용도 훨씬 줄어든다.

자바스크립트 스타일 가이드

자바스크립트 스타일 가이드는 회사 프로젝트를 맡은 팀에서 따로 만들어서 사용할 수도 있지만 보통 구글이나 에어비앤비에서 배포한 것을 기준으로 작성한다.
이 부분은 나중에 꼭 시간을 갖고 자세히 읽어보면 좋을 것 같다💥

자바스크립트 소스를 작성할 때 지켜야 할 규칙

1. 코드를 보기 좋게 들여쓰기한다.

HTML 태그와 CSS를 작성했던 것처럼 자바스크립트 소스를 작성할 떄도 들여쓰기를 해야한다. 들여쓰기를 해서 작성하면 소스 간의 포함 관계를 알아보기 쉽다.
들여쓰기를 할때는 보통 Enter키로 줄을 바꿀때 새로운 줄에서 자동으로 들여쓰기가 되거나 Tab 또는Space bar 를 눌러서 공백을 여러칸 만들어서 들여쓴다. 자바스크립트 스타일 가이드에서는 Space bar 를 눌러 공백이 2칸이나 4칸인 들여쓰기를 권장하지만 공백 4칸은 화면을 많이 차지하므로 최근에는 공백 2칸 들여쓰기를 많이 사용한다.

2. 세미콜론으로 문장을 구분한다.

자바스크립트에서 세미콜론(;)은 문장의 끝을 나타내며 문장과 문장을 구분하는 역할도 한다. 자바스크립트에서는 문장이 끝날 때 세미콜론을 붙이지 않아도 실행이 되지만 자바스크립트 스타일 가이드에서는 문장을 명확하게 표시해줄때 소스를 디버깅하기 쉽기 때문에 문장을 끝낼 때 반드시 세미콜른을 붙이도록 권장한다. 또한 자바스크립트에서는 문장을 한 줄에 2개 이상 세미콜론으로 구분하여 쓸 수도 있지만 소스 가독성이 떨어지고 디버깅하기에도 어려움이 있을 수 있기 때문에 소스는 한 줄에 한 문장만 작성하는 것이 좋다.

3. 공백을 넣어 읽기 쉽게 작성한다.

예약어나 연산자ㅡ 값 사이에는 공백을 넣어서 소스 코드를 읽기 쉽게 작성한다. 이 규칙은 실행에는 전혀 상관이 없지만 개발자가 소스 코드를 읽거나 디버깅을 할 떄의 가독성을 위한 규칙이다.

///권장하지 않는 작성방법
let num=1;
let sum=num+5;
///권장하는 방법
let num = 1;
let sum = num + 5;

4. 소스 코드를 잘 성명하는 주석을 작성한다.

프로그래밍의 주석은 소스 코드를 살펴보기 위해 꼭 필요한 요소이다. (물론 주석이 필요없어도 누구나 이해할 수 있는 코드를 작성할 수 있다면 더 좋겠지만) 그 전까지는 소스 코드를 조금 더 잘 파악하는데 있어서 주석을 잘 이용하도록 하자.

5. 식별자는 정해진 규칙을 지켜 작성한다.

식별자는 개발자가 자바스크립트의 변수, 함수, 속성 등을 구별하기 위해 이름 붙인 특정 단어를 의미한다. 식별자의 첫 글자는 반드시 영문자나 언더스코어(_), 또는 달러 기호($)로 시작해야 하고 그 다음에는 영문자나 언더스코어, 달러 기호, 숫자를 작성할 수 있다. 두 단어 이상이 모여 하나의 식별자를 만드는 경우에는 첫 번째 단어는 소문자로 시작하고 두 번째 단어는 대문자로 시작하는 CamelCase를 많이 사용한다.

6. 예약어는 식별자로 사용할 수 없다.

예약어는 식별자로 사용할 수 없도록 자바스크립트에서 미리 정해 놓은 단어를 가리킨다. 이러한 예약어는 식별자 이름으로 사용할 수 없다.

profile
Life is all about timing.

0개의 댓글