JavaScript 파일 분리하기: 외부 스크립트 파일 사용법
    8

    JavaScript 파일 분리하기: 외부 스크립트 파일 사용법

    Web ProgrammingCoding BasicsFront-End Development

    JavaScript 파일 분리하기: 외부 스크립트 파일 사용법


    왜 JavaScript 코드를 분리해야 할까요?


    JavaScript 코드를 계속 작성하다 보면, HTML 파일 안에 코드가 점점 많아집니다.

    CSS 코드를 <style> 태그 안에 작성했던 것을 기억하시나요? 마찬가지로 JavaScript 코드도 HTML 파일에 너무 많이 넣지 않는 것이 좋습니다.


    코드를 분리해야 하는 이유

    1. HTML 파일은 HTML에 집중해야 합니다
    2. 실제 프로젝트에서는 HTML 콘텐츠가 매우 많습니다
    3. 여기에 JavaScript 코드까지 섞이면 파일 관리가 어려워집니다
    4. 코드 관리가 효율적입니다
    5. 각 파일이 명확한 역할을 가지게 됩니다
    6. 코드를 찾고 수정하기가 쉬워집니다
    7. 파일이 깔끔하게 유지됩니다
    8. HTML, CSS, JavaScript가 각각 분리되어 있으면 가독성이 높아집니다


    JavaScript 파일 만들기


    1. 새 파일 생성하기

    프로젝트 폴더에 새 파일을 만듭니다. 파일 이름은 자유롭게 정할 수 있습니다:

    app.js ✅ 추천
    script.js ✅ 가능
    site.js ✅ 가능
    myCode.js ✅ 가능


    중요: 파일 확장자는 반드시 .js를 사용해야 합니다!

    1. .js는 JavaScript를 의미합니다
    2. 파일 이름 앞부분은 원하는 대로 정할 수 있지만, 확장자는 고정입니다


    2. 코드 옮기기

    HTML 파일에서 JavaScript 코드를 잘라내서 새로 만든 .js 파일로 옮깁니다.

    HTML 파일 (이전):

    <script>
    let greetingText = "Hi, I'm Max!";
    alert(greetingText);
    alert(32);
    </script>


    작업 순서:

    1. <script> 태그 사이의 코드만 선택합니다 (태그는 포함하지 않습니다)
    2. 코드를 잘라냅니다 (Ctrl+X 또는 Cmd+X)
    3. app.js 파일에 붙여넣습니다 (Ctrl+V 또는 Cmd+V)


    app.js 파일:

    let greetingText = "Hi, I'm Max!";
    alert(greetingText);
    alert(32);


    3. 불필요한 공백 정리하기

    CSS 코드를 옮길 때와 마찬가지로, JavaScript 파일에서는 불필요한 들여쓰기를 제거합니다.


    이유:

    1. HTML에서는 중첩 구조를 보여주기 위해 들여쓰기를 사용했습니다
    2. JavaScript는 보통 한 줄씩 순차적으로 작성되므로 과도한 공백이 필요 없습니다
    3. 코드를 더 읽기 쉽게 만듭니다


    팁: 대부분의 코드 에디터에서 자동 정리 기능을 사용할 수 있습니다

    1. VS Code: Shift + Alt + F (Windows) 또는 Shift + Option + F (Mac)


    HTML 파일에서 JavaScript 파일 연결하기

    이제 HTML 파일에서 외부 JavaScript 파일을 불러와야 합니다.


    ❌ 잘못된 방법: <link> 태그 사용

    CSS 파일을 연결할 때는 <link> 태그를 사용했지만, JavaScript는 다릅니다:

    <!-- 이렇게 하면 작동하지 않습니다! -->
    <link rel="script" href="app.js">


    ✅ 올바른 방법: <script> 태그의 src 속성 사용

    <script src="app.js"></script>

    구조 설명:

    1. <script>: 여전히 script 태그를 사용합니다
    2. src="app.js": source 속성으로 파일 경로를 지정합니다
    3. </script>: 닫는 태그가 반드시 필요합니다


    src 속성에 사용할 수 있는 경로


    1. 로컬 파일 경로 (같은 프로젝트 폴더 내):
    <script src="app.js"></script>
    <script src="scripts/main.js"></script>
    1. 외부 URL (다른 서버의 JavaScript 파일):
    <script src="https://example.com/script.js"></script>



    중요한 규칙들


    1. 닫는 태그는 필수입니다

    <!-- ❌ 잘못된 방법 -->
    <script src="app.js" />

    <!-- ✅ 올바른 방법 -->
    <script src="app.js"></script>

    <img> 태그처럼 자체 닫기 태그를 사용할 수 없습니다. 반드시 여는 태그와 닫는 태그가 모두 있어야 합니다.


    2. src 속성 사용 시 태그 사이에 코드를 넣지 마세요

    <!-- ❌ 잘못된 방법 -->
    <script src="app.js">
    alert("이 코드는 실행되지 않습니다!");
    </script>

    <!-- ✅ 올바른 방법 1: 외부 파일만 연결 -->
    <script src="app.js"></script>

    <!-- ✅ 올바른 방법 2: 태그 안에 직접 코드 작성 (src 없이) -->
    <script>
    alert("이 코드는 실행됩니다!");
    </script>

    규칙: src 속성을 사용하면 태그 사이에 코드를 작성할 수 없습니다. 둘 중 하나만 선택해야 합니다.



    전체 예시


    프로젝트 구조

    my-project/
    ├── index.html
    └── app.js


    index.html

    <!DOCTYPE html>
    <html>
    <head>
    <title>JavaScript 연습</title>
    </head>
    <body>
    <h1>JavaScript 배우기</h1>
    <!-- JavaScript 파일 연결 -->
    <script src="app.js"></script>
    </body>
    </html>


    app.js

    let greetingText = "Hi, I'm Max!";
    alert(greetingText);
    greetingText = "This works!";
    alert(greetingText);
    alert(32);


    결과


    파일을 저장하고 브라우저에서 HTML 파일을 열면, 이전과 동일하게 alert 창들이 순서대로 나타납니다. 하지만 이제는 외부 JavaScript 파일을 통해 코드가 실행됩니다!



    HTML의 역사와 일관성 문제


    HTML은 하루아침에 만들어진 언어가 아닙니다. 수십 년에 걸쳐 진화하고 발전해 왔습니다.


    그래서 외부 리소스를 연결하는 방식이 통일되어 있지 않습니다:

    1. CSS 연결: <link rel="stylesheet" href="style.css">
    2. JavaScript 연결: <script src="app.js"></script>
    3. 이미지 삽입: <img src="image.jpg">

    각각 다른 방식을 사용하지만, 이것이 HTML의 특징입니다. 각 방법을 정확히 기억하는 것이 중요합니다.


    핵심 정리:

    1. JavaScript 코드는 별도의 .js 파일로 분리하는 것이 좋습니다
    2. 파일 확장자는 반드시 .js를 사용합니다
    3. HTML에서 <script src="파일경로"></script>로 연결합니다
    4. src 속성 사용 시 태그 사이에 코드를 넣지 않습니다
    5. 닫는 </script> 태그는 반드시 필요합니다
    6. 코드를 분리하면 관리와 유지보수가 훨씬 쉬워집니다