모듈 선언을 이해하고 TypeScript에서 더 효율적으로 작업하기
2024-11-17 06:16:57TypeScript 모듈 선언의 중요성 이해하기
JavaScript 개발자라면 코드의 모듈화가 왜 중요한지 알 것입니다. TypeScript(이하 TS)는 JavaScript를 기반으로 한 강력한 타입 시스템을 제공하며, 이를 통해 코드의 품질을 높일 수 있습니다. 이 글에서는 TS에서 모듈을 선언하는 방법과 그 장점에 대해 자세히 알아보겠습니다. 이는 특히 IDE에서 발생하는 불필요한 오류를 해결하는 데 필수적입니다.
왜 모듈이 필요한가요?
코드의 모듈화
TS/JS에서 모듈은 코드를 분리하고 캡슐화하여 관리 가능성을 높입니다. 전역 네임스페이스 오염을 피하고, 필요한 기능만을 외부로 내보낼 수 있습니다. 즉, 다른 모듈이 불필요한 내부 구현에 접근하지 않도록 막을 수 있습니다.
명명된 내보내기와 기본 내보내기
이 두 가지 내보내기 방식은 모듈화에서 중요한 역할을 합니다. 명명된 내보내기는 특정 이름으로 여러 항목을 내보낼 수 있어 유연성을 제공합니다. 반면에 기본 내보내기는 모듈당 하나의 기본 항목에 초점을 맞추며, 이를 통해 간결한 코드 작성을 돕습니다.
모듈 해석이란?
모듈 해석(module resolution)은 TS에서 import 또는 require 구문이 참조하는 실제 파일을 찾아내는 과정입니다. TS 컴파일러는 이 과정을 통해 어떤 파일을 참조해야 하는지 결정합니다.
클래식과 노드 방식
TS에는 두 가지 주요 모듈 해석 전략이 존재합니다. 클래식 방식은 예전 코드와의 호환성을 위해 사용되며, 노드 방식은 Node.js의 모듈 해석 논리를 따릅니다. 프로젝트의 요구에 따라 적절한 방법을 선택해야 합니다.
moduleResolution 속성
TS의 moduleResolution 옵션은 특정 런타임이나 번들러에 맞춰 모듈 명세자를 실제 파일로 해석하는 방식을 제어합니다. 만약 ESM(ECMAScript 모듈 형태)로 앱을 빌드하려 한다면, NodeNext 옵션을 사용하는 것이 적절합니다. 이는 최신 Node.js 프로젝트에서 자주 사용되는 방식입니다.
경로 설정과 baseUrl의 역할
paths 옵션은 baseUrl 기준으로 모듈의 위치를 재설정하여 코드 구조를 개선합니다. 이를 통해 가독성과 유지보수성을 높일 수 있습니다. 그러나 이것은 런타임 환경과는 무관하므로 번들러에서 올바르게 처리되어야 합니다.
baseUrl 설정
baseUrl은 기본 디렉터리로 설정되어 모듈 이름을 해석할 때 가장 먼저 참조됩니다. 이는 node_modules보다 높은 우선순위를 가지며, 적절히 설정할 경우 복잡한 경로 문제를 단순화할 수 있습니다.
rootDirs의 활용
rootDirs 옵션을 사용하면 여러 가상의 디렉터리가 하나의 디렉터리처럼 동작하도록 설정할 수 있습니다. 이는 큰 프로젝트를 여러 모듈로 나누어 관리할 때 유용합니다. 컴파일러는 이를 통해 상대적인 모듈 경로를 해석할 수 있습니다.
컴파일된 JavaScript 출력에 미치는 영향
TS에서 컴파일된 결과물에 영향을 미치는 몇 가지 중요한 옵션이 있습니다. 이는 target 과 module 옵션으로, 각각 어떤 JavaScript 기능이 어느 버전에서 지원되는지를 결정하고, 런타임이 사용할 모듈 시스템을 지정합니다.
target 설정
target 속성은 컴파일된 코드가 실행될 JavaScript 런타임의 특성을 결정합니다. 예를 들어, 어떤 브라우저나 Node.js 버전에서 이 코드가 실행될지를 정의하는 것이 중요합니다.
module 설정
module 속성은 프로젝트에서 사용할 모듈 시스템을 정의합니다. Modern Node.js 프로젝트에서는 주로 nodenext를 사용하며, 이는 가장 가까운 package.json 파일의 type 값을 기준으로 CommonJS 또는 ESM을 결정합니다.
실무에서의 예시: .graphql 파일 가져오기
TypeScript가 .svg나 .graphql 파일 등의 비정형 파일을 인식하지 못할 때는 직접 형식을 정의하여 문제를 해결할 수 있습니다. 이를 통해 TypeScript가 해당 파일의 종류를 알 수 있게 됩니다.
추가 참고 자료
이 글을 통해 TS에서 모듈을 보다 효과적이고 효율적으로 활용하는 방법을 이해할 수 있었길 바랍니다. 여러 전략과 설정을 통해 개발 경험을 더욱 향상시킬 수 있습니다.