내부 스크립트
- HTML 파일 내 직접 JavaScript 코드 작성
<script>태그 사용, HTML 문서의<head>또는<body>섹션 내 포함- 간단한 스크립트나 페이지 특정 기능을 구현할 때 유용함
- 예시코드
<!DOCTYPE html> <html> <head> <title>내부 스크립트 예제</title> </head> <body> <button onclick="sayHello()">클릭하세요</button> <script> function sayHello() { alert("안녕하세요!"); } </script> </body> </html>
외부 스크립트
- JavaScript 코드를 별도의 .js 파일로 작성함
- HTML 파일에서
<script>태그의 src 속성을 사용하여 외부 JavaScript 파일 참조함 - 코드의 재사용성과 유지보수성 향상됨
JavaScript를 HTML 문서에 포함시키는 위치와 속성에 따른 고려사항:
<head>태그 내에 스크립트 배치:- 기본: 페이지 로딩 시 스크립트가 먼저 실행되어 DOM 요소가 아직 생성되지 않을 가능성 있음
defer속성: DOM 완전 로드 후 스크립트 실행.순서 보장됨async속성: 비동기적으로 스크립트 다운로드 및 실행.순서 보장되지 않음- 의도하지 않은 파일 다운로드가 먼저 끝나면 그 파일이 먼저 실행됨
- 성능적으로만 보면 DOM을 조작하지 않을 때는 async가 훨씬 빠르고 성능적으로 유리함
- 구글 lodash에서 용량 큰 js 파일을 얻을 수 있음. 이걸로 테스트 가능
<body>태그의 끝 부분에 스크립트 배치: 페이지의 모든 요소 로드 후 스크립트 실행. 별도 처리 없이 DOM 요소 접근 가능함
이를 통해 페이지 로딩과 스크립트 실행 순서 및 성능 최적화 가능함
- 예시 코드
<!DOCTYPE html> <html> <head> <title>스크립트 로딩 예제</title> <!-- defer 사용 --> <script src="script1.js" defer></script> <!-- async 사용 --> <script src="script2.js" async></script> </head> <body> <h1>스크립트 로딩 예제</h1> <p id="demo">이 텍스트는 JavaScript에 의해 변경될 것입니다.</p> <!-- body 끝에 스크립트 배치 --> <script src="script3.js"></script> </body> </html>
외부 스크립트 사용 시 주의점:
<script>태그에 src 속성 사용 시 태그 사이에 내용 넣지 않음- 올바른 예:
<script src="script.js"></script>- 잘못된 예:
<script src="script.js">console.log("Hello");</script>src 속성 있는 경우, 태그 사이 내용 무시되며 오류 원인 될 수 있음
프론트엔드 공부 기록 아카이빙🍁