JS coding rule and style guide

 

◼️ 명명 규칙 (Naming Convention)

변수, 함수, 클래스 등의 이름을 일관성 있고 읽기 쉽게 작성하는 규칙으로,
JavaScript에서는 가독성과 협업을 위해 반드시 지켜야 한다.

1️⃣ 변수 이름 규칙

• 문자(a-z, A-Z), 언더스코어(_), 달러 기호($)로 시작해야 한다.
• 숫자로 시작할 수 없다.
• 대소문자를 구분한다. (name ≠ Name)
• 예약어(let, const, if, for, function 등)는 사용할 수 없다.

2️⃣ 카멜 케이스 (Camel Case)

JavaScript에서는 여러 단어를 연결할 때 카멜 케이스(camelCase)를 사용하는 것이 표준 관례.

(🐫 낙타의 등처럼 중간 단어의 첫 글자가 올라가는 형태에서 이름 유래)

• 첫 단어는 소문자로 시작하고, 두 번째 단어부터 첫 글자를 대문자로 작성한다.
  • 예: userName, userAge, myBestFriend, totalPrice

3️⃣ 좋은 변수 이름 작성 방법

• 의미 있는 이름 사용.
  • a, b, x 보다는 userName, itemCount 등
• 상수는 대문자 사용.
  
  • 값이 변하지 않는 상수는 모든 글자를 대문자로 작성하고, 언더스코어(_)로 구분한다. (예: MAX_SIZE, API_KEY)
• Boolean 변수는 질문 형태로.
  
  • true(참) / false(거짓) 값을 가지는 변수는 보통 is, has, can 등의 질문 형태로 작성한다. (예: isLoggedIn, hasToken)

 

 

◼️ 코드 구조 스타일 (Code Structure)

코드를 깔끔하게 작성하면 가독성이 좋아질 뿐만 아니라, 논리적 오류를 찾고 유지보수하는 데에도 도움이 된다.

// 기본 코드 스타일
if (isValid) {
  console.log("통과!");
}

• 들여쓰기 (Indentation): 2칸 또는 4칸의 공백(Space)을 사용하며, 최근에는 2칸이 많이 사용된다. (Tab보다 Space 사용을 권장)
• 세미콜론 (Semicolon): 문장의 끝에 세미콜론(;)을 붙이는 것은 선택사항이지만, 예기치 못한 오류를 방지하기 위해 명시적으로 사용하는 것을 권장한다.
• 중괄호 위치 (Brace Style): 여는 중괄호({)를 조건문이나 함수와 같은 줄에 작성하는 방식을 선호한다. (K&R 스타일)

 

 

◼️ 선언과 할당의 스타일 (Modern Style)

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

• var 사용 금지: const를 기본으로 사용하며, 재할당 필요 시 let을 사용한다.
• 따옴표 스타일: 작은따옴표(') 또는 큰따옴표(") 중 하나로 통일하여 사용한다. (백틱(``)은 문자열 삽입 시 사용)

 

 

◼️ 유명한 JavaScript 스타일 가이드

전 세계 개발자들은 코드 스타일을 통일하기 위해 다양한 스타일 가이드(Style Guide) 를 사용한다.
이는 팀 협업과 코드 품질 유지를 위해 매우 중요한 기준이다.

• Airbnb JavaScript Style Guide: 가장 널리 사용되는 스타일 가이드 중 하나로, 엄격하고 세밀한 규칙을 가지고 있다. (가독성과 유지보수성을 매우 중요하게 생각함)
  • 명확한 네이밍 규칙
  • const 우선 사용
  • 일관된 코드 스타일 강제
• Google JavaScript Style Guide: 구글에서 사용하는 공식 스타일 가이드로, 코드의 효율성과 안정성을 중시하고 대규모 프로젝트 환경에 적합하다.
  • 명확한 구조 중심
  • 실용성과 성능 고려
  • 팀 단위 대규모 개발에 최적화
• StandardJS: 규칙을 최소화한 간결한 스타일을 지향하며, 설정 없이 바로 사용할 수 있는 것이 특징이다.
  • 세미콜론(;) 사용하지 않음
  • 코드 스타일 자동 통일
  • 설정 없이 즉시 사용 가능

 

 

◼️ 자동 도구 활용 (Linting & Formatting)

사람이 직접 코드를 작성하는 과정에서는 실수나 스타일 불일치가 발생할 수 있다.
이러한 문제를 줄이기 위해 JavaScript 개발에서는 자동화 도구를 활용한다.

• ESLint (Linting 도구): 문법 오류와 잠재적인 버그, 그리고 스타일 규칙 위반을 검사하여 경고해주는 코드 품질 관리 도구.
• Prettier (Code Formatter): 코드의 들여쓰기, 줄 바꿈 등 스타일을 자동으로 정리하여 일관된 코드 형태로 만들어주는 도구.

 

 

📍  POINT 📍

✔️ 변수 이름은 숫자로 시작할 수 없으며, 특수문자는 언더바(_), 달러 기호($)만 허용된다. ✔️

✔️ 변수명은 카멜 케이스로, 상수는 대문자로 짓는 것이 관례이다. ✔️

✔️ 이름만 봐도 무엇을 하는 변수인지 알 수 있도록 구체적이고 의미 있게 지어야 한다. ✔️

✔️ 코딩 규칙은 팀원 간의 약속이며, 코드의 유지보수성을 결정한다. ✔️

✔️ ESLint나 Prettier 같은 도구를 설정하면 규칙을 일일이 외우지 않아도 깔끔한 코드를 유지할 수 있다. ✔️