| 제목 | js 우아하게 실패하기 | ||
|---|---|---|---|
| 글쓴이 | milosz | 작성시각 | 2012/10/16 07:03:41 |
|
|
|||
|
예전에 비해 브라우저 환경이 좋아지다보니 하위 브라우저에 대한 지원은 사실 크게 의미가 없긴 합니다만 흔히 유행했던 말인 '시멘틱'한 웹 환경을 만들어주기 위해서는 여전히 가치가 있다고 봅니다. 작업의 복잡도는 높여주긴 하지만 SEO(검색엔진 최적화)나 자원의 재활용, 추후 유지보수의 용이성을 생각한다면 필수적이라고 볼 수 있습니다.
더욱이 jQuery와 같은 강력한 js framework가 많아졌기 때문에 훨씬 위와 같은 형태로 구축하는데 편리해졌습니다. 이 글은 jQuery를 기준으로 작성했습니다.
대표적인 예가 inline으로 삽입된 js 입니다.
<a href="java-script:foobar(1.jpg);">Photo jpg</a>
<a href="java-script:foobar(2.png);">Photo png</a>
<a href="java-script:foobar(3.jpg);">Photo jpg</a>
<!-- 필터링 때문에 하이픈을 넣었습니다.-->
<script>
function foobar(img){
// img를 팝업으로 출력
}
</script>
현재도 많은 사이트에서 위와 같이 anchor에 js를 inline으로 작성한 경우를 많이 볼 수 있습니다. 만약 js를 지원하지 않는 브라우저에서라면 해당 링크를 사용할 수 없게 됩니다. js를 지원하지 않는 브라우저는 무엇이 있을까요? 가장 쉬운 예로는 검색 로봇을 들 수 있습니다. 해당 링크에 걸려있는 이미지에 대한 정보는 검색로봇이 수집을 할 수 없게 됩니다. 그런 어떤 방식으로 작성을 해야 하는 것일까요?
힌트를 드리자면 Codeigniter는 각각의 역할에 따라 MVC로 나눠 개발 및 유지보수를 용이하게 만들었습니다.
즉 기능과 데이터를 분리하여 작성을 하면 웹문서 자체로도 의미가 있고 사용자 편의성에도 고려할 수 있게 됩니다. 시멘틱하게 작성한다는 의미가 여기에 들어 있습니다.
예시를 작성해볼게요.
<a href="1.jpg">Photo jpg</a>
<a href="2.png">Photo png</a>
<a href="3.jpg">Photo jpg</a>
<script>
$(function(){
$("a").click(function(e){
e.preventDefault();
foobar( $(this).val("href") );
});
});
function foobar(img){
// img를 팝업으로 출력
}
</script>
이러면 링크로서의 의미도 살릴 뿐더러 js가 동작하는 브라우저에는 좀더 확장된 기능을 제공할 수 있게 되었습니다. 다음으로는 어떤 의미에서 유지보수가 용이해지는지 알아보겠습니다.
만약 jpg 이미지인 경우는 팝업으로, png 이미지는 화면에 불러오는 형태로 변경한다고 가정합니다.
기존의 방식대로 한다면 1) 화면에 불러오는 function을 작성하고 2) php로 해당 이미지의 확장자를 받아와서 3) 확장자에 따라 다른 function을 쓰게 해야겠죠. 하지만 이게 사이트 전 영역에 걸쳐 있다면? 그만큼 반복적이고 많은 작업을 해야합니다.
조금 나은 방식을 생각해보면 js에서 해당 img의 확장자를 확인해서 function을 실행해주면 되겠지만... function이 복잡해짐과 동시에 여전히 js가 동작하지 않은 브라우저에는 무용지물이 되겠습니다.
여기서 우리가 새로 작성한 예시가 강력한 힘을 보여줍니다.
<a href="1.jpg">Photo jpg</a>
<a href="2.png">Photo png</a>
<a href="3.jpg">Photo jpg</a>
<script>
$(function(){
// jpg파일은 foobar function을 실행합니다.
$("a[href$=.jpg]").click(function(e){
e.preventDefault();
foobar( $(this).val("href") );
});
// png파일은 woobar function을 실행합니다.
$("a[href$=.png]").click(function(e){
e.preventDefault();
woobar( $(this).val("href") );
});
});
function foobar(img){
// img를 팝업으로 출력
}
function woobar(img){
// img를 화면에 불러옴
}
</script>
이와 같이 기능을 지원하지 않는 경우에도 사이트를 사용할 수 있도록 하는 것은 정보 제공자 입장으로 중요한 부분입니다. 예전엔 ajax 기능을 이런 형태로 지원하는 걸 hijax라 얘기했는데 요즘은 '우아하게 실패하도록 구축'한다고 많이 표현하시더라구요. 추가적인 내용이 궁금하시다면 위 키워드로 검색해보세요.
궁금하신 부분은 덧글로 남겨주시면 답글 드리겠습니다. 도움이 되었으면 좋겠습니다.
모두 즐거운 하루 되세용 /ㅅ/
|
|||
| 다음글 | Design pattern for PHP를 작성하였습니... (8) | ||
| 이전글 | 메뉴얼에 기재되어 있지만, 지나치기 쉬운 Model 관... (1) | ||
|
한대승(불의회상)
/
2012/10/16 08:31:47 /
추천
0
좋은 정보 감사 합니다. ^^
|
|
니삼
/
2012/10/16 09:50:51 /
추천
0
추천드립니다 감사합니다
|
|
지지고
/
2012/11/03 17:35:15 /
추천
0
감사합니다. !! ^^
|