JSP에서 JavaScript 모듈 사용하기

📌 JSP에서 JavaScript 모듈 사용하기

JSP에서 JavaScript 모듈을 사용하려면 몇 가지 주의해야 할 점이 있다. 특히, <script type="module">을 사용할 때 이클립스에서 코드 색상이 사라지는 문제가 있었다. 

이 문제를 해결하면서 모듈을 사용하는 방법을 알아보겠습니다.

---

📌 1. 일반적인 JS 파일 로드 방법

기본적으로 JSP에서 JavaScript 파일을 가져오려면 <script src="..."></script>를 사용하면 된다.

<script src="/resources/js/common.js"></script>

common.js 파일이 로드되며, 전역 스코프에서 사용 가능. 하지만 ES6 모듈을 사용하면 이렇게 로드할 수 없다.

 

📌 2. ES6 모듈(export / import) 사용 방법

ES6 모듈을 사용하려면 <script type="module">을 사용!! JSP에서 표준 방식이다.

 

📖  math.js (모듈 파일, export 사용)

export function add(a, b) {
    return a + b;
}

 

📖 index.jsp (모듈 가져오기, import 사용)

<script type="module">
    import { add } from "./resources/js/math.js";  
    console.log("3 + 5 =", add(3, 5));
</script>

✔️ 모듈을 사용하면 import 키워드를 통해 특정 함수만 가져올 수 있다. 

❌ 이클립스에서는 <script type="module">을 사용하면 코드 색상이 사라지는 문제가 발생.

 

📌 3. JSP에서 모듈을 쉽게 사용하려면? (window 객체 활용)

type="module"을 사용하지 않고도 JSP에서 모듈처럼 사용하려면, 전역 객체(window)에 등록하는 방법을 사용한다.

 

📖  math.js (모듈 파일을 전역 변수로 등록)

function add(a, b) {
    return a + b;
}

// 전역 객체에 등록
window.MathUtils = { add };

 

📖  index.jsp (모듈처럼 사용)

<script src="/resources/js/math.js"></script>

<script>
    console.log("3 + 5 =", MathUtils.add(3, 5));
</script>

✔️ JSP에서 <script type="module"> 없이도 ES6 모듈처럼 활용할 수 있다.

✔️ 이클립스에서도 코드 색상이 정상적으로 표시됐다.