JavaScript 코드를 웹 페이지에 적용하는 방법은 크게 두 가지입니다. 하나는 HTML 문서 안에 직접 작성하는 인라인(내부) 스크립트 방식이고, 다른 하나는 별도의 .js 파일로 분리해서 불러오는 외부 스크립트 방식입니다. 두 방식은 동작 시점과 성능 면에서 중요한 차이점을 보이며, 상황에 따라 적합한 선택이 달라집니다.
외부 스크립트(External Scripts)
- 브라우저는 외부 스크립트를 처음 한 번 다운로드한 후 캐시에 저장합니다. 같은 파일을 다시 참조할 때는 추가 다운로드가 필요하지 않습니다.
- 캐싱 덕분에 페이지 로딩 시간과 전송 크기를 줄일 수 있으며, 여러 페이지에서 공통으로 사용되는 코드에 특히 유리합니다.
async와defer속성이 정상적으로 작동합니다. 이 속성들이 지정되면 스크립트는 기본 동작 대신 비동기 로딩 또는 지연 실행 방식으로 변경됩니다.- HTML과 JavaScript 코드가 분리되므로 구조가 깔끔해지고 유지보수가 쉬워집니다.
인라인 스크립트(Inline Scripts)
- HTML 파싱 중 해당 위치에 도달하면 즉시 실행됩니다.
- 파일이 이미 문서에 포함되어 있으므로 별도의 네트워크 요청 없이 곧바로 로드됩니다.
async와defer속성은 아무런 영향을 미치지 않습니다.- 서버 측에서 동적으로 렌더링되는 페이지에서 특히 유용하게 활용됩니다.
그렇다면 어떤 방식을 선택해야 할까?
규모가 있는 프로젝트에서는 캐싱 효율과 코드 재사용, 유지보수의 장점 때문에 외부 스크립트 방식이 일반적으로 권장됩니다. 반면, 페이지가 열리자마자 소량의 코드를 즉시 실행해야 하거나 서버에서 생성한 데이터를 화면에 바로 반영해야 하는 경우에는 인라인 스크립트가 더 효율적일 수 있습니다. 프로젝트의 성격과 성능 요구 사항에 맞춰 두 방식을 적절히 조합하는 것이 가장 좋은 접근입니다.