JavaScript 파일을 웹페이지에 추가하는 방법은 여러 가지가 있는데, 과거엔 주로 head tag에다 추가해 줄 때가 많았으나, 이렇게 하면 브라우저가 JavaScript 파일을 다 읽어 들이는 동안 웹페이지의 렌더링이 잠깐 멈추게 되는 부작용이 있어서, 최근엔 웹페이지를 되도록 빠르게 화면에 뿌려주려고 body tag 마지막에 얹어 주는 것을 권장하고 있다.

그런데 최근 날로 웹 애플리케이션의 개발과 그 활용 방법론이 많이 알려지면서 JavaScript 파일이 점점 더 커지는 경향이 있는데, 무조건 내려받게 되는 이런 JavaScript 파일의 용량을 조금이라도 줄이려는 노력도 따라서 필요해진다. 그래서 페이지에 얹어진 JavaScript 파일 중에 특정 기능이 빈번히 사용되지 않고 특별한 경우에만 쓰이는 것이라면, 이마저도 주요 JavaScript 파일에서 빼어내 특정 조건에 따라 필요할 때만 로딩해주는 기술이 쓰일 수 있다.

jQeury에선 이럴 때에 꼭 안성맞춤인 jQuery.getScript() 함수를 제공하고 있는데, 사용법은 다음과 같다.

$.getScript("ajax/test.js", function(datatextStatusjqxhr) {
   console.log(data); //data returned 
   console.log(textStatus); //success 
   console.log(jqxhr.status); //200 
   console.log('Load was performed.');
});

jQuery를 쓰지 않고 일반 JavaScript로 구현하려면 javascript_loader.js를 참고해서 구현해 볼 수도 있다.

웹페이지를 구성하는 주요 기술 중 JavaScript의 비중이 점점 더 커지는 것은 어쩔 수 없지만, 그렇다고 다른 기술의 영역까지 침범해서, 그에 따른 나중에 쓸데없이 들어가는 개발과 운용상의 소모적 낭비는 피해야 할 것이다.

이와 관련된 주제의 강연 영상: Enough with the JavaScript Already by Nicholas Zakas – YouTube

참고로, 특정 요소에만 사용되는 JavaScript 함수를 따로 로딩하려고 할 때 사용될 수도 있는 jQuery plugin으로 proximity-event가 있는데, 특정 요소에 마우스 커서가 정해진 사정거리 안으로 접근하면 그에 관한 event를 쏴줘서 여기에 등록된 함수를 자동 실행시켜주는 기능이 있다. 그런데 여기서 주의해야 할 점은, 가령 웹 Form의 특정 요소에 어떤 기능을 추가해 주고 싶을 때에는 접근성을 고려해서 focus event에도 이 함수 로딩 관련 JavaScript가 실행되었는지 확인해서, 로딩되지 않았다면 따로 이 추가 기능의 JavaScript 파일을 불러드리도록 처리해야 한다.

관련된 주제의 글

“웹페이지 로딩 후, 필요할 때에만 특정 JavaScript 파일을 읽어 들이는 방법”에 달린 2개의 댓글

댓글로 달려다가, 메일로 보내려고 했는데 연락 페이지에서 메일 전송실패라 다시 댓글로.. ㅠ.ㅠ

단순 오타일수도 있지만… 제목에 쓰신 ‘읽어드리다’는 ‘할머님께 편지를 읽어드리다’라고 할 때 쓰는 말이고요. 생각하신 표현은 ‘읽어들이다’인 것 같은데요. 그냥 ‘불러오는’이나 ‘로딩하는’이라고 쓰셔도 무방해 보입니다.
😳
간결하고 좋은 내용의 글 늘 감사히 읽고 있습니다.

그러고 보니, 분명한 오타네요.
바로 고쳤습니다.
알려주셔서 고맙습니다. 청설모님. 🙂

메일 전송 실패 원인을 알아보니까, 청설모님의 ip가 혹시 WordPress에 설치된 Akismet에 spam ip로 등록된 것이 아닌가 의심되네요.
메일이든 댓글이든 항상 청설모님이 달아주신 소중한 의견이 바로 전달이 안 되고 항상 스팸 항목에 걸려 있더군요.

참고로, 제 메일 주소는 맨 앞 대문에 그려져 있답니다. :mrgreen:

댓글을 남겨 주세요