[Javascript] import 시 오류 해결 방법

html로 작업시 반복적인 코드는 피하기가 쉽지않다. 

예를 들어 header, footer, top 버튼 경우에는 각 페이지별로 다 들어가는데 매번 연결해주는 것도 번거롭다. 

우회하는 방법으로 스크립트에서 ajax 방식으로 연결하는 방법이 있는데, 이 연결한 코드를 따로 layout.js 라는 파일로 가져가고 싶었다. 

그래서 기존 common.js에서 덜어내어 layout.js 파일로 별도로 만들고 import 시키려 했으나, 

Uncaught SyntaxError: Cannot use import statement outside a module (at common.js:1:1)

 

이런 오류를 만났다. 

모듈 밖에서는 import를 사용할 수 없다는 메세지 같은데, 그럼 layout를 연결시킨 common.js를 html에서 연결할 때, type="module" 을 추가하면 가능하지 않을까?

 

우선, 밖으로 빼낸 코드는 아래와 같다. 

import를 시켜주기 위해선 export를 시켜주어야 연결이 가능하다. 

import 대상의 코드는 하나의 객체 또는 함수로 묶어주어야 호출시킬 때 편리하다.

 

layout.js

const layout = {
  setting: () => {
  // AJAX로 header, footer, top button 연결하기
  function loadHTML(url, target) {
    $.ajax({
      url: url,
      success: function (data) {
        $(target).html(data);
      },
    });
  }
  loadHTML("./header.html", "#header");
  loadHTML("./footer.html", "#footer");
  loadHTML("./top_btn.html", "#topBtn");
  }
}

export { layout };

 

common.js

import { layout } from './layout.js';

$(function(){
  // layout setting
  layout.setting();
});

 

html

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