문제가 발생한 배경

공통적으로 사용하는 로직을 반복하지 않고 모듈로 분리하는 과정에서 에러가 발생하였다.

---

에러 #1

• 🚨 SyntaxError: Cannot use import statement outside a module

모듈은 특수한 키워드나 기능과 함께 사용되므로 <script type="module">같은 속성을 설정해 해당 스크립트가 모듈이라는 걸 브라우저 알 수 있게 해줘야 한다.

<-- 기존 코드 -->
<script src="./js/signin.js"></script>
<-- 수정한 후 코드 -->
<script type="module" src="./js/signin.js"></script>

주의사항🔥 모듈은 로컬 파일에서 동작하지 않고, HTTP 또는 HTTPS 프로토콜을 통해서만 동작한다.
로컬에서 file:// 프로토콜을 사용해 웹 페이지를 열면 import, export 지시자는 동작하지 않는다.

모듈과 일반 스크립트의 차이점

1. 모듈은 엄격 모드(use strict)로 실행된다. 선언되지 않는 변수에 값을 할당하는 등의 코드는 에러를 발생시킨다.

2. 모듈은 자신만의 스코프가 있다. 따라서 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없다.
외부에 공개하려는 모듈은 export 해야하고, 모듈을 가져와 사용하려면 import 해줘야 한다.

---

에러 #2

• 🚨 에러 코드: net::ERR_ABORTED 404 (Not Found)

파일을 불러와야 하는데, 해당 파일을 찾을 수 없다는 오류이다. 경로에 문제가 있으므로 확인을 해봐야 한다.

코드를 짜면서 import { userInfo } 만 적어도 뒤에 경로가 자동 완성되길래 편하다고 생각했는데 자동 완성된 코드에 파일 확장자 .js가 빠져있어서 파일을 찾을 수 없다는 에러가 발생했다.

// 기존 코드
import { userInfo } from "./userInfo";
// 수정 한 후 코드
import { userInfo } from "./userInfo.js";