내부 및 외부 Java스크립트: 예제를 통해 배우기

⚡ 스마트 요약

내부적 인 그리고 외부적인 Java이 문서에서는 웹 프로젝트 내 스크립트 코드의 두 가지 배치 방식을 설명합니다. 두 방식을 비교하고, 작동 예제를 제시하며, async 및 defer와의 올바른 연결 방법을 설명하고, 각 배치 방식이 유지 관리성과 성능 면에서 어떤 경우에 더 나은 결과를 제공하는지 명시합니다.

📄 내부 배치: Code HTML 문서 내의 스크립트 태그 사이에 위치하며, 해당 태그를 소유한 페이지와 함께 로드됩니다.
🗂️ 외부 배치: Code 해당 코드는 src 속성을 통해 참조되는 별도의 .js 파일에 존재하므로 여러 페이지가 하나의 소스 코드를 공유합니다.
🔗 연결 규칙: 외부 스크립트 태그는 항상 닫아야 하며, 전체 경로가 제공되지 않는 한 src 경로는 HTML 문서의 상대 경로로 해석됩니다.
⚙️ 로딩 제어: `defer` 속성은 HTML 파싱이 완료된 후 파일을 실행하는 반면, `async` 속성은 다운로드가 완료되는 즉시 파일을 실행합니다.
🚀 캐싱 이점: 외부 파일은 브라우저에 한 번 캐시되어 해당 파일을 참조하는 모든 페이지에서 재사용됩니다.
🧭 선정 기준: 페이지별로 필요한 간단한 로직은 내부에 유지하고, 공유되거나 복잡한 로직은 디버깅을 쉽게 하기 위해 외부 파일로 옮기세요.
🚫 인라인 핸들러: onclick과 같은 속성 기반 핸들러는 마크업과 동작을 혼합하므로 addEventListener로 대체해야 합니다.

내부와 외부란 무엇인가 Java스크립트?

당신이 사용할 수 Java스크립트 코드는 두 가지 방법으로 작성됩니다.

다음 중 하나를 포함할 수 있습니다. Java스크립트 코드 내부적으로 HTML 문서 내에서 자체.
당신은 유지할 수 있습니다 Java스크립트 코드 별도의 외부 파일 그런 다음 HTML 문서에서 해당 파일을 가리킵니다.

두 위치 모두 정확히 동일한 언어를 실행하고 브라우저에서 동일한 결과를 생성합니다. 차이점은 소스 코드가 저장되는 위치, 브라우저가 이를 다운로드하는 방식, 그리고 웹사이트 전체에서 코드를 얼마나 쉽게 재사용하고 유지 관리할 수 있는지에 있습니다.

내부 란 무엇입니까? Java스크립트?

내부의 Java스크립트는 HTML 파일 내의 `<script>` 태그 쌍 안에 직접 작성된 코드입니다. 브라우저는 마크업을 위에서 아래로 읽다가 `<script>` 태그에 도달하면 추가적인 네트워크 요청 없이 해당 코드 내용을 즉시 실행합니다.

우리는 지금까지 Internal JS를 사용해왔습니다. 다음은 샘플입니다.

<html>
<head>
  <title>My First JavaScript code!!!</title>
  <script type="text/javascript">
    // Create a Date Object
    var day = new Date();
    // Use getDay function to obtain todays Day.
    // getDay() method returns the day of the week as a number like 0 for Sunday, 1 for Monday,….., 5
    // This value is stored in today variable
    var today = day.getDay();
    // To get the name of the day as Sunday, Monday or Saturday, we have created an array named weekday and stored the values
    var weekday = new Array(7);
    weekday[0]="Sunday";
    weekday[1]="Monday";
    weekday[2]="Tuesday";
    weekday[3]="Wednesday";
    weekday[4]="Thursday";
    weekday[5]="Friday";
    weekday[6]="Saturday";
    // weekday[today] will return the day of the week as we want
    document.write("Today is " + weekday[today] + ".");
  </script>
</head>
<body>
</body>
</html>

출력:

Today is Wednesday.

getDay 함수는 일요일의 경우 0부터 토요일의 경우 6까지의 숫자를 반환하고, 이 숫자가 요일 배열의 인덱스로 사용되기 때문에 출력되는 요일은 방문자의 시스템 시계에 따라 변경됩니다.

외부 란 무엇입니까? Java스크립트?

모든 웹 페이지에 현재 날짜와 시간을 표시하려고 합니다. 코드를 작성하여 모든 웹 페이지(예: 100개)에 복사했다고 가정해 보겠습니다. 그런데 나중에 날짜나 시간 표시 형식을 변경하고 싶어졌습니다. 이 경우 100개의 웹 페이지 모두를 수정해야 합니다. 이는 매우 시간이 많이 걸리고 어려운 작업이 될 것입니다.

따라서 저장 JavaScript 확장자가 .js인 새 파일의 코드입니다. 그런 다음 모든 웹 페이지에 다음과 같이 .js 파일을 가리키도록 코드 줄을 추가합니다.

<script type="text/javascript" src="currentdetails.js"></script>

주의 사항`.js` 파일과 모든 웹 페이지가 같은 폴더에 있다고 가정합니다. 외부 `.js` 파일이 다른 폴더에 있는 경우 `src` 속성에 파일의 전체 경로를 지정해야 합니다. 닫는 태그는 다음과 같습니다. </script> 요소에 내용이 없더라도 `<script>` 태그는 필수입니다. 자체 닫힘 스크립트 태그는 유효한 HTML이 아니며, 닫히지 않은 요소로 인해 페이지의 나머지 부분이 가려지기 때문입니다.

이 코드를 currentdetails.js 파일 안에 넣으세요:

var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var monthName;

var hours = currentDate.getHours();
var mins = currentDate.getMinutes();
var secs = currentDate.getSeconds();
var strToAppend;
if (hours >12 )
{
	hours1 = "0" + (hours - 12);
strToAppend = "PM";
}
else if (hours <12)
{
	hours1 = "0" + hours;
	strToAppend = "AM";
}
else
{
	hours1 = hours;
	strToAppend = "PM";
}

if(mins<10)
mins = "0" + mins;
if (secs<10)
	secs = "0" + secs;

switch (month)
{
	case 1:
		monthName = "January";
		break;
	case 2:
		monthName = "February";
		break;
	case 3:
		monthName = "March";
		break;
	case 4:
		monthName = "April";
		break;
	case 5:
		monthName = "May";
		break;
	case 6:
		monthName = "June";
		break;
	case 7:
		monthName = "July";
		break;
	case 8:
		monthName = "August";
		break;
	case 9:
		monthName = "September";
		break;
	case 10:
		monthName = "October";
		break;
	case 11:
		monthName = "November";
		break;
	case 12:
		monthName = "December";
		break;
}

var year = currentDate.getFullYear();
var myString;
myString = "Today is " + day +  " - " + monthName + " - " + year + ".<br />Current time is " + hours1 + ":" + mins + ":" + secs + " " + strToAppend + ".";
document.write(myString);

이 파일은 currentdetails.js 파일입니다. 코드가 길다고 걱정하지 마세요. 곧 코딩을 배우게 될 겁니다. HTML 문서를 다음과 같이 수정해 보세요.

<html>
	<head>
	   <title>My External JavaScript Code!!!</title>
	   <script type="text/javascript" src="currentdetails.js">
	   </script>
	</head>
	<body>
	</body>
</html>

⚠️ 경고: 위의 기존 스크립트는 매 시간 앞에 0을 붙여서 오전 11시를 011로 표시합니다. 또한 다음과 같이 할당합니다. hours1 명시적으로 선언하지 않으면 암묵적인 전역 변수가 생성되어 엄격 모드에서 오류가 발생합니다. 아래의 수정된 버전은 이러한 두 가지 결함을 모두 해결합니다.

동일한 파일을 현대적으로 다시 작성하면 코드가 더 간결해지고, 모든 변수를 선언하며, 값에 적절한 패딩이 적용됩니다.

// currentdetails.js - corrected modern version
const now = new Date();

const months = ["January", "February", "March", "April", "May", "June",
                "July", "August", "September", "October", "November", "December"];

const hours24 = now.getHours();
const suffix  = hours24 >= 12 ? "PM" : "AM";
const hours12 = String(hours24 % 12 || 12).padStart(2, "0");
const mins    = String(now.getMinutes()).padStart(2, "0");
const secs    = String(now.getSeconds()).padStart(2, "0");

const message = "Today is " + now.getDate() + " - " + months[now.getMonth()] +
                " - " + now.getFullYear() + ". Current time is " +
                hours12 + ":" + mins + ":" + secs + " " + suffix + ".";

document.getElementById("stamp").textContent = message;

샘플 출력:

Today is 29 - July - 2026. Current time is 09:05:07 AM.

외부 링크 연결 방법 Java스크립트 파일이 올바르게 작성되었습니다.

외부 파일이 로드될지 여부는 세 가지 요소에 의해 결정됩니다. src 속성에 작성된 경로, 문서 내 스크립트 태그의 위치, 그리고 스크립트 태그에 적용된 loading 속성입니다.

경로 앞에 슬래시(/)가 있거나 전체 주소가 제공되지 않는 한, 경로는 HTML 문서를 기준으로 해석됩니다.

src 값	의미	해결하다
현재 세부 정보.js	HTML 페이지와 같은 폴더에 있습니다.	/pages/currentdetails.js
js/currentdetails.js	현재 폴더의 하위 폴더	/pages/js/currentdetails.js
../currentdetails.js	현재 폴더 바로 위 폴더	/currentdetails.js
/assets/js/currentdetails.js	사이트 루트에서부터의 절대 경로	/assets/js/currentdetails.js

`loading` 속성은 브라우저가 HTML 파싱을 중지하고 파일을 실행하는 시점을 제어합니다. 아래 표는 사용 가능한 세 가지 동작을 요약한 것입니다.

속성	다운로드	실행 순간	순서 유지
없음	HTML 구문 분석을 차단합니다.	다운로드 직후	가능
연기하다	구문 분석과 병렬 처리	문서가 구문 분석된 후	가능
비동기	구문 분석과 병렬 처리	다운로드가 완료되는 즉시	아니

<!-- Recommended for scripts that read the DOM -->
<script src="js/currentdetails.js" defer></script>

<!-- Recommended for independent third party scripts -->
<script src="js/analytics.js" async></script>

<!-- Modern module syntax, deferred by default -->
<script type="module" src="js/app.js"></script>

💡 팁: The type="text/javascript" `<property>` 속성은 HTML5에서 선택 사항이며 생략할 수 있습니다. 아주 오래된 브라우저를 지원하는 경우에만 유지하고, 그렇지 않으면 다른 속성으로 대체하십시오. type="module" 가져오기 및 내보내기 문을 사용할 때.

내부 vs 외부 Java스크립트: 주요 차이점

아래 비교표는 일반적으로 선택을 결정하는 요소들을 기준으로 두 배치 방식을 나란히 보여줍니다.

요인	내부의 Java스크립트	외부 Java스크립트
보관 장소	HTML 파일 내부	.js 확장자를 가진 별도의 파일을 만드세요.
페이지 간 재사용	모든 페이지에 복사해야 합니다.	모든 페이지에서 참조되는 파일 하나
브라우저 캐싱	페이지가 넘어갈 때마다 다시 다운로드됩니다.	한 번 캐시되고 재사용됩니다.
유지 보수 노력	코드가 공유될 때 높음	낮음, 편집할 파일 하나
추가 HTTP 요청	아니	네, 파일당 하나씩입니다.
디버깅	긴 HTML 파일에서는 더 어렵습니다.	파일 이름과 줄 번호가 명확하면 더 쉽습니다.
적합한	페이지별 간략한 로직	공유 라이브러리와 긴 스크립트

내부 및 외부 사용 시기 Java스크립트 Code?

특정 웹페이지와 관련된 코드가 몇 줄밖에 없다면 다음을 유지하는 것이 좋습니다. JavaHTML 문서 내부에 스크립트 코드를 넣습니다.

반면에 Java스크립트 코드는 많은 웹 페이지에서 사용되므로, 이를 숙지하는 것이 좋습니다.ping 코드를 별도의 파일에 작성하세요. 그러면 코드를 수정하고 싶을 때 하나의 파일만 변경하면 되므로 코드 유지 관리가 쉬워집니다. 코드가 너무 길 경우에도 별도의 파일에 저장하는 것이 좋습니다. 이렇게 하면 디버깅이 훨씬 수월해집니다.

초보자를 위한 실용적인 규칙은 코드의 최소 줄 수를 10줄 정도로 유지하는 것입니다. 10줄보다 짧거나 특정 페이지에만 필요한 코드는 내부 파일에 남겨두고, 10줄보다 길거나 다른 사람과 공유해야 하는 코드는 외부 파일에 저장하는 것이 좋습니다.

인라인 Java스크립트 사용 시 주의해야 할 점

세 번째 유형은 오래된 웹페이지에서 코드가 HTML 속성 내부에 직접 작성되는 경우입니다. 이러한 코드는 실행되기는 하지만 구조와 동작이 혼합되어 있어 캐싱, 재사용이 불가능하며 엄격한 콘텐츠 보안 정책의 적용을 받지 않습니다.

<!-- Inline handler: works, but avoid it -->
<button onclick="alert('Clicked')">Click me</button>

<!-- Preferred: behaviour attached from a script -->
<button id="greet">Click me</button>

<script>
  document.getElementById("greet").addEventListener("click", () => {
      alert("Clicked");
  });
</script>

스크립트 배치에 익숙해지셨다면 다음 단계로 진행하세요. Java스크립트 배열 메서드, 공부하다 루프 Java스크립트그리고 그 과정을 거쳐 진행하겠습니다. 실용적인 Java스크립트 코드 예시외부 파일을 사용하면 브라우저 저장 로직 관리도 훨씬 쉬워집니다. 쿠키 Java스크립트.

자주 묻는 질문

`<body>` 닫는 태그 바로 앞에 배치하거나, `defer` 속성을 사용하여 `<head>` 태그 안에 배치하세요. 두 가지 방법 모두 HTML이 먼저 렌더링되므로 코드가 실행될 때쯤에는 요소들이 존재하게 됩니다.

네. 파일당 스크립트 태그를 하나씩 추가하세요. 비동기 기능을 사용하지 않으면 브라우저는 스크립트가 나타나는 순서대로 실행하므로, 공유 함수를 정의하는 파일을 해당 함수를 호출하는 파일보다 앞에 배치해야 합니다.

일반적인 원인은 잘못된 소스 경로, 닫는 스크립트 태그 누락 또는 파일 이름의 대소문자 불일치입니다. 브라우저의 네트워크 제어판을 열고 404 응답을 확인하세요.

첫 방문 시에만 추가 요청이 발생하며, 그 이후에는 브라우저 캐시에서 파일이 제공되므로 일반적으로 모든 페이지에 동일한 코드를 반복해서 실행하는 것보다 빠릅니다.

대부분의 어시스턴트는 별도의 설정 없이 실행되는 내부 스크립트 태그가 포함된 단일 HTML 파일을 반환합니다. 실제 운영 환경에서 사용할 수 있는 구조가 필요한 경우에는 별도의 .js 파일을 명시적으로 요청하세요.

async 속성을 가진 외부 파일은 챗봇과 같은 타사 AI 위젯에 적합합니다. 이러한 파일은 독립적으로 로드되어 주변 페이지의 렌더링을 차단하지 않기 때문입니다.

내부 및 외부 Java스크립트: 예제를 통해 배우기

내부와 외부란 무엇인가 Java스크립트?

내부 란 무엇입니까? Java스크립트?

출력:

외부 란 무엇입니까? Java스크립트?

샘플 출력:

외부 링크 연결 방법 Java스크립트 파일이 올바르게 작성되었습니다.

내부 vs 외부 Java스크립트: 주요 차이점

내부 및 외부 사용 시기 Java스크립트 Code?

인라인 Java스크립트 사용 시 주의해야 할 점

자주 묻는 질문

이 게시물을 요약하면 다음과 같습니다.

뉴스레터 신청하기

내부와 외부란 무엇인가 Java스크립트?

내부 란 무엇입니까? Java스크립트?

출력:

외부 란 무엇입니까? Java스크립트?

샘플 출력:

관련 기사

외부 링크 연결 방법 Java스크립트 파일이 올바르게 작성되었습니다.

내부 vs 외부 Java스크립트: 주요 차이점

내부 및 외부 사용 시기 Java스크립트 Code?

인라인 Java스크립트 사용 시 주의해야 할 점

자주 묻는 질문

이 게시물을 요약하면 다음과 같습니다.

뉴스레터 신청하기