자바스크립트의 작성 위치는 다음과 같이 3가지로 나눌 수 있습니다.
1. Inline 방식 (태그 내에서 코드를 작성)
2. 내부(Internal) 작성 방식 (html 문서 내에서 script 태그 영역에서 작성)
3. 외부(External) 작성 방식 (작성한 .js 파일을 불러오기)
각각 상황에 맞는 효율적인 작성 방법이 있기에 어떤 작성 방법이 효율적이다라고 할 수는 없습니다.
그러면 각 유형에 대해서 살펴보겠습니다.
1. Inline 방식
인라인 방식은 태그 내에서 간단한 코드를 작성하여 실행합니다.
<div onclick="window.alert('경고')">클릭하세요.</div>
<div onclick="console.log('클릭')">클릭하세요.</div>실행에는 문제가 없으나 이 방식은 권장하지 않습니다.
2. 내부 작성 방식 (Internal)
내부 작성 방식은 html 문서 내부에 script 태그 영역 소스를 작성하는 방식입니다.
내부 작성 방식의 장점으로는 다음과 같습니다.
· js코드와 연관된 소스가 같은 위치에 있기 때문에 이해가 쉽다.
· 빠르고 간단하며 접근성이 좋다.
하지만 소스가 복잡해질수록 관리가 어렵고, 재사용성이 떨어진다는 단점이 있습니다.
<div id="btn">클릭</div><script>
const btn = document.getElementById('btn');
btn.onclick = function(){
alert('hello world');
}
</script>
3. 외부 작성 방식 (External)
html문서와 분리하여 외부에 .js파일을 생성하고 작성한 파일을 html에서 불러와 사용하는 방식입니다.
외부 작성 방식의 장점으로는 다음과 같습니다.
· html과 js코드를 분리하여 읽기가 수월하다.
· 소스 재활용이 가능하고 여러 페이지에서 사용이 가능하다.
· 유지보수가 간편하다.
<div id="btn">클릭</div>// main.js 파일
const btn = document.getElementById('btn');
btn.onclick = function(){
alert('hello world');
}
태그 작성 위치는 <head> 태그 내부와 <body> 태그 내부가 있으며,
자바스크립트를 연결하는 방법은 <script> 태그의 src 경로를 지정합니다.
<script src="/project/js/test.js"></script>
<head> 태그 내부
<body> 태그보다 먼저 실행이 되어 html과 css보다 먼저 로드되어 제어가 가능합니다.
하지만 자바스크립트가 로드된 뒤에 body 태그가 로드되기 때문에 브라우저 렌더링에 방해가 될 수 있습니다.
<body> 태그 내부
<body> 태그 내에 어디든 위치할 수 있지만 보통 로딩이 끝난 뒤 실행하기 위해 </body> 앞에 위치합니다.
웹페이지의 로딩이 먼저 진행되기 때문에 페이지 로딩은 빠르지만 html과 css가 로드되기 전 자바스크립트 제어할 수
없습니다.
async, defer 속성
DOM(Document Object Model, 문서 객체 모델)이 생성되는 도중 <script> 태그를 만나면 DOM 생성이 잠시 중단되고
스크립트를 실행합니다. async, defer는 DOM을 중단하지 않고, 동시에 스크립트를 내려받을 수 있게 해주는 속성입니다.
async : 브라우저가 페이지를 파싱 되는 동안에도 스크립트가 실행
defer : 브라우저가 페이지의 파싱을 모두 끝내면 스크립트가 실행 - *추천*
*파싱(parsing) : 구분 분석, 분해와 분석 후 목적에 맞춰 구조를 결정하는 것
/* async 문법 */
<script async src="/project/js/test.js"></script>
/* defer 문법 */
<script defer src="/project/js/test.js"></script>
5. 그렇다면 내부 작성과 외부 작성 무엇을 사용할까?
내부 자바스크립트 : 현재 파일에만 적용하거나 간단한 코드로 구성한다면 사용
외부 자바스크립트 : 여러 파일에 공통으로 적용하거나 길고 복잡한 코드로 구성하면 사용
'Front-End > javascript' 카테고리의 다른 글
| [Javascript 기초] 조건문 if문, switch문 (0) | 2023.05.03 |
|---|---|
| [Javascript 기초] 함수의 매개변수, 인수, 리턴값 그리고 화살표 함수 (0) | 2023.04.26 |
| [Javascript 기초] 함수의 이해 (0) | 2023.04.24 |
| [Javascript 기초] 반복문 (for 문/while 문) (0) | 2023.04.15 |
| 자바스크립트 엔진 (Javascript Engine) (0) | 2023.04.11 |
댓글