{"componentChunkName":"component---src-templates-blog-post-js","path":"/javascript/es6-임포트-import-와-익스포트-export-모듈/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"d9abda12-9bdd-56eb-af84-fada1222fd27","excerpt":"ES6 임포트(import)와 익스포트(export) 모듈 모듈 프로그래밍은 각 프로그램 파일을 모듈 단위로 분리하여, 이를 구조화할 수 있는 장점이 있다. ES5 이전의 자바스크립트는 모듈을 지원하지 않았기에 다양한 방식을 사용해 이를 구현해왔다. ES6부터 import, export…","html":"

\"ES6

\n

모듈 프로그래밍은 각 프로그램 파일을 모듈 단위로 분리하여, 이를 구조화할 수 있는 장점이 있다.

\n

ES5 이전의 자바스크립트는 모듈을 지원하지 않았기에 다양한 방식을 사용해 이를 구현해왔다. ES6부터 import, export 구문을 활용하면, 한 모듈이 특정 변수를 익스포트(export)하고 다른 모듈이 이를 임포트(import)하여 계층 관계를 만들 수 있다.

\n

ES6 모듈은 개별 .js 파일에 원하는 개수만큼 변수를 익스포트할 수 있다.\n모듈 익스포트를 위한 다양한 방법은 아래와 같다.

\n

Export(익스포트)

\n
export {coffee}; // 변수 한개 익스포트\nexport {coffee1, coffee2, coffee3}; // 변수 여러개 익스포트\nexport {coffee as developcoffee); // 해당 변수를 alias로 익스포트\nexport {coffee1, coffee2} from \"coffeeModule\"; // 하위모듈에서 해당 익스포트된 변수를 익스포트\nexport * from \"coffeeModule\"; // 하위 모듈에서 익스포트한 모든 변수를 익스포트
\n

모듈을 임포트하는 형식은 아래와 같다.

\n

Import(임포트)

\n
import { coffee1, coffee2 } from \"coffeeModule\" // 기본 임포트\nimport { coffee as developcoffee } from \"coffee\" // 임포트 할 변수를 다른 변수로 alias\nimport * as coffee from \"developcoffee\" // 변수 전체를 임포트한 뒤 coffee 변수로 alias
","tableOfContents":"","wordCount":{"words":82},"fields":{"slug":"/javascript/es6-임포트-import-와-익스포트-export-모듈/","image":"/assets/es6.png","faq":[]},"frontmatter":{"title":"ES6 임포트(import)와 익스포트(export) 모듈","date":"2020년 12월 10일","dateISO":"2020-12-10T18:16:37.710Z","updatedISO":null,"category":"javascript","description":"모듈 프로그래밍은 각 프로그램 파일을 모듈 단위로 분리하여, 이를 구조화할 수 있는 장점이 있다. ES5 이전의 자바스크립트는 모듈을 지원하지 않았기에 다양한 방식을 사용해 이를 구현해왔다. ES6부터 import, export 구문을 활용하면, 한 모듈이 특정 변수를 익스포트(export)하고 다른 모듈이 이를 임포트(import)하여 계층 관계를 만들 수 있다.","tags":["ES6","임포트(import)","익스포트(export)","JavaScript","ECMAScript6"]}}},"pageContext":{"slug":"/javascript/es6-임포트-import-와-익스포트-export-모듈/","previous":{"fields":{"slug":"/javascript/es6-프라미스-promise/"},"frontmatter":{"title":"ES6 프라미스(Promise)","tags":["프라미스(Promise)","ES6","ECMA2015","JS"]}},"next":{"fields":{"slug":"/javascript/es6-객체-표현식/"},"frontmatter":{"title":"ES6 객체 표현식","tags":["ES6","객체 표현식","JavaScript","ECMAScript6"]}}}},"staticQueryHashes":["213619243","3262363727"]}