월별 글 목록: 2013년 7월월

include를 이용해 페이지 작업시 컨텐츠 영역에서의 스크립트 로드할 때 주의점

작업을 하다보면 자주 사용되는 공통 영역은 뷰를 분리해 서버사이드에서 include 처리를 해주게 됩니다. 대부분의 사이트가 기본적으로 헤더-컨텐츠-푸터 정도의 3등분은 되어 있죠. 여러 사람이 협업을 해서 작업을 하다보면 헤더의 구조를 잘 모른 채로 컨텐츠 작업을 하는 작업자가 생기게 됩니다. 물론 구조를 모른 채로 컨텐츠 작업을 하는 일은 지양되어야겠죠. 여튼 컨텐츠 작업자는 필요에 따라서 각 컨텐츠에 필요한 css나 js등의 파일들을 페이지에 로드하게 되는데요, 그러다보면 다음과 같은 경우가 발생할 수 있습니다.

<!-- header -->
<html>
<head>
	<script type="text/javascript" src="/assets/js/lib/jquery-latest.min.js">
</head>
<body>
<!-- contents -->
<script type="text/javascript" src="/assets/js/lib/jquery-latest.min.js">
<div id="container">
	...

헤더에서 한 번, 컨텐츠에서 한 번, jQuery가 두번 로드 되었습니다.
사실 이런 경우엔 별 문제가 되지 않죠.
문제가 되는건 다음과 같은 경우입니다.

<!-- header -->
<html>
<head>
	<script type="text/javascript" src="/assets/js/lib/jquery-latest.min.js">
	<script type="text/javascript" src="/assets/js/lib/masonry.pkgd.min.js">
</head>
<body>
<!-- contents -->
<script type="text/javascript" src="/assets/js/lib/jquery-latest.min.js">
<div id="container">
	...

헤더에서 jQuery 플러그인인 Mansonry(http://masonry.desandro.com/)를 사용하였습니다.
그리고 컨텐츠에서 jQuery를 로드했죠. 이런 경우 문제가 발생합니다. $( selector ).mansonry() 가 동작하지 않게 되죠.
Mansonry가 아니라 어떤 다른 jQuery 플러그인이라도 마찬가지의 문제가 발생합니다.
jQuery 플러그인은 jQuery.prototype 에 함수를 추가합니다. 컨텐츠에 jQuery가 한번 더 불러와 지면서, prototype이 초기화 되기 때문에 헤더에서 불러온 모든 플러그인이 무용지물이 되는 것이죠.

자기가 작업하는 페이지의 헤더에 무엇이 있는지는 확인을 하면서 작업을 해야 하겠습니다…

아오 내가 열이 뻗쳐서 정말…