여러 콘텐츠 페이지에서 동일한 JavaScript를 재사용하는 방법

웹 개발을 하다 보면 여러 페이지에서 같은 JavaScript 코드를 반복해서 사용해야 하는 경우가 자주 발생합니다. 이럴 때 코드를 매번 복사해서 붙여넣는 것은 비효율적이며, 유지보수도 어려워집니다.

외부 JavaScript 파일로 코드 분리하기

가장 효과적인 해결 방법은 공통으로 사용할 JavaScript 코드를 외부 파일(.js)로 분리하는 것입니다. 예를 들어 아래와 같은 내용을 담은 demo.js 파일을 생성합니다.

function display() {
    alert("Hello World!");
}

HTML 페이지에 외부 스크립트 연결하기

이제 <script> 태그의 src 속성을 사용하여 외부 JavaScript 파일을 HTML 페이지에 연결합니다. 아래는 버튼 클릭 시 display() 함수를 호출하는 간단한 예제입니다.

<html>
    <body>
        <form>
            <input type="button" value="Result" onclick="display()" />
        </form>
        <script src="demo.js">
        </script>
    </body>
</html>

이렇게 연결된 외부 파일은 다른 콘텐츠 페이지에서도 동일한 방식으로 얼마든지 재사용할 수 있습니다. 즉, 여러 페이지의 <body> 또는 <head> 안에 같은 <script src="demo.js"> 태그만 추가하면 됩니다.

외부 JavaScript 사용의 장점

코드 재사용성 향상: 하나의 파일을 여러 페이지에서 공유할 수 있습니다.
유지보수 용이: 코드 수정 시 외부 파일 한 곳만 변경하면 모든 페이지에 즉시 반영됩니다.
브라우저 캐싱: 외부 파일은 브라우저에 캐시되므로 페이지 로딩 속도가 개선됩니다.
가독성 향상: HTML과 JavaScript가 분리되어 코드 구조가 깔끔해집니다.

이처럼 외부 JavaScript 파일을 활용하면 중복 코드를 줄이고, 관리 효율성과 웹사이트 성능까지 함께 높일 수 있습니다.