JavaScript - inline/external 차이

박민수·2024년 6월 6일

개요

자바스크립트 코드를 인라인 형식으로 작성하는 방식과 별도의 자바스크립트 파일을 불러오는 방식의 차이에 대해서 간략학 정리해 보고자 한다.

inline 방식

인라인 방식은 HTML 문서 내부에 직접 자바스크립트 코드를 작성하는 방식이다. script 태그 내부에 자바스크립트 코드를 작성하여 HTML 파일과 함께 로드된다.

예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline JavaScript Example</title>
</head>
<body>

<h1>Inline JavaScript Example</h1>

<!-- 인라인 방식 -->
<script>
    // 인라인 방식으로 자바스크립트 코드를 작성
    function test() {
        alert('Hello, World!');
    }
    greet();
</script>

</body>
</html>

external 방식

외부 파일 방식은 자바스크립트 코드를 별도의 외부 파일에 저장한 다음, HTML 문서에서 해당 파일을 불러오는 방식이다. HTML 파일 내에서 script 태그를 사용하여 외부 파일을 로드하게 된다. 이 경우 자바스크립트 코드가 HTML 파일과 분리되어 관리된다.

예시

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External JavaScript Example</title>
    <!-- 외부 파일을 불러오기 위한 스크립트 태그 -->
    <script src="script.js" defer></script>
</head>
<body>

<h1>External JavaScript Example</h1>가독성과 유지보수성:

<!-- 외부 파일에서 함수 호출 -->
<button onclick="test()">test</button>

</body>
</html>

// script.js
// 외부 자바스크립트 파일
function test() {
    alert('Hello, World!');
}

inline/external 방식의 차이

가독성과 유지보수성

인라인 코드: HTML 파일 내에 자바스크립트 코드를 직접 작성하는 방식이기 때문에 코드 양이 많아지면 HTML 파일이 길어져 가독성이 떨어질 수 있다. 또한, 자바스크립트 코드와 HTML 코드가 섞여 있어 유지보수가 어려울 수 있다.
외부 파일 불러오기: 자바스크립트 코드를 별도의 파일로 분리하고 필요한 곳에서 해당 파일을 불러오는 방식을 사용하면 HTML 파일이 간결해지고 가독성이 향상된다. 또한, 자바스크립트 코드를 단일 파일로 유지하므로 유지보수가 용이해진다.

재사용성

인라인 코드: 동일한 기능을 필요로 하는 여러 페이지에서 자바스크립트 코드를 사용해야 한다면, 각 페이지에 코드를 복사하여 붙여넣어야 한다. 이는 코드 중복으로 이어지고, 유지보수성과 재사용성을 저하시킨다.
외부 파일 불러오기: 동일한 자바스크립트 파일을 여러 페이지에서 불러오기만 하면 되기 때문에 코드를 한 곳에서 관리할 수 있다. 이는 코드의 재사용성을 향상시키고 중복을 방지한다.

로딩 및 성능

인라인 코드: HTML 파일에 포함된 자바스크립트 코드는 해당 페이지가 로드될 때 함께 로드되기 때문에 초기 로딩 시간이 늘어날 수 있다.
외부 파일 불러오기: 외부 자바스크립트 파일은 필요한 시점에만 로드되기 때문에 초기 로딩 시간을 단축시킬 수 있다. 또한, 브라우저 캐싱을 통해 성능을 개선할 수 있다.

이러한 이유로, 대규모 프로젝트나 유지보수성이 중요한 프로젝트에서는 외부 파일을 불러오는 방식을 사용하는 것이 일반적으로 권장된다.