-
[HTML, JS] ES6문법을 활용한 모듈 export, importprograming/Language 2019. 5. 4. 22:34
안녕하세요, Einere입니다.
(ADblock을 꺼주시면 감사하겠습니다.)
오늘은 ES6문법인 import와 export를 사용하여 java script 파일을 모듈화하고 html에서 사용하는 방법을 알아보겠습니다.
모듈화하기
프로젝트 구조 파일 구조는 index.html, portfolio.js, portfolioBuilder.js로 세가지 있습니다.
해당 파일들은 Einere.github.io폴더 내에 존재합니다.
portfolioBuilder.js
함수인 portfolioBuilder를 유명 내보내기합니다 portfolioBuilder.js는 다음과 같습니다.
function portfolioBuilder(...) { ... } export {portfolioBuilder};ES6의 문법중의 하나인, 유명 내보내기(named export)를 사용하도록 하겠습니다.
기본 내보내기(default export)를 한다면, 한 파일에 하나의 객체 밖에 내보낼 수 없습니다.
따라서 되도록이면 유명 내보내기를 추천드립니다.
내보내기/가져오기의 자세한 문법은 포스트 하단의 참고섹션을 참고하시기 바랍니다.
portfolio.js
유명 가져오기 portfolio.js는 다음과 같습니다.
import {portfolioBuilder} from './portfolioBuilder.js'; ...portfolioBuilder.js에서 portfolioBuilder함수를 유명 내보내기하였으므로, 똑같이 유명 가져오기(named import)를 합니다.
여기서 주의하실 점은, path부분에서 확장자인 ".js"를 명시해야 합니다. 만약 생략한다면 http GET을 통해 얻어오려고 시도합니다.
간혹 IDE에서 ".js"를 생략해버리는 경우가 있으니, 꼭 확인하시기 바랍니다.
index.html
index.html에서 모듈을 사용하는 방법 index.html은 다음과 같습니다.
<!doctype html> <html> <head> ... </head> <body> ... <!-- <script type="module" src="./portfolioBuilder.js"></script> --> <script type="module" src="./portfolio.js"></script> </body> </html>ES6에서는 type="module"속성을 넣어줘야 합니다.
그리고 메인 파일인 portfolio.js만 명시하면 됩니다. (portfolioBuilder.js도 script태그로 넣어줘도 상관은 없습니다.)
참고
StackOverFlow - “Uncaught SyntaxError: Unexpected token {” while importing
StackOverFlow - ES6 module Import giving “Uncaught SyntaxError: Unexpected identifier”
StackOverFlow - ES6 imports doesn't work
'programing > Language' 카테고리의 다른 글
[Functional] 평가와 일급, 고차함수 (0) 2019.06.25 [JS] 블로그 드래그 방지 해제 (0) 2019.06.12 [JS] DOM element의 offsetTop (0) 2019.05.01 [JS] JavaScript에 대한 다양한 개념들 (0) 2019.04.04 [Java] Initial assignment (0) 2019.03.27 댓글