JavaScript의 Module

Q 어떤 문제가 있었는지

미니 프로젝트에서 방명록 페이지를 담당하게 되면서 Cloud Firestore에 데이터를 CRUD를하는 작업을 하게 되었다.

Cloud Firestore에 접근하는 js파일(모듈로 만듦) 따로, 화면에서 동작하는 기능을 담은 js파일(일반 js파일로 만듦) 따로 작성해서 테스트를 하는데 데이터를 입력하는 것은 문제가 없었지만 데이터를 가져올 때 다음과 같은 에러가 발생했다.

• Uncaught SyntaxError: Cannot use import statement outside a module
• Uncaught ReferenceError: require is not defined

첫 번째는 import 구문으로 모듈js에 있는 파일을 가져올 때 발생했고 두 번째 에러는 import 대신 require를 사용했을 때 발생한 에러이다.

Q 내가 시도해본 것들

• export, import를 사용해서 모듈js의 함수 가져오기 시도(위와 같은 문제 발생)
• require를 사용해서 모듈js의 함수 가져오기 시도(위와 같은 문제 발생)
• 같은 html 파일 안에 있으므로 전역으로 가능하지 않을까 싶어서 접근 시도 했으나 접근 불가

Q 어떻게 해결했는지

해결방법은 간단했지만 이 방법을 알기 위해 많은 시간을 썼다.

<script> 태그에 type=module만 추가하면 되는 것이었다.

module은 일반 js파일에서 import나 require로 사용할 수 없고 module을 사용하려는 파일 또한 module로 지정해야 했다.

 

Q 무엇을 새롭게 알았는지

• module은 일반js에서 사용할 수 없고 module을 사용하기 위해서는 사용하는 파일도 module로 만들어야 한다.
• module 내부의 변수, 함수는 다른 script에서 접근할 수 없다. (export, import를 통해 가능 - 브라우저에서도 동일)
• module script는 항상 지연 실행된다. (defer 속성을 붙인 것과 동일 - 브라우저 특정 기능)
• module은 local file에서 동작하지 않고, HTTP 또는 HTTPS protocol을 통해서만 동작한다.
• 브라우저 환경에서 import는 경로가 없는 모듈은 허용되지 않는다. (ex: 'sample.js' = X, './sample.js' = O)

 

참고 링크 : https://ko.javascript.info/modules-intro