JS 사용 위치

개념 이해하기

작은 예제는 script 안에 직접 작성할 수 있지만 실제 프로젝트에서는 src로 외부 파일을 연결합니다. defer는 HTML 파싱과 병렬로 파일을 받고 문서가 준비된 뒤 순서대로 실행합니다.

이 예제는 실제로 app.js를 불러오지 않고, location 변수에 외부 app.js 파일이라는 문자열을 넣어 그 상황을 흉내 냅니다. 버튼을 누르면 이 문자열 뒤에 나머지 문구가 + 연산으로 이어져 외부 app.js 파일에서 실행한다고 가정한 코드입니다.가 pre에 표시됩니다. 같은 코드를 외부 파일로 옮겨도 동작은 그대로이고 불러오는 방식만 달라집니다.

async 속성도 HTML 파싱을 멈추지 않고 파일을 내려받지만, 다운로드가 끝나는 즉시 실행하므로 여러 스크립트 사이의 실행 순서가 보장되지 않습니다. 다른 코드에 기대지 않는 분석 스크립트 같은 곳에 어울립니다. 또 src가 없는 일반 script 태그에는 defer와 async가 아무 효과를 내지 않습니다.