Notice
Recent Posts
Recent Comments
Link
04-28 13:49
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

<<개발일지>>

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

HTML + CSS

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

개발하는지호 2024. 10. 27. 20:11

요즈음 웹사이트 개발자 도구 또는 페이지 소스 보기를 통해 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
'HTML + CSS' Related Articles more