JavaScript 모듈 사용

📌 자바스크립트에서 모듈이란?

모듈은 하나의 파일 안에 기능을 캡슐화하고, 필요한 부분만 외부로 내보내 다른 코드에서 재사용할 수 있게 해주는 코드 단위이다.

-> 즉, 하나의 js 파일에서 다른 js파일 함수/객체를 이용하는 방법!!

 

📌 1. <script> 태그 이용

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

스크립트 파일 전체를 로드해서 전역에 추가하는 방식.  -> 전역 변수 충돌 위험, 로드 순서가 중요한 단점이 있다!!

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

✔️ common.js 파일이 로드되며, 전역 스코프(window)에서 사용 가능.

 

📌 2. window 객체 활용

브라우저의 전역 객체인 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 모듈처럼 활용할 수 있다.

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

 

📌 3. ES6 모듈(export / import) 사용

✅ ES6 모듈이란?

• ES6(ECMAScript 2015)**에서 처음 도입된 자바스크립트 공식 모듈 시스템
• 이전에는 require, module.exports 같은 CommonJS나, <script>로 여러 JS 파일을 불러오는 식으로 모듈화를 했는데, ES6부터는 표준 문법으로 import / export를 지원

 

✅ ES6 모듈을 사용하려면?

<script type="module">을 사용!! JSP에서 표준 방식이다.

• 파일이 독립된 모듈 스코프로 실행됨 → 전역 오염 X.
• import / export 문법으로 모듈 간 의존성을 명시적으로 표현할 수 있음.
• 브라우저가 자동으로 의존성 트리를 파악해서 필요한 모듈을 불러옴 → 로드 순서를 신경 안 써도 됨.
• 기본적으로 지연 실행(defer) 됨 → HTML 파싱이 끝난 뒤 실행.

 

📖  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">을 사용하면 코드 색상이 사라지는 문제가 발생.