JS coding rule and style guide

혼자만 알아보는 코드가 아닌 '함께 읽기 좋은 코드'를 만드는 코딩 규칙과 스타일 가이드에 대해 알아보겠습니다.

코딩 규칙은 마치 언어의 '맞춤법'이나 '에티켓'과 같습니다. 규칙을 잘 지키면 버그가 줄어들고, 나중에 내 코드를 다시 보거나 동료와 협업할 때 이해 속도가 비약적으로 빨라집니다.

---

1. 이름 짓기 규칙 (Naming Conventions)

변수나 함수의 이름을 어떻게 짓느냐에 따라 코드의 가독성이 결정됩니다.

• 카멜 케이스(camelCase): 자바스크립트에서 가장 권장되는 방식입니다. 첫 단어는 소문자로, 이어지는 단어의 첫 글자는 대문자로 씁니다. (예: userName, totalScore)
• 의미 있는 이름: a, b, temp 같은 무의미한 이름보다는 userAge, isLoggedIn처럼 역할이 분명한 이름을 사용하세요.
• 상수는 대문자와 스네이크 케이스: 절대 변하지 않는 상수는 대문자와 언더바(_)를 사용합니다. (예: MAX_LIMIT, API_KEY)

---

2. 코드 구조 스타일 (Code Structure)

시각적으로 깔끔한 코드는 논리적인 오류를 찾는 데도 도움을 줍니다.

• 들여쓰기 (Indentation): 보통 **2칸 또는 4칸의 공백(Space)**을 사용합니다. 최근에는 2칸을 더 선호하는 추세입니다. 탭(Tab)보다는 공백을 사용하는 것이 어느 환경에서나 동일하게 보입니다.
• 세미콜론 (Semicolon): 문장의 끝에 ;을 붙이는 것은 선택사항이지만, 예기치 못한 오류를 방지하기 위해 명시적으로 붙이는 것을 권장합니다.
• 중괄호 위치: 자바스크립트에서는 여는 중괄호({)를 조건문이나 함수 옆에 나란히 두는 방식을 선호합니다.

JavaScript

 

// 권장되는 스타일
if (isValid) {
  console.log("통과!");
}

---

3. 선언과 할당의 스타일 (Modern Style)

ES6 이후의 스타일 가이드는 안전한 코딩을 강조합니다.

• var 사용 지양: 이제 var는 거의 쓰지 않습니다. 재할당이 필요하면 let, 필요 없으면 const를 기본으로 사용하세요.
• 따옴표 통일: 작은따옴표(')나 큰따옴표(") 중 하나를 정해 일관되게 사용하세요. 최근에는 작은따옴표를 더 선호하거나, 변수 삽입이 쉬운 백틱(`)을 주로 씁니다.

---

4. 유명한 스타일 가이드들

전 세계 개발자들이 공통으로 따르는 표준 가이드라인이 있습니다.

• Airbnb JavaScript Style Guide: 가장 널리 쓰이는 가이드로, 매우 엄격하고 논리적입니다.
• Google JavaScript Style Guide: 구글에서 사용하는 규칙으로 효율성을 중시합니다.
• StandardJS: 세미콜론을 쓰지 않는 등 아주 간결한 스타일을 지향합니다.

---

5. 자동 도구 활용 (Linting & Formatting)

인간은 실수를 하기 마련이므로, 도구의 도움을 받는 것이 현명합니다.

• ESLint: 문법적인 오류나 스타일 가이드 위반을 실시간으로 찾아내어 경고를 줍니다.
• Prettier: 코드를 저장하는 순간 미리 정해진 규칙에 따라 줄 바꿈, 들여쓰기 등을 자동으로 정돈해 줍니다.

---

학습 정리

• 코딩 규칙은 팀원 간의 약속이며, 코드의 유지보수성을 결정한다.
• 변수명은 카멜 케이스로, 상수는 대문자로 짓는 것이 관례이다.
• ESLint나 Prettier 같은 도구를 설정하면 규칙을 일일이 외우지 않아도 깔끔한 코드를 유지할 수 있다.

---

좋은 습관을 만드는 코딩 스타일 가이드까지 섭렵하셨습니다!