왜 JavaScript Modules를 사용하기 위해서는 Local Server를 실행해야 하나요?

(1)

EcmaScript6에서 도입되었고, Chrome61부터 Browser Native로 지원하는 JavaScript Modules.

얘를 사용할 때는 항상 Local server가 필요했다. 왜일까?

(2)

일단, 먼저 사용 예를 보자. 아래와 같이 module script를 사용할 수 있다.


<!-- index.html -->

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


/* index.js */

import myModule from './src/myModule.js';

// ...

얘는 Browser native ESM(EcmaScript-Module)라고도 하며, 모던 브라우저에서 사용이 가능하다.

겉으로 보이는 동작은 간단하다.

(3)

따라서 Local Server는 반드시 필요하다 ⇒ 왜?

브라우저에서 fetching을 통해 Script와 같은 리소스를 요청할 때,

Same-Origin Policy라구 다음이 동일한지 여부를 확인하게 된다.

그런데, 이를 항상 동일하게 할 수는 없지 않는가? 외부에서 가져오는 경우도 있고.

여기서 CORS(Cross-Origin Resource Sharing) 정책이 나온다.

(4)

기본적으로 fetching의 경우, Same-Origin Policy를 따른다.

즉, 위 세 가지 조건이 동일해야 한다는 말이며...

그렇지 않은 경우 CORS 정책을 수정해줘야 하는데 ⇒ 이는 서버에서 수정이 가능하다.

이 내용은 주제와 좀 어긋나긴 한데, 대략적으로 다음과 같다.

Server에서 Access-Control-Allow-Origin header의 값을 * 로 지정해서 respond 했는데,

이는 '모든 Origin' 에서 사용할 수 있다는 말이 된다

⇒ 따라서, 이렇게 지정한 경우 모든 Client는 해당 리소스에 접근이 가능하다.

(5)

그런데 우리는 현재 Browser(Client)에서 작업하고 있지 않는가?

다시말해 CORS 정책 수정은 어렵다는 말이 된다.

따라서 live-server와 같은 Local server를 실행해 Same-Origin Policy를 통과하도록 하는 것.

이것이 바로 JavaScript Modules 사용 시 Local Server를 실행해주는 이유가 되겠다.

(0)

참고 가능한 문서들