Posts JavaScript의 Module에 대해 간략하게 알아보기(import, export)
Post
Cancel

JavaScript의 Module에 대해 간략하게 알아보기(import, export)

JavaScript의 Module에 대해 간략하게 알아보기(import, export)


ES2015부터 표준으로 등재된 모듈은 import, export 등으로 코드를 모듈 단위로 관리하고, 사용할 수 있게 해 주고 있습니다.

  • import 는 다른 파일(모듈)로부터 원하는 함수나 클래스, 변수 등을 가져올 때 사용한다.

  • export는 함수나 클래스, 변수 등을 다른 곳에서 쓸 수 있도록 내보내기 하는 기능이다.


기본적으로 import 문 옆에는 가져올 함수나 클래스, 변수 등을 작성하고 그 경로를 from 키워드 옆에 작성하게 됩니다. 예를 들어, view/test.js경로에 아래와 같은 코드가 있다고 가정해 보겠습니다.

1
2
3
/* view/test.js */
import { queryAll } from '../src/util.js'
...

import 옆에는 모듈을 특정한 변수처럼 사용할 때 붙일 이름입니다. 위 코드의 import문을 보니, ../src/util.js 파일에 queryAll이라는 함수가 존재함을 짐작할 수 있습니다.

1
2
3
4
5
6
7
8
9
/* ../src/util.js */
export function queryAll(node){
	...
	return res;
}
function queryTest(node){
	...
	return res;
}

위처럼 queryAll함수 앞에 export키워드를 붙여서 “이 함수는 다른 외부에서 import하여 쓸 수 있도록 내보내겠다” 고 정의합니다. 그 덕분에 test.js에서는 queryAll함수를 import를 이용해 가져와서 사용할 수 있었습니다.


만약 여러 개의 함수(혹은 클래스, 변수)를 가져오고 싶으면 어떻게 할까요? 우선, 내보낼 것 앞에 모두 export를 붙여야 합니다.

1
2
3
4
5
6
7
8
9
/* ../src/util.js */
export function queryAll(node){
	...
	return res;
}
export function queryTest(node){
	...
	return res;
}

그 다음 import 를 할 때, { } (중괄호) 안에 가져오고자 하는 것들을 콤마로 여러 개 적으면 됩니다.

1
2
3
/* view/test.js */
import { queryAll, queryTest } from '../src/util.js'
...

만약 특정 모듈에서 내보내고자 하는 대상이 단 하나일 경우, export deafult키워드를 붙여서 알릴 수 있습니다. 내보내려는 것이 하나만 있도록 모듈을 작성하는 경우가 자주 있습니다. 예를 들어, class자체를 외부에서 사용하게 하려는 경우가 생길 수 있습니다.

1
2
3
4
/* ../src/slide.js */
export default class Slide{
 //...
}

혹은 아래와 같은 표기법도 가능합니다. (내보낼 대상과 export키워드가 아래와 같이 떨어져 있어도 가능)

1
2
3
4
class Slide{
 //...
}
export default Slide

그러면 외부에서 이 클래스를 import 할 때에는 중괄호 없이 불러옵니다.

1
2
3
/* view/test.js */
import Slide from '../src/slide.js'
...

default키워드를 붙여서 내보낸 것은 중괄호 없이 불러옴에 유의하세요!


혹여나 파일이나 폴더 갯수가 많아지고 점점 코드가 복잡해진다면, 위처럼 상대 경로로 코드를 불러오는 것이 불편할 수 있습니다. 도대체 .. 을 몇 개 써야 원하는 상위 디렉토리의 코드를 가져올 수 있을지 답답함이 생길 수도 있구요.

하지만 해결 방법이 있습니다. 프로젝트를 진행하면서 JavaScript 코드를 짤 때에는 webpack과 같은 모듈 번들러를 같이 사용하는 경우가 거의 대부분인데, 이러한 답답함을 webpack 설정을 통해 해소할 수 있습니다. 다음 포스팅에서는 절대 경로로 파일을 import 할 수 있는 해결법을 webpack 포스팅과 함께 작성하도록 하겠습니다.