export와 import : 로컬 vs. 서버

모듈을 내보내고 가져오는 데에는 크게 두 가지 방식이 있다. 

 

1. 유명 내보내기 (named export)

 : 여러 값을 내보낼 때 유용하다. 가져갈 때는 변수나 함수의 내보낸 이름과 동일한 이름을 사용해야 한다. 

  constructor를 내보내면 메소드까지 다 같이 사용 가능하다. 

 

export { func, foo } // func 와  foo (함수 또는 변수) 내보내기
import { func, foo } from "경로"

 

2. 기본 내보내기 (default export) 

 : 어떤 이름으로도 가져올 수 있다. 아래 예시에서 동일한 변수명 agoraStatesDiscussions이 아닌 다른 변수명을 지정해도 상관없다. 다만 가져오는 파일 안에서 식별자 충돌이 없어야 한다. 

 default 내보내기는 중괄호 없이 모듈을 내보내고 가져올 수 있지만, 단 하나의 모듈만 내보낼 수 있다. 

 

export default agoraStatesDiscussions
import agoraStatesDiscussions from "./data.js"

 

---

여기까지 정리하고 나니 MyAgoraStates 스프린트 과제에서 더미 데이터를 export, import 로 가져오려고 하다가 실패했던 기억이 떠올라 다시 파일을 꺼내봤다. 파일 구조는 대략 아래와 같다. 

|--- /FE-SPRINT-MY-AGORA-STATES
|     |--- /assets                # logo, icon 등 이미지 파일이 들어있는 폴더
|     |--- index.html           
|     |--- data.js                 # 더미 데이터인 agoraStatesDiscussions 배열이 들어있는 파일     
|     |--- script.js               # index.html 을 조작하는 스크립트 파일                  

 

현재는 index.html 파일에 아래와 같이 두 개의 스크립트 파일이 연결되어 있다. 이렇게 두 개 이상의 스크립트를 html에 바로 연결해 줄 때는 파일의 순서가 중요하다. 위에서부터 아래로 읽어내려가기 때문에 data.js 파일을 먼저 연결하면 그 아래의 script.js 파일에서 data.js 파일의 변수를 받아와서 쓸 수가 있다. 

   <script src="data.js"></script>
   <script src="script.js"></script>

 

과제를 하던 당시 이렇게 html 파일에서 스크립트 파일을 두 개를 연결하는게 아니라 export, import 지시자로 연결해서 더미데이터를 받아온 다음에 html 파일에는 script.js 하나만 연결하고 싶었던 거였는데 그렇게 시도하니 다음의 Syntax 에러가 떴다. 

 

Uncaught SyntaxError: Cannot use import statement outside a module

 

검색을 해보니 다음과 같은 포스팅을 발견하였다. 간략한 요지는 다음과 같다. 

 

1) <script> 태그에 type="module" 속성 추가

2) 루트 디렉토리에 있는 package.json 파일에  "type": "module" 추가

Cannot use import statement outside a module Error 해결하기

 

마이 아고라 스테이츠 스프린트는 로컬 환경에서 작동하는 과제였기에 package.json 파일이 없다. 그래서 1번의 방법대로 script 태그에 type 속성을 추가했더니 다음과 같은 다른 에러가 떴다.

 

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

Access to script at 'file:///Users/경로/fe-sprint-my-agora-states/script.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

 

모듈은 기본적으로 로컬 환경에서 동작하지 않고, HTTP 또는 HTTPS 프로토콜을 통해서만 동작한다. 

따라서 vs code 익스텐션에서 Live Server를 깔고 라이브 서버로 html 파일을 열면 모듈 내보내기와 가져오기가 동작한다. 

 

CORS policy 관련해서 아래 참고자료의 포스팅을 찾았는데 아직 정확하게 모든 내용을 이해하지는 못하겠다.

기본적으로 어떤 출처(origin)에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 브라우저의 보안 방식 때문이라고 한다. 브라우저가 웹에서 로컬 파일에 접근하지 못하도록 origin이 null로 넘어온 스크립트에 대한 접근을 CORS 정책에 따라 제한하는 것이다. 

 

그래서 로컬 파일에서 index.html 을 실행한 후 개발자 도구의 네트워크 탭과 라이브 서버에서 html 파일을 실행한 후 네트워크 탭을 비교해 보았다. 

 

로컬 파일에서 index.html 실행

 

라이브 서버에서 index.html 실행

 

 

보시다시피 Request Headers 에서 Origin이 null 에서 http://127.0.0.1:5500 으로 달라졌다. 

어제 그제 이틀 동안 HTTP 프로토콜과 HTTP 메시지의 요청, 응답 등을 배웠는데 아직 100% 무슨 말인지는 다 모르겠지만...🧐 결국 에러 메시지 자체에 답이 있었고, 이 origin null 을 서버에 띄워서 null 이 아닌 다른 출처 값을 가지게 되면 CORS policy 에러가 해결되는 것 같다. 

 

 

📚 참고자료: 

모듈 소개

로컬에서 CORS policy 관련 에러가 발생하는 이유

모듈 내보내고 가져오기