개발 기본
모듈(Module)
모듈은 코드를 나눠 관리하고 필요한 기능을 다른 코드에서 가져다 쓸 수 있게 하는 구성 단위입니다.
쉬운 설명
AI가 “이 함수를 별도 모듈로 분리했어요”라고 하면 기능을 다른 파일 등으로 나누어 불러 쓰도록 했다는 뜻이에요. JavaScript의 ES 모듈에서는 export로 내보내고 import로 가져와요. 예를 들어 여러 화면에서 쓰는 참가비 계산을 한 파일에 두고 사용할 수 있어요. 모듈이라고 해서 인터넷에서 설치한 코드만 뜻하지는 않아요.
이런 상황에서 만나요
참가비 계산 함수를 fee.js로 옮긴 뒤 화면에서 함수를 찾지 못한다는 오류가 났어요. 파일 경로와 내보낸 이름, 가져오는 이름을 맞춰 보는 상황이에요.
내보낸 함수와 가져오는 이름을 맞춰요
export function totalFee(count) {
return count * 10000;
}import { totalFee } from "./fee.js";
totalFee(2);20000
- 1totalFee라는 이름의 함수를 다른 파일에서 사용할 수 있게 해요.
- 2같은 이름으로 가져와 2명을 입력하는 예시예요.
- 3할인이 없는 단순 계산 예시이며 파일을 나눠도 결과는 같아야 해요.
AI에게 “fee.js의 export와 사용하는 파일의 import가 맞는지 확인해 줘”라고 요청해 보세요. 파일명 대소문자와 상대 경로도 확인해요. 함수가 불러와진 뒤에는 계산 결과가 이전과 같은지 시험해요.
헷갈리기 쉬운 점
모듈과 라이브러리는 어떻게 다른가요?
모듈은 코드를 나누고 연결하는 단위예요. 라이브러리는 특정 기능을 제공하는 코드 모음이며 여러 모듈로 구성될 수 있어요. 내가 프로젝트 안에서 직접 만든 파일도 모듈로 사용할 수 있어요.
이름을 지정해 내보내는 방식과 default로 내보내는 방식은 가져오는 문법이 달라요. 오류를 피하려고 중괄호만 무작정 바꾸지 말고 실제 export를 먼저 확인하세요.
왜 알아야 할까요?
기능을 다른 파일로 옮겼을 때 발생하는 경로·이름 문제를 찾을 수 있어요. 같은 계산을 여러 곳에서 복사하지 않고 한곳에서 관리하는 코드도 이해하기 쉬워져요.
조금 더 자세히
여기서는 JavaScript ES 모듈을 예로 설명합니다. 이름 있는 export는 import { totalFee }처럼 해당 이름으로 가져옵니다. default export는 다른 문법을 사용하며 Node.js의 CommonJS도 별도 방식입니다.
import 경로는 현재 파일에서의 상대 위치나 설치된 패키지 이름 등을 가리킬 수 있습니다. 확장자와 별칭을 처리하는 규칙은 실행 환경과 빌드 설정에 따라 달라지므로 프로젝트의 규칙을 확인합니다.
직접 사용할 때 확인해 보세요
- 내보내는 이름과 가져오는 이름을 맞춘다
- 파일 경로와 대소문자를 확인한다
- 분리한 뒤에도 기능 결과가 같은지 시험한다
관계 지도
