자바스크립트: 클린 코드

1. 클린 코드란 무엇이며 왜 중요할까요?

  자바스크립트를 포함한 모든 프로그래밍 언어에서 클린 코드는 마치 잘 정리된 방이나 명확한 설명서와 같습니다. 반대로 나쁜 코드는 복잡하고 이해하기 어려운 상태를 의미하죠.

 

1.1 나쁜 코드의 문제점: '스파게티 코드' 비유

  나쁜 코드를 대표하는 예로는 스파게티 코드가 있습니다. 이건 정말 스파게티 접시처럼 여기저기 뒤얽혀 있어서, 마치 한 가닥의 면이 어디서 시작해서 어디로 끝나는지 알기 힘든 것처럼, 코드의 구조가 복잡하고 이해하기 매우 어렵습니다. 코드가 작동하더라도, 그 코드가 무엇을 의미하는지 한눈에 파악하기가 힘듭니다.

// 나쁜 코드의 예시 (스파게티 코드처럼 뒤얽혀 있음)
let a = 10;
let b = 20;

function foo() { // 이 함수가 뭘 하려는 걸까요? 'a'와 'b'는 어디서 왔을까요?
  if (a > b) {
    bar(); // bar()는 뭘 할까요?
  } else {
    baz(); // baz()는 또 뭘 할까요?
  }
}

function bar() {
  a = a * 2; // 전역 변수를 수정하네요
  b = b / 2;
}

function baz() {
  a = a / 2; // 전역 변수를 또 수정하네요
  b = b * 2;
}

foo();

이처럼 스파게티 코드는 변수와 함수들이 복잡하게 얽혀 있어서, 시간이 지난 뒤 다시 보거나 다른 사람이 볼 때 바로 이해하기가 매우 어렵습니다. 결과적으로 유지보수가 힘들고, 에러(결함)가 발생할 확률이 높아집니다.

 

1.2 클린 코드의 의미와 중요성

  클린 코드는 이해하기 쉽고, 재사용 가능하며, 유지보수에 용이한 방식으로 작성된 코드를 의미합니다. 특히 대규모 팀 프로젝트에서는 다른 팀원들과 코드를 공유하고 코드 리뷰를 할 때 클린 코드가 중요해집니다. 내 코드를 다른 사람이 봤을 때 '부끄럽지 않은 코드'가 되기 위해서 클린 코드가 필수적입니다.

 

잘 정리된 설명서가 다른 사람이 제품을 쉽게 이해하고 사용할 수 있게 돕는 것처럼, 클린 코드는 다른 개발자(또는 미래의 나 자신)가 코드를 빠르게 이해하고 수정하며 확장할 수 있도록 돕습니다. 나쁜 코드인 '스파게티 코드'는 클린 코드 원칙에 따라 리팩토링(코드를 더 좋게 개선하는 작업)해야 합니다.

 

 

2. 클린 코드 원칙과 자바스크립트 핵심 개념의 연결

  클린 코드를 작성하기 위한 여러 원칙들이 있으며, 이러한 원칙들은 자바스크립트 언어의 핵심 개념을 깊이 이해할 때 더욱 효과적으로 적용될 수 있습니다.

 

2.1 코드 자체로 의도를 표현하기

  클린 코드의 가장 중요한 원칙 중 하나는 주석이 나쁜 코드를 보완하지 못한다는 것입니다. 단순히 주석으로 코드의 의도를 설명하기보다는, 코드 자체로 그 의도를 명확하게 표현하는 것이 중요합니다.

 

- 의미 있는 이름 사용: 변수나 함수의 이름을 지을 때, 그것이 왜 존재하는지, 어떤 역할을 하는지 한눈에 알 수 있도록 의미 있는 이름을 사용해야 합니다. 예를 들어, 단순히 a, b 같은 이름 대신 age, calculateDouble처럼 구체적인 이름을 사용하면, 코드를 읽는 사람이 주석 없이도 그 의미를 파악할 수 있습니다. 상수를 정의할 때도 단순히 숫자 1 대신 ADMIN_ROLE처럼 이름을 붙여 그 의미를 명확히 합니다.

 

- 스코프(Scope)와 클로저(Closure): 자바스크립트에서 스코프는 변수가 어디까지 유효하고 접근 가능한지를 정하는 규칙입니다. 전역 스코프 변수는 어디서든 접근 가능하지만, 지역 스코프 변수는 특정 함수 내에서만 접근 가능합니다. 클로저는 함수가 선언될 때의 주변 환경(스코프)을 기억하는 능력입니다. 이 능력 덕분에 내부 함수가 외부 함수의 변수에 접근할 수 있게 됩니다.

이러한 스코프와 클로저를 잘 이해하면, 변수가 어디서 선언되었고 어디서 사용될지를 코드 구조 자체로 명확히 표현할 수 있습니다. 이를 통해 변수의 유효 범위나 함수의 상태가 코드만으로도 예측 가능해지며, 코드의 의도를 더 잘 드러낼 수 있습니다.

 

- 프로토타입(Prototype)과 클래스(Class): 자바스크립트는 프로토타입 기반의 상속 모델을 사용합니다. 객체가 어떤 속성(데이터나 메서드)을 찾을 때, 자신에게 없으면 자신의 프로토타입 객체로 이동하여 찾고, 또 거기에도 없으면 그 프로토타입의 프로토타입으로 이동하는 '프로토타입 체인'을 따라 탐색합니다.

ES6에서 도입된 class 문법은 이러한 프로토타입 메커니즘 위에 만들어진 문법적인 설탕(Syntactic sugar)입니다. 즉, class를 사용해도 내부적으로는 프로토타입이 작동합니다. 클래스나 생성자 함수를 사용하면 객체가 어떤 속성이나 메서드를 가질지 구조적으로 명확히 표현할 수 있습니다. 이를 통해 객체의 역할과 기능을 코드 자체로 쉽게 이해할 수 있게 되어, 코드의 의도를 표현하는 데 도움이 됩니다.

 

// ❌ 나쁜 예시: 의미 없는 이름
class P {
  constructor(n, a) {
    this.n = n;
    this.a = a;
  }
  gI() {
    return this.n + ' ' + this.a;
  }
}
const p1 = new P('홍길동', 30);
console.log(p1.gI());

// ✅ 좋은 예시: 의미 있는 이름
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  getPersonInfo() {
    return `이름: ${this.name}, 나이: ${this.age}`;
  }
}
const person1 = new Person('홍길동', 30);
console.log(person1.getPersonInfo());

 

2.2 함수를 작게 만들기

  함수는 프로그램의 가장 기본적인 단위입니다. 클린 코드에서는 함수를 최대한 작게 만들고, 각 함수는 하나의 일만 하도록 합니다. 이는 객체 지향 설계 원칙 중 하나인 단일 책임 원칙(Single Responsibility Principle)과도 연결됩니다. 함수를 작게 만들면 코드를 읽고 이해하기 쉬워지고, 재사용성도 높아집니다.

 

// 배열에서 짝수만 필터링하는 함수
function filterEven(numbers) {
  return numbers.filter(num => num % 2 === 0);
}

// 배열 요소들의 합을 계산하는 함수
function calculateSum(numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

// 결과를 출력하는 함수
function printResult(result) {
  console.log(`결과: ${result}`);
}

 

2.3 에러 핸들링

  예상치 못한 상황(예외 상황)에 대비하여 적절한 에러 처리를 구현하는 것은 프로그램의 안정성과 에러 발생 시의 대응에 도움을 줍니다. 예를 들어, 어떤 값을 0으로 나누려고 할 때 에러를 발생시키는 것처럼 말이죠.

 

에러 처리와 비동기 처리: throw new Error()와 같은 구문을 사용하여 에러를 발생시키면, 기본적으로 스크립트 실행이 멈춥니다. Error 객체는 에러 메시지(message 속성) 등을 포함합니다. try...catch 구문을 사용하면 에러가 발생해도 프로그램이 갑자기 멈추지 않고 에러를 잡아서 원하는 방식으로 처리할 수 있습니다.

 

특히 자바스크립트에서는 네트워크 요청 같은 비동기 작업 중에 발생하는 에러를 제대로 처리하는 것이 중요합니다. 비동기 작업은 메인 실행 흐름(싱글 스레드)을 막지 않고 백그라운드에서 처리됩니다.

 

이러한 비동기 작업에서 에러가 발생했을 때, try...catch를 포함하여 적절히 처리하지 않으면 예상치 못한 문제가 발생할 수 있습니다. ES8부터 도입된 async/await 구문은 비동기 코드를 동기 코드처럼 보이게 만들어 가독성을 높여주며, try...catch 블록과 함께 사용하면 비동기 작업의 에러를 더 깔끔하게 처리할 수 있습니다.

// 비동기 작업을 처리하는 함수 (예: 네트워크 요청)
async function fetchData(url) {
  try {
    const response = await fetch(url);

    // 네트워크 요청이 실패하면 에러 처리
    if (!response.ok) {
      throw new Error(`HTTP 에러 발생: ${response.status}`);
    }

    const data = await response.json();
    return data;

  } catch (error) {
    // fetch 에러 및 JSON 변환 과정에서 발생하는 에러를 잡아서 처리
    console.error('에러 발생:', error.message);
    return null; // 또는 상황에 맞는 처리
  }
}

// 메인 함수에서 비동기 작업 실행
async function main() {
  const url = 'https://api.example.com/data';

  const result = await fetchData(url);
  
  if (result) {
    console.log('데이터:', result);
  } else {
    console.log('데이터를 가져오는 데 실패했습니다.');
  }
}

// 실행
main();

 

3. 클린 코드와 최신 자바스크립트 트렌드

  클린 코드는 단순히 코딩 스타일을 넘어, 자바스크립트 생태계의 발전과 최신 트렌드 속에서 더욱 강조되고 있습니다.

 

3.1 비동기 처리 기법의 발전

  자바스크립트는 싱글 스레드이기 때문에 시간이 오래 걸리는 작업을 처리할 때 문제가 발생했습니다. 이를 해결하기 위해 비동기 처리가 중요해졌으며, 다양한 기법이 등장했습니다.

 

특히 async/await를 사용하면 복잡했던 비동기 코드의 흐름이 훨씬 읽기 쉬워지고 구조적으로 명확해져서, 비동기 코드를 클린하게 작성하는 데 큰 도움이 됩니다. 상황에 따라서는 간단한 콜백 함수가 더 나을 수도 있습니다. 비동기 에러 처리도 try...catch와 함께 async/await를 사용할 때 더 자연스러워집니다.

 

비동기에 관한 자세항 사항은 이전에 다뤘던 글을 참고해주세요.

자바스크립트: 작업 처리 방식의 두 얼굴 (동기와 비동기)

 

3.2 프레임워크 및 아키텍처 활용

  현대의 웹 개발은 SPA(Single Page Application) 개발 트렌드가 주류이며, React, Vue, Angular와 같은 프론트엔드 프레임워크/라이브러리가 이를 위한 강력한 도구를 제공합니다.

 

- 프레임워크의 역할: 프레임워크는 웹 개발 작업을 보다 효율적으로 진행할 수 있도록 미리 구축된 코드와 도구(라이브러리)를 제공하는 플랫폼입니다. 개발자는 프레임워크가 제공하는 규칙과 구조 안에서 필요한 기능 개발에 집중할 수 있습니다.

 

- 컴포넌트 기반 아키텍처: 이러한 프레임워크들은 컴포넌트 기반 개발을 강조합니다. 애플리케이션 UI를 재사용 가능한 작은 단위(컴포넌트)로 나누어 개발하는 방식입니다.

프레임워크를 사용하면 코드 베이스가 자연스럽게 모듈화되고 구조화됩니다. 컴포넌트 단위로 코드를 작성하면 각 부분이 명확한 역할과 책임을 갖게 되어 (단일 책임 원칙과 유사), '스파게티 코드'를 방지하고 코드의 가독성 및 유지보수성을 크게 높이는 데 도움이 됩니다.

 

3.3 성능 고려 (자바스크립트 엔진 최적화)

  클린 코드는 단순히 가독성뿐만 아니라, 코드가 효율적으로 실행되는 성능과도 연결될 수 있습니다. 자바스크립트 코드는 V8과 같은 자바스크립트 엔진에 의해 실행됩니다. 이 엔진들은 코드를 더 빠르게 만들기 위해 다양한 최적화 기법을 사용합니다.

 

- 핫 코드 (Hot Code): 자바스크립트 엔진은 여러 번 반복해서 실행되는 함수(핫 코드)를 감지하면, 이 코드를 더 빠른 기계 명령어로 변환(최적화 컴파일)합니다. 이때 이전 실행 정보를 바탕으로 코드를 더 빠르게 실행하기 위한 추측 기반 최적화를 수행하기도 합니다.

 

- 히든 클래스 (Hidden Classes): 자바스크립트 객체는 동적으로 속성을 추가하거나 제거할 수 있어 엔진이 객체의 형태를 파악하기 어렵습니다. 엔진은 객체의 형태를 추적하기 위해 히든 클래스라는 내부적인 개념을 사용합니다.

 

- 인라인 캐시 (Inline Caches): 객체 속성에 접근할 때, 엔진은 해당 객체의 히든 클래스와 속성 위치 정보를 캐시에 저장합니다. 다음에 같은 형태의 객체에서 같은 속성에 접근할 때 캐시 정보를 사용하여 빠르게 속성을 찾습니다.

 

자바스크립트 엔진의 최적화는 코드가 얼마나 예측 가능한 패턴으로 작성되었는지에 영향을 받습니다. 객체에 속성을 추가/제거하며 형태를 자주 바꾸는 것보다, 일관된 형태의 객체를 사용하거나 특정 타입의 데이터를 처리하는 함수를 분리하여 작성하는 것은 엔진이 히든 클래스와 인라인 캐시를 더 효과적으로 사용하고 최적화된 코드를 생성하는 데 도움이 될 수 있습니다.

 

불필요하게 긴 프로토타입 체인도 속성 탐색 시간을 증가시켜 성능에 영향을 줄 수 있으므로, 이를 인지하는 것도 중요합니다. 클린 코드의 원칙(의미 있는 이름, 작은 함수, 단일 책임)을 따르면 자연스럽게 예측 가능한 패턴을 유도하게 되어, 간접적으로 성능 최적화에도 기여할 수 있습니다. 또한, 내장된 프로토타입을 임의로 변경하는 '원숭이 패칭(monkey patching)'은 호환성 문제뿐 아니라 엔진 최적화를 방해할 수 있으므로 피해야 합니다.

 

 

결론

  자바스크립트에서 클린 코드를 작성하는 것은 단순히 보기 좋은 코드를 만드는 것을 넘어섭니다. 이는 언어의 근본적인 동작 방식 (싱글 스레드, 호출 스택, 비동기 처리, 프로토타입), 최신 개발 트렌드 (SPA, 프레임워크), 그리고 코드가 실제로 실행되는 방식 (자바스크립트 엔진의 최적화)에 대한 깊이 있는 이해를 요구합니다.

 

클린 코드 원칙을 따르고, 자바스크립트의 핵심 개념을 이해하며, 최신 트렌드를 따라 발전하는 비동기 처리 기법과 프레임워크를 효과적으로 활용하는 것은 읽기 쉽고, 유지보수하기 용이하며, 안정적이고 효율적인 코드를 작성하는 필수적인 과정입니다. 자바스크립트 개발자로서 계속 성장하기 위해서는 이러한 지식을 꾸준히 습득하고 실제 코드에 적용하는 노력이 중요합니다.