바닐라 JS의 모듈화와 그에 따른 오류/해결

지금 코딩알려주는누나 JS 스터디 팀 프로젝트를 진행중인데 사용가능한 언어가 HTML/CSS, JavaScript다.

제약사항이 많다보니 그에 따른 문제가 많은데 오늘 겪게 된건 모듈화다.

Node 강의를 듣는데 리팩토링과 실제 코드짜는 형식들에 대해서 배우고 나니 지금 우리 프로젝트도 파일하나에 짜고 있어서
함수들을 모듈화 처리해야겠다 생각하고 일을 진행했는데 여러 문제가 생겼다.

우선 모듈화한 js를 인식하기 위해서는 HTML이 script부분에 type="module"을 적어줘야한다.

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

 

그리고 export하고 싶은 함수 앞에 export를 적고
import 하고 싶은 파일에서 import 하면된다.

// getData.js
export const getData = async (url) => {

// main.js
import { getData } from "./modules/getData.js";

 

모듈화 잘 불러와지고 잘 사용되는데 뭐가 문제냐...

html에 넣은 main.js의 함수를 못 읽는다. 무슨말인고 하니

// index.html
<button class="btn btn-outline-success" type="submit" onclick="search()">Search</button>

onclick에 설정해둔 search()를 찾지 못한다..

 

그럼 어떻게 해결하느냐?

// main.js
const search = async (q) => {

이거를 

// main.js
window.search = async (q) => {

이렇게 전역객체인 윈도우에 추가하는 것이다.

그럼 이제 module처리된 js에 있는 함수들도 html에서 잘 작동한다.

 

다른 방법들이 있긴한데 프로젝트 상황에 따라 손이 진짜 많이 가는 경우도 있고 하니
일단 이방법을 쓰고, 최선의 방법은 바닐라js를 벗어나는거다.

 

모듈화 연습해본다고 했다가 이것저것 안되서 진짜 고생했다..