누구나 따라하기 쉬운 깨끗한 코드 작성법
목표
- 좋은 코딩 스타일이 왜 중요한지 이해하기
- 중괄호, 들여쓰기, 세미콜론 등 구체적인 규칙 배우기
- ESLint와 같은 자동화 도구 활용법 익히기
1. 왜 코딩 스타일이 중요한가?
정리된 방 vs 엉망인 방
- 정리된 방: 필요한 물건을 쉽게 찾을 수 있고 사용하기도 편리하다.
- 엉망인 방: 물건을 찾으려면 시간이 걸리고, 사용하기도 어렵다.
- 코드는 마치 방처럼, 정리된 스타일로 작성하면 유지보수와 협업이 훨씬 쉬워진다.
2. 중괄호의 사용법
기본 규칙
- 여는 중괄호는 같은 줄에 작성, 앞엔 공백 한 칸
- 한 줄짜리 if 구문도 가독성을 위해 중괄호 사용 추천
코드 예제
// 올바른 예제: 깔끔한 중괄호 사용
function feedDragon(food) {
if (!food) {
console.log("배고픈 용이 화를 냅니다!");
return;
}
console.log(`용이 ${food}를 먹습니다!`);
}
엣지 케이스
- 중괄호 없는 코드도 가능하지만, 수정 시 에러 발생 가능성 증가
// 추천하지 않음: 중괄호 없이 작성
if (isHungry)
console.log("용이 배고파합니다."); // 코드 추가 시 혼란 발생 가능
// 추천: 항상 중괄호를 사용
if (isHungry) {
console.log("용이 배고파합니다.");
}
3. 코드 줄 길이: 가로 길이와 줄바꿈
규칙
- 한 줄의 코드가 80~120자를 넘지 않도록 작성
- 조건문은 줄바꿈으로 가독성 향상
예제
// 긴 조건문 줄바꿈 예제
if (
dragon.isHungry === true &&
dragon.energyLevel < 20 &&
dragon.location === 'cave'
) {
console.log("용이 동굴에서 에너지를 충전하려고 합니다.");
}
4. 들여쓰기: 깔끔한 코드의 첫걸음
가로 들여쓰기
세로 들여쓰기
function startAdventure(hero, location) {
// 변수 선언
let quest = `모험가 ${hero}가 ${location}으로 떠납니다!`;
// 출력
console.log(quest);
// 리턴
return quest;
}
5. 중첩 줄이기: 깔끔한 코드 작성법
규칙
- 중첩이 깊어지면 return이나 continue를 사용해 간결하게 작성
예제
// 중첩이 깊은 코드: 비추천
function findTreasure(map) {
if (map) {
if (map.hasTreasure) {
console.log("보물을 발견했습니다!");
}
}
}
// 간결한 코드: 추천
function findTreasure(map) {
if (!map || !map.hasTreasure) return;
console.log("보물을 발견했습니다!");
}
6. 세미콜론 사용
규칙
- 자바스크립트는 세미콜론을 자동으로 추가하지만, 명시적으로 작성하는 습관 권장
예제
// 명시적 세미콜론: 추천
const dragonName = "Toothless";
console.log(dragonName);
// 자동 추가 의존: 비추천
const dragonName = "Toothless"
console.log(dragonName)
7. 자동화 도구 활용: ESLint
설치 및 설정
- Node.js 설치
- ESLint 설치
npm install -g eslint
- 프로젝트 루트에 .eslintrc 생성
- 기본 설정 작성
{
"extends": "eslint:recommended",
"env": {
"browser": true,
"node": true,
"es6": true
},
"rules": {
"indent": ["warn", 2],
"no-console": 0
}
}
사용법
- 에디터에서 ESLint 플러그인을 활성화하면 실시간 코드 검토 가능
- 린터는 오탈자와 스타일 규칙 위반을 자동으로 탐지
실무 적용 예제: 스타일 가이드 준수 코드
// 모험가 이름과 행동을 출력하는 함수
function adventure(heroName, action) {
if (!heroName || !action) {
console.log("모험가와 행동을 입력해주세요.");
return;
}
console.log(`모험가 ${heroName}가 ${action} 중입니다.`);
}
// 호출
adventure("지구를 구하는 고양이", "몬스터와 싸우는");
요약
- 일관성 있는 스타일이 협업과 유지보수의 핵심
- 팀 스타일 가이드와 린터를 결합하면 자동화된 코드 검토 가능
- 스타일을 지키면서도 의미 있는 코드 작성이 중요
