Section 20: JavaScript Modules - Writing Modular (=Multi-File) Code

The goals

💪🏻What & Why?

✌🏻Usage

 

Serve

sudo npm install -g serve

 

Module

모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다.

자신만의 파일 스코프를 갖는 모듈의 자산(모듈에 포함되어 있는 변수, 함수, 객체 등)은 기본적으로 비공개 상태다. 다시 말해, 자신만의 파일스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. 

 

자바스크립트에서 지정한 변수들은 global scope로 지정되기 때문에 사실상 하나의 스크립트 파일에서 작성하는 것과 동일한 효과를 가진다. 그렇기 때문에 다른 파일에서 동일한 이름의 변수를 사용하게 되면 덮어 쓰는 효과가 나타나게 된다. 

이렇게 저장된 변수들은 window에서 조회 가능하다.

 

export, import하여 사용할 수 있다.

 

module역시 class와 같이 strict mode에서 작동한다.

 

globalThis

The global globalThis property contains the global this value, which is akin to the global object.

Search for the global across environments

Usually, the global object does not need to be explicitly specified — its properties are automatically accessible as global variables.

However, one case where one needs to explicitly access the global object is when writing to it, usually for the purpose of polyfills.

Prior to globalThis, the only reliable cross-platform way to get the global object for an environment was Function('return this')(). However, this causes CSP violations in some settings, so authors would use a piecewise definition like this (slightly adapted from the original core-js source):

 

With globalThis available, the additional search for the global across environments is not necessary anymore:

if (typeof globalThis.Intl === 'undefined') {
  Object.defineProperty(globalThis, 'Intl', {
    value: {
      // Our Intl implementation
    },
    enumerable: false,
    configurable: true,
    writable: true,
  });
}

By using globalThis, your code will work in window and non-window contexts without having to write additional checks or tests. In most environments, globalThis directly refers to the global object of that environment. In browsers, however, a proxy is used internally to take into account iframe and cross-window security. In practice, it doesn’t change the way you write your code, though.

Generally, when you’re not sure in what environment your code will be used, or when you want to make your code executable in different environments, the globalThis property comes in very handy. You’ll have to use a polyfill to implement the feature on older browsers that do not support it, however.

On the other hand, if you’re certain what environment your code is going to be used in, then use one of the existing ways of referencing the environment’s global object and save yourself from the need to include a polyfill for globalThis.

 

quiz

질문 1:

여러 <script src="...">를 가져오는 것보다 JavaScript 모듈이 더 나은 이유는 무엇일까요?

• 차이 없습니다 - 두 가지 접근 방식 중 아무거나 쓸 수 있습니다.

• 모듈의 성능이 더 좋습니다 - 이것이 모듈을 써야 하는 이유입니다.

• 각 파일이 종속성을 지정하므로 올바른 순서를 수동으로 일일이 관리할 필요가 없습니다.

질문 2:

아래의 export 문에 대해 옳은 것은 무엇일까요?

1. export const myName = 'Max';

• 파일의 유일한 export처럼 보이니 이른바 “기본 export”입니다.

• 이것은 소위 "명명된 export"입니다 - myName이라는 이름 아래에 값이 'Max'인 상수를 내보내는 겁니다.

• 유효하지 않은 구문이 있는 예입니다 - const 키워드를 제거해야 합니다.

질문 3:

다음의 export를 어떻게 임포트 해야 할까요?

export const myName = 'Max';
export function greet() { ... }

• 1. import personData from './file.js';
• 1. import { myName } from './file.js';
• 1. import * as personData from './file.js';

이는 파일의 모든 export를 하나의 객체로 묶습니다. 이(묶는 기술)를 사용하지 않는 대안은 임포트하려는 모든 명명된 export를 대상으로 지정하는 겁니다: "import { Greeting, myName } from './file.js'".

 

질문 4:

모듈에서 내보내지 않은 코드는 언제, 얼마나 자주 실행될까요?

• 모듈이 다른 파일에서 임포트될 때 항상.

• 모듈이 다른 파일에서 처음으로 임포트될 때.

• 절대 실행되지 않습니다

 

 

 

sources

https://www.npmjs.com/package/serve

serve

https://books.google.se/books?id=JQ1sEAAAQBAJ&printsec=frontcover&dq=%EB%AA%A8%EB%8D%98%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8+deep+dive&hl=en&sa=X&redir_esc=y#v=onepage&q=%EB%AA%A8%EB%8D%98%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20deep%20dive&f=false 

모던 자바스크립트 Deep Dive

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis

globalThis - JavaScript | MDN

https://blog.logrocket.com/what-is-globalthis-why-use-it/

What is globalThis, and why should you start using it? - LogRocket Blog