기존의 자바스크립트 코드를 모듈과 네임스페이스로 변환하는 과정은 간단하지 않을 수 있지만, 유용한 리팩토링 방법 중 하나입니다. 이 글에서는 TypeScript를 사용하여 기존의 자바스크립트 코드를 모듈과 네임스페이스로 변환하는 방법을 알아보겠습니다.

모듈화 개념

모듈은 코드를 재사용하기 좋게 하기 위한 논리적인 단위를 말합니다. 모듈을 사용하면 코드를 논리적으로 분리하여 유지보수 및 확장성을 향상시킬 수 있습니다.

기존 자바스크립트 코드

다음은 기존의 자바스크립트 코드입니다.

// calculator.js
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

TypeScript 모듈로 변환

기존의 자바스크립트 코드를 TypeScript 모듈로 변환하는 방법은 다음과 같습니다.

// calculator.ts
export function add(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

위의 코드에서는 export 키워드를 사용하여 각 함수를 모듈 외부로 공개하고 있습니다. 이제 다른 파일에서 calculator 모듈을 가져와 사용할 수 있습니다.

네임스페이스 활용

또 다른 방법은 네임스페이스를 활용하는 것입니다. 다음은 네임스페이스를 활용한 변환 방법입니다.

// calculator.ts
namespace Calculator {
  export function add(a: number, b: number): number {
    return a + b;
  }

  export function subtract(a: number, b: number): number {
    return a - b;
  }
}

위의 코드에서 namespace 키워드를 사용하여 Calculator 네임스페이스 안에 함수들을 포함시켰습니다.

이제 기존의 자바스크립트 코드를 모듈과 네임스페이스로 변환하는 방법을 알아보았습니다. 이를 통해 코드를 더욱 구조화하고 재사용성을 높일 수 있습니다. TypeScript를 사용하여 모듈과 네임스페이스를 활용하는 방법을 익혀두면, 기존의 자바스크립트 코드를 효과적으로 관리할 수 있을 것입니다.