모던자바스크립트) 클린 코드

 

Readable Code (읽기 쉬운 코드)

• 원칙: 다른 사람이 이해할 수 있고, 자신도 1년 뒤에 이해할 수 있도록 코드를 작성한다.
• 실생활 예시:
  • "어제 식료품 쇼핑 목록"을 작성하는 상황에서, 단순히 "A, B, C"라고 적기보다, "우유, 계란, 빵"이라고 명확히 적는 것처럼 변수와 함수명을 명확히 지정해야 한다.
  • Tip: "Clever하지 말고, 명확하자!"
• 핵심원칙:
  • 1. 변수명은 '무엇을 담고 있는지' 명확히 작성
    • 나쁜 예시: x, y, z
    • 좋은 예시: userName, totalScore, isLoggedIn
  • 2. 함수명은 '무엇을 하는지' 명확히 작성
    • 나쁜 예시: calculate
    • 좋은 예시: calcuateTotalPrice()
  • 3. 실생활 예시
    • 나쁜 예시: 이거, 저거, 그거
    • 좋은 예시: 우유, 계란, 빵
  • 4. 실습

//나쁜 예시
function a(b, c) {
  return b + c;
}

// 좋은 예시
// Tip: 변수 이름은 "어떤 데이터인지"를 설명해야한다.
function add(number1, number2) {
	return number1 + number2;
}

Functions (함수 작성)

• 원칙: 하나의 함수는 한 가지 일만 해야 한다. / 함수의 매개변수는 최대 3개까지만 사용하세요. / 디폴트 값을 적극 활용하세요.
• 실생활 예시:
  • 레스토랑 주방에서 셰프가 요리하고, 웨이터가 서빙하며, 청소 담당 직원이 설거지하듯, 한 함수는 한 가지 역할(요리, 서빙, 청소)을 해야 한다.
  • Tip: 함수를 길게 쓰는 대신, 작은 함수로 나누어라.
• 실습

// 나쁜 예시
function manageRestaurant(order, cookFood, serveFood, cleanTable) {
  console.log(order);
  cookFood();
  serveFood();
  cleanTable();
}

// 좋은 예시
// Tip: function order(order)처럼 매개변수 이름이 함수 이름 과 똑같으면 헷갈리 수 있다. 매개변수를 의미 있게 바꿔보기
function order(dish) {
  console.log(`Order received: ${dish}`);
}
function cookFoold(dish){
	console.log(`Cooking: ${dish}`);
}

function serveFood(dish){
	console.log(`Serving: ${dish}`);
}

function cleanTable(tableNumber){
	console.log(`Cleaning table: ${tableNumber}`);   
}

//실행 예제
order("Pasta");
cookFood("Pasta");
serveFood("Pasta");
cleanTable(s);

General (일반 규칙)

• 원칙: 중복 코드를 제거하고(global namespace를 오염시키지 않으며) 코드를 캡슐화하라. 
• 실생활 예시:
  • 중복된 일을 없애는 건 효율적인 일상과 같다. 예를 들어, 매일 같은 이메일을 작성해야 한다면 템플릿을 만들어 두는 것이 효율적이다. 
  • Tip: var 대신 const와 let을 사용하여 안전한 코드를 유지한다.
• 실습

//나쁜 예시
console.log("Hello, John!");
console.log("Hello, Mary!");
console.log("Hello, Tom!");

//좋은 예시
function helloName(name){
	console.log(`Hello, ${name}!`);
}

//확장하기: 배열을 사용한 반복 적용
const names = ["John", "Marry", "Tom"];
names.forEach((name)=> helloName(name));

OOP (객체 지향 프로그래밍)

• 원칙: ES6 클래스를 사용하고 데이터는 외부에서 수정되지 않도록 캡슐화한다.
• 실생활 예시:
  • 공장에서 각 기계는 특정 작업만 수행하고, 외부에서 기계의 내부를 무분별하게 바꾸지 못하도록 보호하는 것처럼 클래스 내부 데이터도 외부에서 수정할 수 없어야 한다.
  • Tip: 메서드 체이닝을 통해 유연한 작업 흐름을 구현하라.
• 실습

// Car 클래스 요구사항
// 1. make(제조사 이름), speed(현재 속도)라는 속성을 가진다.
// 2. accelerate()메서드는 속도를 10 증가시킨다.
// 3. brake() 메서드는 속도를 5 감소시킨다.
// 메서드 체이닝을 지원한다.


class Car {
	constructor(make) {
    this.make = make; //제조사
    this.speed = 0; //초기 속도는 0
	}
    
    accelerate() {
    this.speed += 10;
    console.log(`${this.make} is accelerating. Speed: ${this.speed}`);
    return this; // 메서드 체이닝을 위해 this 반환
  }
  
   brake() {
    this.speed -= 5;
    console.log(`${this.make} is braking. Speed: ${this.speed}`);
    return this; // 메서드 체이닝을 위해 this 반환
  }
}


// 사용 예제 : 메서드 체이닝
const myCar = new Car("Toyota");
myCar.accelerate().accelerate().brake().accelerate();

// 출력 결과
/*
Toyota is accelerating. Speed: 10
Toyota is accelerating. Speed: 20
Toyota is braking. Speed: 15
Toyota is accelerating. Speed: 25

*/

---