야훔의 Front-END

오늘 별것 아니지만 IE8 이후버전에서 나타나는 변화에 대해서 이슈가 발생했었다.
이미지 테그에 alt속성을 입력했지만 마우스 롤오버를 해도 툴팁이 나타나지 않는 것이었다!
이게 뭔일인가 싶어서 여기저기 기웃기웃 하다가 네이버 메인에서는 이미지에 롤오버를 했더니 툴팁이 나온다.
그래서 소스를 확인했더니 title 속성이 자리하고 있었다.

이게 뭔가해서 조사를 좀 해봤더니 
아주 상세하고도 정확하게 설명된 블로그를 찾을 수 있었다.
http://ilmol.com/wp/2008/04/04/391

2008년에 포스팅된걸보니 난 아직도 웹표준에 둔감한 모양이다. 반성해야지 ㅠ
여기서 씌여진 내용을 간단히 정리하면 아래와 같다.

- alt : 이미지가 표지되지 않거나 이미지를 표시하지않을 때 이미지를 대신하여 표현되는 대체 텍스트
- titile : 이미지의 제목

요런거다.

alt라는 속성은 "alternative"의 의미로 alt에 들어갈 내용은 "저 이미지가 만약 없다면 저 이미지를 대신할 다른 텍스트"라는 의미가 있다면 "title"속성은 "저 이미지의 제목"이라는 의미가 있다는 이야기.

무슨말인지 잘 이해하기 힘들면 아래의 예를 보면서 생각해보자.

 

위의 사진은 빈센트 반 고흐의 "해바라기"로 고흐의 대표작품으로 알려진 이 작품에 alt와 title속성을 부여하면 아래와 같을 것이다.

- title : 빈센트 반 고흐의 해바라기
- alt : 빈센트 반 고흐가 그린 해바라기로 주로 고흐에게 희망을 의미하는 노란색과 주황색으로 그려졌고 이 그림으로 인해 "태양의 화가"라는 호칭이 지어졌다.

라고 써야 옳다는 이야기.
W3C에 정의되어 있는 내용은 링크를 따라 확인할 것.
http://www.w3.org/community/webed/wiki/HTML/Elements/img 


아래는 쓰다보니 "어떻게하면 브라우저에서 툴팁이 뜨게 할까요?"라는 질문에 답을 하는 것 같아서 덧붙이는 내용.

보통 img테그의 alt 속성을 반드시 넣어줘야 한다고는 하는데 alt와 title의 사용용도를 헷깔려하는 사람. 혹은 잘못된 사용법으로 문서를 작성하는 사람들이 있다.
"alt와 title. 이 둘중 어떤걸 사용해야하나요?"는 잘못된 질문이다. 두개 다 써야하고 title과 alt의 용법에 맞춰 잘 사용해야한다. 툴팁은 어디까지나 브라우저의 친절이고 title은 이미지의 제목, alt는 이 이미지의 의미를 알려주는 역할이기 때문이다.

눈에 보이지 않는 부분까지 신경을 써야 눈이 보이지 않는 분들이나 이미지를 볼 수 없는 기기, 이미지를 사용할 수 없는 상황에서 이미지를 대신 전달 할 수 있다.

눈에 보이는 것만이 전부는 아니다. 요즘들어 HTML 표준을 살펴보면서 느끼는 점이다.
 

요전에 프로젝트 할 당시에 이런식의 코드를 많이 작성했더랬는데 많은 귀찮음이 따르는 작업이었다.
 

function displayItems( list )
{
	var i;
	var n = list.length;
	var table = $("#sampleTable");

	for( i = 0; i < n; i++ )
	{
		var html = table.html();
		html += '<tr>';
		html += '<td>';
		html += '<img src="'+ list[i].image + '" height="150" />';
		html += '</td>';
		html += '<td>';
		html += list[i].title;
		html += '</td>';
		html += '<td>';
		html += list[i].width + ' * ' + list[i].height;
		html += '</td>';
		html += '</tr>';
		
		table.html( html );
	}
} 

저번 crossdomain 이슈를 해결한 소스에 위와 같은 코드를 넣어서 아래와 같은 화면을 만들었다.
(검색어는 '아이유')

 뭐 간간히 깨진 이미지도 있지만 뭐 링크가 깨졌으니 어쩔 수 없을듯. (그래도 아이유는 이쁘다) 지금 그게 중요한게 아니라 이런 단순히 Table에 게시판처럼 쭉 나열하는 코드를 넣었는데 영 보기도 힘들고 영 만들기도 힘들다. 게다가 코드가 맘에 안들게 지저분해진다. Flex의 ItemRenderer 같이 깔끔하게 들어가게할 방법이 없을까.. 라고 생각하고 있다면 jQuery Template 를 추천한다.

우연찮은 기회에 알게된 jQuery Template는  Flex의 ItemRenderer같이 Template을 만들어두면 자동으로 채워준다. 짧은 말로 설명하긴 어려우니까 일단 기반 지식부터 차근이 알아가자.

참고로 이야기하자면 jQuery Template는 아직 Beta버젼으로 Microsoft에서 만들어준 plug-in 이다. 소문에는 차기에 나올 jQuery에는 jQuery Template가 포함될거라는 소문도 있으나 아직은 사실 무근이며 이런 소문이 도는 까닭은 이 jQuery Template라는게 너무 잘만들어져서가 아닐까 생각된다. 어쨌든 여기저기 검색하다 보면 jQuery 홈페이지에 jQuery Template를 소개하는 페이지가 있다.(http://api.jquery.com/jQuery.template/)

 일단 jQuery Template은 plug-in이므로 jQuery.template.js 파일을 다운로드 받아야한다. jQuery Template을 소개하는 그 페이지를 잘 살펴보면 받아올 수 있는 링크를 찾을 수 있지만 영어 울렁증 및 숨은그림찾기에 능하지 않은 사람들을 위해 링크를 제공합니다.(https://github.com/jquery/jquery-tmpl)

링크를 따라가도 영어천지고 다운로드 버튼을 찾을 수 없는 분들을 위해 그림으로 설명을 이어가겠다.

 저기서 "Download.zip"을 클릭하면 다운로드 받을 수 있다. tar.gz 파일이 좋다면 그걸 받아도 된다. 뭘 받든 상관없지만 아무래도 zip이 통상 많이 쓰이는 거니 저걸 받도록 하자. 압축을 풀면 요상한것들 많은데 일단 우리에게 당장 필요한건 jquery.tmpl.js 파일이다. 간혹 파일 뒤에 "min"이라고 이름이 다른건 뭐냐고 물어보시는 분들 계시는데 그냥 jquery.tmpl.js 파일의 필요없는 공백, 변수명등등을 축약해서 파일크기를 줄여놓은거다. 그냥 jquery.tmpl.js랑 동작하는 내용은 같으니 뭘 쓰든 상관없다.

그리고 HTML코드를 이렇게 작성한다. jQuery Template은 Plug-in 이므로 jQuery를 추가한 뒤에 jQuery Template을 추가시킨다.

<script type="text/javascript" language="javascript" src="js/jquery1.6.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.tmpl.js"></script>

이렇게 하면 기본적으로 준비는 마쳐졌고 jQuery 홈페이지의 jQuery Template의 소개페이지에선 뭔가 javascript로만 템플릿을 만들어 처리하는 방법을 소개해놓았는데 그 방법은 다음과 같다.

template라는 명령어에 템플릿의 이름과 템플릿을 String 값으로 등록을 한다. 그 이후에 tmpl() 이라는 메서드를 이용해 화면에 렌더링하면 된다. 어떻게 하면 되는 예제를 보면서 따라해보자.

var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
  { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
  ];

$.template(
  "detailTemplate",
  "<tr>" +
  "<td colspan='2'>${Name}</td>" +
  "<td>Released: ${ReleaseYear}</td>" +
  "<td>Director: ${Director}</td>" +
  "</tr>"
);

$.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );

일단 JSON 형태의 Array데이터가 있고 템플릿을 등록해준 다음에 $.tmpl 메서드를 이용해 화면에 넣어준다는 이야기. 보기엔 쉬워 보이지만 템플릿을 등록하는데에는 영 맘에 안든다. 좀 더 편하게 이용할 방법은 없을까 하고 고민하고 검색을 해봤더니 javascript가 아니라 HTML로 템플릿을 적용하는 예가 나와있었다.(링크: http://blog.outsider.ne.kr/532 - Outsider님의 블로그 )

이 블로그의 설명을 들어보아하니 jQuery팀은 이미 이런것과 같은 맥락으로 Templating, Data Linking, Globalization과 같은 공식 플러그인을 발표했다고 한다;; 그것도 작년 10월에.. 크흐.. 이렇게 시대에 뒤떨어져서야.. 쓰겠냐마는.. 일단 Data Linking 같은건 나중에 다시 이야기 하고 어서 Template를 보다 편리하게 쓰는 방법을 이야기 하면 아래와 같은 방법으로도 사용이 가능하다고 한다.


HTML영역에 아래와 같이 HTML 스크립트를 작성한다.

<script id="detailTemplate" type="text/x-jquery-tmpl">
<tr>
   <td colspan='2'>${Name}</td>
   <td>Released: ${ReleaseYear}</td>
   <td>Director: ${Director}</td>
</tr>
</script>

그리고 Javascript에서는 아래와 같이 코딩한다.

var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
  { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
  ];

$.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );

아까 작성한 코드와 비슷하지만 적어도 이 방법은 javascript로 문자열로 작성된것이 아니라 HTML코드로 작성되어 작성하는 것도, 편집하는 것도 수월해 졌다.

일단 jQuery Template 사용하는 방법은 여기까지. 다음 시간엔 crossdomain을 해결해 아이유 이미지들을 불러온 소스에 접목시켜 보도록하자. 

이전에 이야기 했던 JSONP 방법과는 다르게 좀더 정석적인 방법으로 jQuery를 다뤄 Crossdomain을 해결한 것은 검색이라는 삽질과 수많은 테스트 코드를 낳고서야 해결점이 보이기 시작했다.(물론 결국 찾아낸건 회사 차장님의 덕택이었지만)

일단 몇가지 문서들을 봐야만 했는데  jQuery.ajaxPrefilter() 부분이었다. 이 ajaxPrefilter() 메서드는 ajax의 low-level 메서드로 jQuery를 통해 ajax통신을 하게 될때 콜백함수로 호출되어 통신을 위한 밑작업들을 수행하게 되는데 cross-domain또한 이 메서드 중간에서 차단하여 막는것도 여기서 처리하게된다. 이 사실을 어떻게 알았냐면 Extending Ajax: Prefilters, Converters, and Transports 라는 문서를 보고 나서 알게 되었다.

이 문서에 따르면 이 기능(?)들은 jQuery 1.5 .$ 버젼부터 지원하기 시작한 것으로 ajax 요청의 "보내기", "받기", 그리고 "관리하기"에 관련된 내용을 담당한다고 설명되어있다.

일단 여러가지로 우리가 봐야할 것은 보낼 때 cross-domain을 막는 부분을 해결해야 하므로 보내는 쪽 담당인 Prefilters 부분을 살펴보도록 하자.
Prefilters는 ajax의 옵션처리, 호출등을 담당하는데 실제 소스 코드를 확인해보면 다음과 같다.
 

$.ajaxPrefilter( function( options, originalOptions, jqXHR )
{
  // Modify options, control originalOptions, store jqXHR, etc
});

 
각 파라미터의 설명들이 있는데 내용은 다음과 같다.

• options : 요청을 보내는 옵션들  
• originalOptions : ajaxSettings에서 기본적으로 수정되어지지 않는 ajax 메서드에서 제공되는 옵션들. 
• jqXHR : jQuery HTTP Request

이렇게 되며 이 메서드를 Extending해주면 ajax통신을 manual 하게 셋팅할 수 있는데 그 내용중에서 아래의 내용을 확인해 볼 것.

Prefilters can also be used to modify existing options. For example, the following proxies cross-domain requests through http://mydomain.net/proxy/:

이 이야기는 무슨 이야기냐 하면 기존의 옵션을 수정할 수 있다면서 프록시서버를 통해 크로스도메인 요청을 보낼수 있다는 이야기를 하며 아래의 코드를 소개해 놓았다.

$.ajaxPrefilter( function( options )
{
  if ( options.crossDomain )
 {
    options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url );
    options.crossDomain = false;
  }
});

그럼 우리가 유추해볼 수 있는건 다음과 같다.

1. 통신을 하기전엔 무조건 $.ajaxPrefilter()를 거친다.
2. ajaxPrefilter() 내부를 변조해 처리하면 cross-domain도 통과할 수 있다. 

라는 것인데 그래서 여태껏 "jQuery ajax crossdomain" 이라는 검색어로 검색하던 것을 "jQuery ajaxPrefilter crossdomain"으로 바꿔 검색해봤다. 그랬더니 서광처럼 등장한 "http://craveytrain.com/posts/cors" 페이지.
여기에 등장한 소스 코드는 

$.ajaxPrefilter('json', function(options, orig, jqXHR) {
    if (options.crossDomain && !$.support.cors) return 'jsonp'
});

이것인데 이 소스를 적용해 테스트 해봤더니 인터넷 익스플로러에선 되고 크롬에선 안되고 하는 크로스브라우징 문제가 발생했는데 이걸 어쩐다.. 하고 고민하다가 어차피 그냥 통신 자체를 'jsonp'로 속여서 내보내면 해결될 문제라고 생각해 아래와 같이 수정했다.

$.ajaxPrefilter('json', function(options, orig, jqXHR) {
    return 'jsonp'
});

이렇게 테스트 해보니 잘된다.
테스트 코드는 아래와 같이.

 

$(document).ready(function(){
	loadData();
});
	 
function loadData()
{
	var data ={};
	data.q = 'test';
	data.apikey = '947f96c9d2518613faae766eed75bca030ad67d7';
	data.result = '10';
	data.output = 'json';

	$.ajaxPrefilter('json', function(options, orig, jqXHR) {
		return 'jsonp';
	});
 
	$.ajax({
		url: "http://apis.daum.net/search/image"
		, crossDomain: true
		, dataType: "json"
		, type: 'GET'
		, data: data
		, success: function( data, textStatus, jqXHR )
		{
			alert("sccess : " + data.channel.item.length );
		}
		, error: function( jqXHR, textStatus, errorThrown )
		{
			alert( textStatus + ", " + errorThrown );
		}
	});
}

이렇게 ajax 통신하기 전에 ajaxPrefilter를 수정해주면 해결이 된다.
 

위의 테스트 결과는 크롬, 사파리, 인터넷 익스플로러, 오페라까지 테스트한 결과로 현재 테스트 해볼 수 있는 브라우저에서는 다 해본 결과다. 결국 jQuery를 extending해야 해결할 수 있는 이슈라니.. 어지간한 파워유저가 아니고서는 해결보기 힘든 이슈일듯 하다.

다음엔 저런 결과물로 jQuery Template를 이용해 화면에 뿌려주는 작업을 진행해 보자.