<script> 태그의 src 속성을 사용하여 외부 JavaScript 파일을 불러온 경우, 해당 파일의 내용은 별도의 스코프(scope)를 가지게 됩니다. 이는 외부 파일의 변수와 함수가 현재 파일의 스코프에 포함되지 않기 때문에, 해당 변수를 바로 출력할 수 없는 이유 중 하나입니다.
따라서, 외부 JavaScript 파일에 정의된 변수를 사용하려면, 해당 변수를 현재 파일에서 다시 정의하거나, 콜백 함수나 이벤트 핸들러 등을 사용하여 처리해야 합니다.
예를 들어, 다음과 같은 방법으로 외부 파일에 정의된 변수를 사용할 수 있습니다.
<!-- external.js 파일 내용 -->
var externalVariable = "Hello, world!";
<!-- index.html 파일 내용 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>External JavaScript Example</title>
</head>
<body>
<script src="external.js"></script>
<script>
// 외부 파일에 정의된 변수를 사용하기 위해 다시 정의
var localVariable = externalVariable;
console.log(localVariable); // "Hello, world!"
</script>
</body>
</html>위 코드에서 externalVariable은 external.js 파일에서 정의되었으며, index.html 파일에서 src 속성을 사용하여 해당 파일을 불러왔습니다. index.html 파일 내부의 <script> 태그에서는 externalVariable을 사용할 수 없지만, var localVariable = externalVariable;와 같이 다시 정의하여 사용할 수 있습니다. 이후 console.log(localVariable);을 실행하면, "Hello, world!"가 출력됩니다.
'에러 || 디버깅 노트' 카테고리의 다른 글
| 브라우저 환경에서 require() 쓰지 못하는 이유 (0) | 2023.03.27 |
|---|---|
| 자바스크립트에서 자주 겪는 에러들 (0) | 2023.03.26 |
| 커스텀 배열 메서드 만들기 (0) | 2023.02.28 |
