JS를 불러오는 두 가지 방식 (전역범위, ES6 모듈 시스템)

시큐리티지호 2024. 10. 27.

요즈음 웹사이트 개발자 도구 또는 페이지 소스 보기를 통해 HTML를 탐구를 많이 하고 있다.

근데 문뜩 HTML에 불러오는 JS 형태에 대해 궁금해졌다.

문제가 발생했을 때 디버깅을 통해 또는 네트워크 탭을 통해 각 요청, 응답을 보는 과정에서 내가 정확하게 어떻게 보고 있는지가 궁금해졌던 것이다.

HTML에는 JavaScript 파일을 불러올 때 두 가지 방식이 있다.

1. 전통적인 방식 (전역 범위)

HTML에서 JavaScript 파일을 불어올 때, <script> 태그를 사용하여 다음과 같이 작성할 수 있다.

전통적인 방식의 예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>전통적인 JS 로드</title>
    <script src="script1.js"></script> <!-- script1.js 로드 -->
    <script src="script2.js"></script> <!-- script2.js 로드 -->
</head>
<body>
    <h1>전통적인 JS 로드 예시</h1>
    <button onclick="anotherFunction()">함수 호출</button> <!-- script2.js의 함수 호출 -->
</body>
</html>

이 경우, script1.js에 정의된 함수와 변수를 전역에서 사용할 수 있다. 예를 들어, script1.js에 sharedFunction()을 정의하고, script2.js에서 이를 호출할 수 있다.

script1.js

function sharedFunction() {
    console.log("공유된 함수 호출됨!");
}

script2.js

function anotherFunction() {
    sharedFunction(); // script1.js의 함수 호출
}

이렇게 import 과정 없이 사용할 수 있다.

하지만, 이 방식은 전역으로 진행되기 때문에 중복되는 함수 등으로 인해 충돌이 일어날 수도 있다.]

2. ES6 모듈 시스템

ES6 모듈 시스템을 사용할 경우, 각 모듈에서 export 와 import를 사용하여 명시적으로 함수를 내보내고 가져와야 한다.

ES6 모듈 사용 예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 모듈 로드</title>
    <script type="module" src="script2.js"></script> <!-- script2.js를 모듈로 로드 -->
</head>
<body>
    <h1>ES6 모듈 로드 예시</h1>
    <button onclick="anotherFunction()">함수 호출</button>
</body>
</html>

script1.js

// script1.js
export function sharedFunction() {
    console.log("공유된 함수 호출됨!");
}

script1.js

// script2.js
import { sharedFunction } from './script1.js'; // script1.js에서 함수 가져오기

export function anotherFunction() {
    sharedFunction(); // 가져온 함수 호출
}

요약하자면,

전통적인 방식 : <script> 태그로 JS파일을 불러오면 해당 파일에서 정의한 모든 함수와 변수를 전역에서 사용할 수 있다. 이 경우 export와 import 가 필요가 없다.
ES6 모듈 시스템 : 이 방식을 사용하면 파일 간의 의존성을 명시적으로 정의할 수 있으며, export와 import를 사용하여 함수와 변수를 공유해야 한다. 모듈은 기본적으로 전역 스코프와 독립적이므로, 변수 충돌을 방지하고 코드의 가독성을 높일 수 있다.

좀 더 구체적인 예시

ES6 모듈을 사용하여 HTML에서 데이터를 입력받고, 이를 POST 요청으로 전송하는 예제를 만들어 보았다.

1. api.js - POST 요청을 처리하는 모듈

이 파일에서는 POST 요청을 보내는 함수를 정의하고 내보낸다.

// api.js
export function sendPostRequest(data) {
    fetch('https://example.com/api/endpoint', { // 실제 API 엔드포인트로 변경
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
    .then(response => response.json())
    .then(data => {
        console.log('성공:', data);
    })
    .catch((error) => {
        console.error('실패:', error);
    });
}

2. formHandler.js - 폼 데이터를 처리하는 모듈

이 파일에서는 사용자의 입력을 받고 POST 요청을 보내는 함수를 정의한다.

// formHandler.js
import { sendPostRequest } from './api.js'; // api.js에서 함수 가져오기

export function handleSubmit() {
    const name = document.getElementById('name').value; // 이름 입력값
    const age = document.getElementById('age').value; // 나이 입력값

    const postData = {
        name: name,
        age: age
    };

    sendPostRequest(postData); // POST 요청 보내기
}

3. index.html - HTML 파일

이 HTML 파일에서는 사용자로부터 데이터를 입력받고, 버튼 클릭 시 POST 요청을 보내는 기능을 포함한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST 요청 예시</title>
    <script type="module" src="formHandler.js"></script> <!-- formHandler.js 모듈 로드 -->
</head>
<body>
    <h1>데이터 입력</h1>
    
    <label for="name">이름:</label>
    <input type="text" id="name" placeholder="이름을 입력하세요"><br><br>
    
    <label for="age">나이:</label>
    <input type="number" id="age" placeholder="나이를 입력하세요"><br><br>
    
    <button onclick="handleSubmit()">전송</button> <!-- 버튼 클릭 시 handleSubmit 함수 호출 -->
</body>
</html>

모듈화의 이점

코드의 재사용성 : 한 번 작성한 함수를 다른 모듈에서도 재사용할 수 있다.
네임스페이스 관리 : 각 모듈은 독립적으로 동작하므로, 전역 변수의 충돌을 방지할 수 있다.
유지 보수 용이성 : 각 모듈의 기능이 분리되어 있기 때문에, 수정이나 업데이트가 용이합니다.

'개발 지식, 스크립트 > HTML + CSS' 카테고리의 다른 글

<a href="https://exam.com">Example</ a> (3)	2024.09.21
display 속성 inline 과 block (0)	2024.04.28
hidden md:flex md:block (0)	2024.04.28
JSX 작성 규칙 (0)	2023.12.17
SSAS CSS 네이스팅 (0)	2023.12.15

JS를 불러오는 두 가지 방식 (전역범위, ES6 모듈 시스템)

HTML에는 JavaScript 파일을 불러올 때 두 가지 방식이 있다.

모듈화의 이점

'개발 지식, 스크립트 > HTML + CSS' 카테고리의 다른 글

댓글

티스토리툴바

JS를 불러오는 두 가지 방식 (전역범위, ES6 모듈 시스템)

HTML에는 JavaScript 파일을 불러올 때 두 가지 방식이 있다.

모듈화의 이점

'개발 지식, 스크립트 > HTML + CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바