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 포스팅과 함께 작성하도록 하겠습니다.