JavaScript

파일을 나누고 import로 연결하기

export는 기능을 내보내고 import는 다른 파일의 기능을 가져옵니다.

이럴 때 필요해요

가격 계산 함수와 화면 코드를 다른 파일로 나눕니다.

코드가 길어지면 한 파일에서 필요한 기능을 찾기 어려워집니다. 모듈은 파일별로 기능을 나누고 외부에서 사용할 것만 내보내도록 도와줍니다.

export function total은 이름 있는 함수를 내보냅니다. 다른 파일에서는 import { total }처럼 같은 이름을 중괄호 안에 적어 가져옵니다. 파일 경로도 맞아야 합니다.

아래 코드는 주석에 표시한 두 파일로 나누어야 합니다. 브라우저에서는 로컬 HTTP 서버로 제공하고 script type="module"로 시작 파일을 불러옵니다. 예제의 두 파일을 콘솔 한 칸에 함께 붙여 넣는 방식은 아닙니다.

동작을 설명하는 읽기 전용 예제입니다.

example.js

// price.js
export function total(price, count) { return price * count; }

// app.js
import { total } from "./price.js";
console.log(total(5000, 2));

javascript · 읽기 전용6줄

두 파일을 모듈 환경에서 연결하면 10000을 출력합니다.

파일을 나눴는데 total을 찾지 못한다면 무엇을 확인할까요?

생각할 단서 export한 이름과 import한 이름, 파일 경로를 맞춰 보세요.

예시 답변 확인

내보낸 이름, import한 이름과 경로, 모듈 실행 환경을 확인합니다. total 함수 자체의 계산과 모듈 연결은 다른 문제입니다.

문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.