JavaScript 관련 글입니다.

• JS Event Loop, 자바스크립트 동작 원리
• 호이스팅이란 , var, let, const 차이
• Three.js에 대해
• script, script async, script defer의 차이
• AJAX가 무엇일까?
• 함수선언식과 함수표현식
• null과 undefined의 차이 간단정리
• setTimeout과 setInterval 요약
• this의 여러가지 의미
• Spread Operator(...)?
• JS class Constructor
• ES6 Destructuring Syntax
• default 파라미터 알아보기
• import / export 를 사용한 모듈식 개발방법
• Optional Chaining (?.)
• 프로미스(Promise)에 대해서
• ES8 - async / await
• Symbol 자료형?
• forEach, for in, for of 알아보기
• JSON형식 변환 방법 - JSON.parse(), JSON.stringify()
• 자바스크립트 가비지 컬렉션
• 화살표 함수와 일반함수의 차이
• JavaScript Array.reduce() 간단히 알아보기

이번 글에서는 import / export 를 사용한 모듈식 개발방법에 대해서 정리해보겠습니다.

Module

JS 코드를 작성하다보면 코드가 길어집니다. 그래서 한 파일에 코드가 길어질 때 파일을 쪼개서 모듈식으로 개발합니다.

<script src='feature.js'></script>

index.html 파일에 feature.js라는 파일을 첨부할 때 위와 같이 보통 작성합니다.

<script type='module'>
</script>

그런데 이렇게 가져오는 방법도 있습니다.
type=’module’ 을 붙여주는 것인데, 이렇게하면 특정 파일안에 있는 변수를 가져올 수 있습니다.

아래 예시를 보겠습니다.

// feature.js

const name = 'kim';
export default name;

<!-- index.html -->

<script type='module'>
    import name from 'feature.js';
</script>

feature.js 안에 있는 name이라는 변수에 ‘export default’를 붙이면, 위와 같이 ‘import 변수명 from 경로’를 작성해주어 변수를 가져올 수 있습니다. 여기서 export default가 붙은 변수를 가져올 때 import 다음 ‘변수명’은 새롭게 작명이 가능합니다.
주의해야할 점은 export default는 파일 안에서 한번만 쓸 수 있습니다.
그러면 가져올 변수가 많으면 어떻게 할까요?

// feature.js

const name = 'kim';
const age = 26;
export {name, age};

<!-- index.html -->

<script type='module'>
    import {name, age} from 'feature.js';
</script>

위와 같이 ‘export’만 붙이되, {}로 감싸주어야합니다. import하는 파일안에서도 {}로 변수를 감싸주어야합니다.

as로 변수이름 새롭게 지어주기

// feature.js

const name = 'kim';
const age = 26;
const number = 100;
export {name, age};
export default number;

<!-- index.html -->

<script type='module'>
    import number as 숫자, {name as 이름, age as 나이} from 'feature.js';
</script>

위와 같이 ‘as 변수명’의 형태로 써주면 새롭게 변수명을 지어줄 수 있습니다.

End.