[TIL] 09_JS | Module

MJ Kim·2021년 8월 19일

TIL

목록 보기

9/12

💡새롭게 알게 된 것

모듈(Module)

이전에 Webpack을 독학으로 사용해보며 ~~webpack 이전 JS에서 사용되던 기능으로만 알고 있었다~~. 이번에 Vanilla JS로만 컴포넌트 단위로 웹앱을 구현하게 되었고, 따로 번들러 없이 ES6 모듈(Module)시스템으로만 구현하게 되며 깨달은 모듈시스템의 특징을 다시 한번 정리 해보고자 한다!

script


<body>
 <script src="./src/bar.js"></script>
 <script src="./src/foo.js"></script>
</body>

위처럼 자바스크립트의 script태그를 사용하여 js 파일을 나누어 로드할 수 있지만, 분리된 JS파일들을 하나의 JS파일 처럼 동작한다.

JS 파일들은 하나의 전역을 공유한다.
각 파일은 의존성에 맞게 순서대로 로딩되어야 하므로 파일 간의 의존성을 일일이 확인하기 번거롭다.

따라서 복잡한 자바스크립트를 효율적으로 관리하기 위해서는 모듈(Module) 단위 개발이 지향된다.

Module

script 태그에 type="module" 어트리뷰트만 추가하면 로드된 JS파일은 모듈로써 동작하게 된다.

<body>
<script type="module" src="./src/bar.js"></script>
<script type="module" src="./src/foo.js"></script>
</body>

Module의 scope

script 태그로 분리한 JS파일은 전역을 공유하는 반면, ES6의 모듈은 독자적인 모듈 스코프를 가진다.

// bar.js (type="module")
const x = 'bar';
console.log(x); // bar


// foo.js (type="module")
console.log(x); // ReferenceError: x is not defined

모듈 내에서 선언한 식별자는 모듈 외부에서 참조할 수 없다.

export, import

모듈은 독자적인 스코프를 가지지만, 다른 모듈에서 모듈 내부 식별자들을 재사용 할 수 있게 하려면 export 키워드를 사용하면 된다!
변수, 함수, 클래스 등 모든 식별자를 개별 또는 묶음으로 export 할 수 있다.


// hello.js
export function sayHello() {
 console.log('Hello');
}


// index.js
import { sayHello } from './hello.js';

sayHello(); // Hello

import할 때 아래와 같이 import 키워드와 중괄호 { }를 사용한다

// index.js
import { sayHello as hi } from './hello.js';

hi(); // Hello

모듈을 import할 때 as 키워드로 별칭을 붙일 수 있다.

// index.js
import * as hello from './hello.js';

hello.sayHello(); // Hello

모듈 전체를 import할 때는 *을 사용한다.

// hello.js
export default function sayHello() {
  console.log('Hello');
}

// index.js
import sayHello from './hello.js';

sayHello(); // Hello

모듈에서 하나의 값만 export 한다면, default 키워드를 사용 할 수 있다.
default 키워드를 사용하는 경우 기본적으로 이름없이 하나의 값을 export한다.
var, let, const 키워드는 사용 할 수 없다.

// hello.js
export default const foo = () => {}; // SyntaxError
// export default () => {} 로 작성해야함

entry point

index.js는 어플리케이션의 진입점(entry point)이므로 반드시 script 태그로 로드해야한다. hello.js는 index.js의 import 문에 의해 로드되는 의존성을 가지고 있다.

<body>
 <script type="module" src="./index.js" ></script>
</body>

💭느낀점

데브코스를 듣기 전 인터넷 강의, 자료들로 독학하며 모듈러, 프레임워크들을 간잽이(?)로만 경험하고 왜 필요한지, 어떤 컨셉으로 만들어진 것인지 완전히 이해하지 못하고 따라가기에만 급급했었던(?) 나... 진정한 Vanilla JS의 매력을 몰랐던 나...😂
이번에 Vanilla JS로 컴포넌트 개발을 하며, 다양한 편의 기능들이 어떠한 의미에서 어떻게 구현되게 되었는지 깨닫고 있다. 경험과 지식이 부족한 만큼 조금은 느리더라도, 옳은 방향으로 차근차근 성장해 나가는 개발자가 되고 싶다! 😸

참고
https://ui.toast.com/fe-guide/ko_DEPENDENCY-MANAGE
https://poiemaweb.com/es6-module

MJ Kim

기초가 튼튼한 개발자로 성장하기 💻 🤞

이전 포스트

[TIL] 08_명령형, 선언형 프로그래밍

다음 포스트

[TIL] 09_JS | Module

TIL

💡새롭게 알게 된 것

모듈(Module)

script

Module

Module의 scope

export, import

entry point

💭느낀점

참고
https://ui.toast.com/fe-guide/ko_DEPENDENCY-MANAGE
https://poiemaweb.com/es6-module

[TIL] 08_명령형, 선언형 프로그래밍

[TIL] 10_SPA, SSR, CSR

0개의 댓글

[TIL] 09_JS | Module

TIL

💡새롭게 알게 된 것

모듈(Module)

script

Module

Module의 scope

export, import

entry point

💭느낀점

참고https://ui.toast.com/fe-guide/ko_DEPENDENCY-MANAGEhttps://poiemaweb.com/es6-module

[TIL] 08_명령형, 선언형 프로그래밍

[TIL] 10_SPA, SSR, CSR

0개의 댓글

참고
https://ui.toast.com/fe-guide/ko_DEPENDENCY-MANAGE
https://poiemaweb.com/es6-module