[자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - #1

이번 포스팅은 자바스크립트를 이용하여 사용자 보기(뷰)를 변환해서 보여주는 내용입니다. 마땅한 제목이 생각나지 않아서 포스팅 제목이 난해합니다. 추후에 바람직하고 간단한 제목으로 바꼈으면 합니다. 어떤분이든 제시 좀 해주세요. ^^;;

제목보다는 위 이미지를 보면 이해하기 쉽습니다. 각 리스트, 상세, 썸네일 보기 별로 모양이 달라지게 하는 내용입니다. "어~ 이거뭐야. 이거는 지금도 다 되고 있잖아~" 라고 하셔도 할말이 없습니다. DB에서 꺼내진 데이터를 각 스킨에 맞게 처리한 후 각 보기별로 display 속성을 제어해서 보여주면 되겠지요. 물론 대부분 작업이 그렇게 되어져 있습니다.

그런데 여기서는 DB에서 꺼낸 데이터를 JSON에 담아놓고 자바스크립트를 이용해서 선택된 보기에 맞게 모양을 바꾸려 합니다. JSON 데이터 하나만 가지고 있으면 어떤 모양의 스킨이라도 적용시킬 수 있도록 하는게 목적입니다. 너무 거창하네요. 사실은 별거 없습니다.

이쯤에서 미리보기로 감상하시면 더더욱 쉬우실 겁니다. 이 미리보기는 완성된 소스가 아니며 예를 들어 이런걸 구현해 보자 정도의 내용입니다. 참고하시기 바랍니다.
[구현할 내용 미리보기]

이번 작업은 여러차례의 포스트을 통해서 이루어지며 소스에 버그 또는 최적화 부분은 누락되었을 수도 있습니다. 크로스브라우징을 완벽히 테스트하지 않지만 최대한 표준으로만 작업했습니다. 단, CSS부분은 제가 아주 아마추어이기 때문에 엉망입니다. 그쪽은 그냥 넘어가 주시면 감사하겠습니다 ㅎㅎ;

작업을 시작하기전에 먼저 JSON에 대해서 간단히 알아보겠습니다.

JSON(JavaScript Object Notation)을 사전적으로 해석하면 '자바스크립트 객체 표시법'입니다. 개발 쪽에 포커스를 두고 보면 '경량의 데이터 교환형식'이라고 하네요. 말 그대로 아주 가볍지만 그 쓰임새는 사실 아주 파워풀합니다. 요즘들어 자바스크립트의 중요성이 날이 갈수록 대두되고, Prototype을 필두로 JQuery로 이어지는 자바스크립트 프레임워크의 사용이 증가하고 있습니다. 그 파워는 웹표준의 전면적인 등장(우리나라에서는 Web2.0이라 불리는)으로 더욱 중요해 졌습니다. 웹퍼블리셔라는 신종 직업군이 등장하고 과거의 마크업 언어(HTML)는 이제는 하나의 언어(Language)처럼 발전하고 있습니다. HTML5의 소식이 심심치 않게 들리고, 웹브라우져들은 벌써 부터 HTML5를 지원하기 시작했습니다. 웹표준에 따른 마크업으로 인해 웹에 표현된 모든 요소를 객체화 하여 접근하기가 쉬워졌을 뿐만 아니라, 개발의 영역에서도 자바스크립트와 HTML의 중요성을 인지하기 시작했습니다.

자바스크립트의 데이터 관리의 핵심으로 등장한 JSON은 어떤 데이터라도 다 표현할 수 있으며, 각 데이터의 접근방법이 사람이나 기계나 읽고 쓰고 분석함이 용이하게 되어 있습니다. 아래는 이번 포스트의 소스중의 일부이며, JSON 데이터의 표현방법입니다.

var datas = { 
	config : {
		jName : "datas", //json 데이터명
		dtBody : "data" //data 변수명
	},
	listConfig : 
	{
		clsNm : "클래스명",
		widths : [100,0,100,100,50,20], //col width
		thead : [null,null,null,null,null,null],
		dtOrder : ["grName", "itName", "itMaker", "itNation", "itIssueDt", null]
	},
	detailConfig : 
	{
		clsNm : "클래스명"
			
	},
	data : 
	[
		{
			itCode : "데이터코드",
			itName : "데이터명",
			grCode : "분류코드",
			grName : "분류명",
			itMaker : "제작",
			itNation : "국적",
			itIssueDt : "개봉일",
			itExp : "설명",
			itImages : ["이미지1","이미지2","이미지3","이미지4"]
		},

이 데이터 표기방법은 기존에 자바스크립트 데이터를 표현하기 위해 주로 사용했던 배열의 불편함을 없애 주었습니다.(뛰어난 분들은 벌써 사용하셨겠지만 ㅎㅎ) 위의 예처럼 각 요소에 접근하기 위해 쉽게 사용할수 있는 점(.)연산자를 사용하여 대부분의 개발자들이 쉽게 접근할 수 있습니다. 아주 쉬운 예를 하나 만들어 보겠습니다.

<SCRIPT>
var json = {
	man : "강력한",
	woman : "섬세한",
	baby : "귀여운",
	child : "말썽장이"
}

alert(json.baby);
</SCRIPT>

브라우져에서 실행시켜 보면 아래의 데이터가 나타납니다. 기대하신대로 나오셨나 모르겠네요.

JSON에 대한 더 많은 정보를 얻고 싶으시면
http://www.json.org
http://ko.wikipedia.org/wiki/JSON
등에서 보실 수 있으며 간단한 검색만으로도 많은 정보를 찾아보실 수 있습니다. 너무 많아서 걱정이죠. ^^

AJAX와 JSON이 호흡을 맞추면서 상호간에 윈윈하는 상태입니다. 기회가 되시면 AJAX를 공부하시면서 JSON을 적용해 보셔도 좋을듯 합니다.

너무 서두가 길어졌네요. 그래서 결론적으로 말씀드리면 우리는 저 JSON 데이터를 가지고 사용자 선택에 따라 보기 방식을 바꿀수 있도록 코드를 짜보겠습니다. 다시 말씀드리지만 아주 허접합니다. 널리 양해를 부탁드리며 고수 분들은 씨익 한번 웃으면서 지나가시면 되겠습니다.

본격적인 소스코딩은 다음 포스트로 미뤄야 겠네요. 너무 길어질 것 같습니다. 뻘소리만 하다 끝이라고요? ㅎㅎ;
바로 다음 포스트 이어 붙이겠습니다. 스크롤 압박이 생기실까바~

[자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - #2 바로가기