'분류 전체보기'에 해당되는 글 1246건

보통 우리가 SQL 형식으로 데이터를 조회할 때 SELECT를 사용한다. 이 중 특정 조건에 해당하는 값을 가져올때 다양한 방식으로 표현하게 되는데, 만일 아래와 같이 작성했다고 하자.

SELECT * FROM splist WHERE id>10

저렇게 되면 splist 안의 데이터 중 id가 10보다 큰 모든 값을 들고 온다. 아마도 이 바닥(IT, 프로그래머들이 가득찬....)에서 위와 같이 코드를 짜게 되면 별거 아니면 상관 없지만, ERP 같은 대규모 DB 로 구성된 솔루션을 사용 중이라면 욕 진탕 얻어 먹을 것이다.
특별한 경우가 아닌 경우 보통 아래와 같은 스타일로 SELECT를 하라고 할 것이다.

SELECT [id],[name],[address] FROM splist WHERE id>10

그러면 최소한 id는 10 이상인 것 중에 id, name, address 만 해당하는 값만 쭉 가져오게 된다.

자... 그럼 이제 SPList에서 SPQuery를 이용할 때를 살펴보자.

보통 SPQeury라는 객체를 사용하는 것은 SPList 내에 특정 데이터를 가져올 때 사용하기 위한 부분이다. 그래서 그 SPQuery안에 있는 Query라는 속성 값 내에 <WHERE></WHERE>  라는 형식의 검색 조건을 넣어 처리하곤 한다.

만일 아래와 같이 코드를 짰다면... 어떻게 될까?

SPList list = web.GetList("/Lists/PresidenSchedule1");

SPQuery query = new SPQuery();
query.Query = "<Where><DateRangesOverlap><FieldRef Name=\"EventDate\" />
<FieldRef Name=\"EndDate\" /><FieldRef Name=\"RecurrenceID\" />
<Value Type=\"DateTime\"><Now  /></Value>
</DateRangesOverlap>
</Where><OrderBy>
<FieldRef Name=\"EventDate\" /></OrderBy>";
query.CalendarDate = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day);
query.RowLimit = 10;
query.RecurrenceOrderBy = true;
query.ExpandRecurrence = true;

 SPListItemCollection items = list.GetItems(query);


저 코드가 바로 SELECT * FROM ~ WHERE ~ 스타일인 코드이다.
그렇다면 이 SPQuery에서는 어떻게 특정 Field만 가져오게 할까?

방법은 간단하다. SPQuery의 ViewFields를 설정하면 된다.
StringBuilder sbFields = new StringBuilder();
sbFields.Append("<FieldRef Name=\"EventDate\" />");
sbFields.Append("<FieldRef Name=\"EndDate\" />");
sbFields.Append("<FieldRef Name=\"ID\" />");
sbFields.Append("<FieldRef Name=\"Title\" />");
sbFields.Append("<FieldRef Name=\"RecurrenceID\"  />");
sbFields.Append("<FieldRef Name=\"fAllDayEvent\" />");
sbFields.Append("<FieldRef Name=\"fRecurrence\" />");
query.ViewFields = sbFields.ToString();

즉 GetItems 를 실행하기 전에 SPQuery 안에 저렇게 ViewField들을 정의해주면 간단하게 끝난다.

물론 자체적으로  Sharepoint가 Cache로 가지고 있어서, 어느정도는 후후 되지만, 그래도 깔삼하게 필요한 것만 가져오는게 좋지 않을까?

사실 이 부분에 대한 글은 외국 사이트들에 많이 소개 되어 있다.
그러나, 정작 사용하려 하면 헷갈리게 구성되어 있어 이기회에 정리하도록 한다.

이전에 사용해 왔고 계속 진행해온 방법이 아래와 같은 방법이다.

<a href="javascript:" onclick="IMNImageOnClick();return false;" class="ms-imnlink">

<img title="" alt="No presence information" name="imnmark" border="0" valign="middle" height="12" width="12" src="/_layouts/images/blank.gif" sip="administrator@trainsbydave.com" id="imn0,type=smtp" >

</a>

즉 저 내용 중 SIP 라는 항목에 실제 OC 에 필요한 SIP를 넣어서 처리하곤 했다.

그런데, 간혹 위와 같이 표기하면 Presence 정보가 제대로 표시되지 않거나(SIP가 잘못된 것 처럼 아예 표시 조차 안되는 경우), 2개 씩 나오는 경우가 있다.

이에 MOSS에서 제공하는 스크립트를 가만히 뜯어 보았다. MOSS에서 제공하는 자바스크립트는 두가지 인데, 하나는 /_layouts/{LCID_CODE}/init.js 고 다른 하나는 /_layouts/{LCID_CODE}/ows.js 이다. ( LCID_CODE란 언어별 코드로 한국어면 1043 일 것이다. )

그 자바스크립트를 가만히 보게 되면 위와 같은 형태의 코로는 도무지 제대로 찾지 못하는 구조일 수 밖에 없다. ( 도리어 표시되는게 무척이나 신기한 구조다. )

예전 WSS v2 에서는 아래와 같이 구성되어 있었다.

<img border="0" height="12" width="12" src="http://portal.blackbladesystems.com/_layouts/images/blank.gif" onload="IMNRC('erosenfeld@blackbladesystems.com')" id="imn0" >

그래서 해당 Img가 Load될때 IMNRC라는 자바스크립트가 실행되면서 동작했는데, WSS v3 부터는 ProcessImn() 이라는 함수를 부르면 알아서 찾아 처리하는 것이다.

아무것도 없는데 알아서 처리할리는 없고, 실제 자바스크립트에서 찾는 방법을 간단하게 서술하면 아래와 같다.

1. name="imnmark" 라는 이름을 가진 element를 모두 검색한다.

2. 검색한 element가 span이라고 가정하고, OC의 active X에 이벤트를 연결한다.

3. 이벤트에서는 active X의 presence가 변경될 때 마다, 해당하는 이미지로 변경할 수 있도록한다. 이 때 이미지 id는 span에서 제공한다.

혹시 이 Presence 정보에 골머리를 싸아보신 분은 헉.... 이라는 한마디를 할 것이다. 저 1,3 번이 바로 OC Presence 정보의 함정인 것이였다.

먼저 아래와 같은 구조가 되어야 한다는 것이다.

<span id="{고유ID-1}" name="imnmark" >
  <img id="{고유ID-1}" src="blank.gif" >
</span>

서두에 전달드렸던 태그와는 전혀 생뚱맞지 않은가?

즉 <a> <img> </a> 형태가 아닌 <span><img></span>이되어야 한다는 것이다.

그런데, 여기서 잠깐!. 저 ID가 무척 웃기는 구조이다. 정말이지 고유 ID가 되어야 정확한 이미지 변경이 가능하다.만일 모든 Presence 정보의 ID를 맨 위의 코드 처럼 id="imn0,type=smtp"  라고 쓰면 한개의 이미지만 그럴싸하게 나오고 나머지에서는 제대로 표시도 안된다.

그렇다면, 저 ID는 어떻게 뽑을까?

물론 한 페이지에 이 Presence 정보를 뽑는 곳이 딱 한개의 웹파트에서 모두 표시된다면 문제가 없다. 그 안에서 int nIndex = 0; 한다음에 뺑뺑이 돌면서 ID를 만들면 된다. id="imn0,type=smtp" , id="imn1,type=smtp", id="imn2,type=smtp", id="imn3,type=smtp"... 이런 식으로 표시만 되면 된다.

그런데.. 만일 멀티 웹파트 인경우에는 어떻게 해야 할까?

사실 이것 때문에 조금 고민했다.  웹 구성요소(웹 컨트롤, 웹 파트 등)에서 모두 공유해서 쓸만한 변수라는게 있을까? 웹 컨트롤 내에 백개의 변수를 정해줘바야 다른 웹 컨트롤이나 웹 파트에서 접근도 못할 뿐더러, 이미 접근할 때에는 그 객체는 Render 하고 끝났을 테니깐...

그러다가, 이렇게 생각을 조금 다르게 바라보자,  웹페이지에서도 나름대로 공용 변수를 하나 세울 수 있었다.

바로 HttpContext.Current.Cache라는 것이였다.

즉 저 안에는 Key 값을 정해준뒤, object 형태의 값을 넣을 수 있는데, 바로 그 점에 착안한 것이다.

즉 Presence 정보를 표시하는 모든 웹 구성요소들은  아래와 같은 캐쉬를 꼭 읽도록 한다.

object val = HttpContext.Current.Cache["PRESENCE_COUNT"];

만일 val이 null 이라면 새로 값을 넣고, 그렇지 않으면 그 값을 사용한다.

presence 정보를 쭉 나열한 뒤, 전체 인덱스가 변했다면, 이젠 그 값을 Set 해준다. 이 때 만료시간은 2~3초로 잡아주면 끝날 것이다.

아래의 코드를 참고하도록 한다.

static public string GetPresenceInfoHtml(string sSipAddress)
{
      string CacheName = CACHE_PRESENCE_COUNT_PREFIX +   UserData.GetCurrentUserId();
       int nCount = 0;
       object val = CacheHelper.GetCache(CacheName);
       if (val != null)
       {
            nCount = (int)val;
            nCount++;
        }

        string sId = "imn" + nCount.ToString() + ",type=smtp";
        StringBuilder sbContent = new StringBuilder();
        sbContent.Append("<span name=\"imnmark\" ShowOfflinePawn=\"true\" id=\"" + sId + "\" sip=\"" + sSipAddress + "\">");
         sbContent.Append("<img border=\"0\" id=\"" + sId + "\" valign=\"middle\" height=\"12\" width=\"12\" src=\"/_layouts/images/blank.gif\" onload=\"IMNRC('" + sSipAddress + "');\" sipaddr=\"" + sSipAddress + "\" />");
         sbContent.Append("</span>");
        CacheHelper.SetCache(CacheName, DateTime.Now.AddSeconds(5), nCount);

         return sbContent.ToString();
}

( 위의 코드 중 CacheHelper.SetCache와 GetCache는 신경 쓰지 않도록 한다. HttpContext.Current.Cache를 쉽게 사용할 수 있도록 구성한 함수 들이다. )

* 주의! : Presence를 표시하는 Html 부분을 AJAX 기법으로 동적으로 추가되도록 구성하지는 말자. <div> 안에 innerHTML 같은 것으로 해당 부분의 Html을 넣거나 빼게 되면 그 안의 값은 getElementById 혹은 getElementByName 등의 함수로 찾지 못하는 경우가 발생한다. 가급적 HTML은 미리 인쇄될 수 있도록 구성해야 한다.

ASP.NET에서 Page객체 내에 있는 IsPostBack과 IsCallBack의 차이를 명확히 몰랐다. 어떨때 Postback을 써야 할지, 어느 때 Callback을 써야 할지...

이제는 조금은 명확해져서 조심스럽게 포스트하도록 하겠다.

먼저 이 차이를 알려면, HTML을 이용한 서버 데이터 전송에 대해서 살펴보아야 할 것 같다.

예전 HTML로 작성된 데이터들은  정적 페이지라고 했다. 그 이유인 즉, 그 HTML 페이지에는 오로지 HTML 태그와 텍스트들로 나열되서 글과 그림 그리고 링크로 구성된 오로지 정보 전달만을 위한 페이지를 제공해 왔다. 그래서 당시 대부분의 홈페이지들은 텍스트와 이미지와 링크 만 있었고, 그나마 동적으로 움직이는 것을 움직이는 GIF나, 자바스크립트를 겨우 이용하는 정도 였다.  즐비했고, 사용자들은 서버에서 제공되는 값들을 이용만했지 절대 서버에 데이터를 주거나 하지 못했다.

그러다가, 이 HTML에 Form 이라는 것이 생겼다. 이 Form 내에 input 이라는 형태로 데이터들을 넣으면 form 내에 있는 각종 데이터들을 서버에 전달 할 수 있게 되었다. 아마 이 개념이 정립되면서 가입 양식 같은 형태로 만들 수 있었고, 이 가입양식 내에 데이터를 채우면 서버에 필요한 데이터를 전달할 수 있었다. 이 때 Form 안에 보면 action 이라는 속성 값으로 Html URL을 넘기게 되어있는데, 이 URL에 해당하는 서버로 데이터를 전송하게 된다. 이 때 부터 생긴 개념이 ghost 페이지라는 것이 생겼다. 이 ghost 페이지는 오로지 client에서 데이터를 받아 처리하는 로직만 담기고 실제로 사용자에게는 보여지지 않는 페이지였다.

이 개념을 ASP.NET에서 Postback이라는 것으로 만들었다. 즉 예전에는 총 3단계의 과정 [입력폼 페이지] -> [Ghost 페이지] -> [결과 페이지] 로 가졌던 것을 [입력폼 페이지] 하나만으로 그 Form 기능을 수행하게 하는 것이다.

ASP.NET에서 제공하는 System.Web.UI.WebControls 라는 네임 스페이스 안에 다양한 컨트롤들 Button, TextBox... 마치 Windows 클라이언트의 WinForm과 같은 컨트롤들을 생성해서 그 동작을 살펴보면 바로 저 Postback 개념으로 동작하는 것이다. 즉 예전 Form의 Post 방식으로 서버에 데이터를 전송하게 되는데, 단지 특정 Ghost 페이지가 아닌 자기 자신으로 다시 부르는 것이고, 이에 관련된 처리를 ASP.NET에서 자동으로 처리하는 것이다. 그래서 실제 프로그래밍 할 때는 Form 의 action이나, input 과 같은 태그 없이도 자동으로 클릭, 텍스트 변경 등의 이벤트에 대응되는 것이다.

그러나.... 이 방법은 큰 문제가 있으니, 바로 화면 Refresh이다. 이건 원래 Form의 Post 방식을 사용한 것이다 보니 Post가 발동 되는 순간 Form에 정의된 action의 페이지를 부르는 작업을 수행하는 것이다. 그 페이지가 다른 페이지던, 자기 자신이든 결국 그 페이지를 다시 부르는 것과 동일하기 때문에, 화면이 깜박이게 되는 것이다.

이 문제점에 대한 대안으로 callback이라는 것을 제공한다.
AJAX가 세상의 또하나의 트랜드가 되었을 때, 이번엔 HTTPRequest 라는 객체를 이용해 javascript로 데이터를 직접 읽어오는 로직을 ASP.NET으로 구현한 것이 바로 callback이라는 개념이다. 이 동작은 Form을 통해 데이터를 전달하는 것이 아니고 javascript가 독자적으로 httprequest 라는 모듈을 이용해 직접 페이지를 부르는 방법이기 때문에, 화면이 깜빡대지 않는다.

정리를 하자면, Postback은 옛날 개념, Callback은 근좌 유행한 AJAX 기반의 개념이라는 것. 그래서 일반적인 웹 컨트롤은 바로 Postback으로 체크하시면 되고, Callback은 ICallbackEvent 라는 인터페이스를 상속 받은 Page 객체 혹은 컨트롤에서 체크하면 된다.

경제 생활을 영위하기 위해서는 취직이라는 것을 해야 하고, 직장을 다녀야 한다.
사실 이게 기본 원칙.

그러나, 난 최소한 밥 먹고, 로또할 수 있는 금액만 있으면 된다.
사실 그게 거의 전부.

그러나, 직장 내의 생활은 조금 다르다.
돈을 조금 주든, 밤을 밥먹듯이 새든(사실 난 밥을 잘 자주 먹는 편은 아니다.) 큰 상관은 없다.
단지.... 재미 있어야 한다.
재미 없는 일을 하는 건, 연봉 3~4억이 넘지 않는 이상 사절이다. 어설픈돈 주면서 재미없는 일만 하면 정말이지 노 땡큐다. 당장 취직 안되서 어쩔 줄 몰라 하는 사람들이 보면, 참 배부른 이야기다 하지만, 그들도, 힘겨운 취직후 2~3년 경제 활동을 하다 보면, 그럴 것이다.
물론 결혼을 하거나, 직장 생활 = 돈 즉... 돈만 잘 주면 땡..이신 분들에게는 1%의 공감도 못얻을 것이다. 뭐 그런 사람들에게 까지 공감이 필요하지도 않다.

일단, 난 재미있는 일 ... 그것이 하고 싶다.

지금하는 일? 재미 반감 중.

Commented by 드림부동산 at 2008/11/19 10:57  r x

어떤 상황의 빌라도 15일안에 팔아드리겠습니다.

매도를 원하시는 분은 메일(villa0304@naver.com)로 지역,상황,연락처를

보내주시면 저희가 전화드려 자세히 상담해 드립니다.


#관리자님 허락없이 글을올려 죄송합니다.

거부의사를 메일(villa0304@naver.com)로 사이트주소를 보내주시면

다시는 글을 올리지 않겠습니다. 죄송합니다.

네네.. 당신 참 멋지신 분이군요. 거부 의사라...
그 이메일 막히지는 않았는지, 멜통이 꽉차진 않았는지 궁금하군요.
글을 다시 올리지 않는다라... 네 댁이 올리시든 말든 전 걍 지울랍니다.

어차피 거부 메시지 보내봤자 그거 정리해서 다른 항목으로 광고하실테니깐요.

네네....열심히 다른 사람들꺼 팔아 드리세요.
전 영세민이라서, 부자가 아니라서 빌라 조차 없답니다.
이런데 올리지 마시고, 직접 발로 뛰면서 돈 있으신 분께 달라 붙으세요.
게다가 요즘 환률이 널뛰기에 달라 막혀 내/외 수 모조리 막혀 현금 안도는 시점에
미쳤다고 부동산 사는 사람이 있기나 할까요? 혹시나 있다면 솔직한 심정으로 뜯어 말리고
싶은데요;;;;;;;

미친.....

친구 광민 의 글 중에 나온 미네르바 이야기에 혹해서,
그 분 글을 한개 읽었는데, 참 좋은 글이 더군요.
저도 링크로 하려다가, 문득 우리나라에서는 유독 글 삭제율이 높아,
링크 끊어짐이 장난이 아니라는 생각이 들더군요.

게다가, 이명박 정부로 바뀐 뒤 인터넷 글 조지기에 들어가서, 다음도 버티다 못버티면 누울 것 같아, google docs로 만들었습니다.( 과연 한국 구글도 이런 핍박에 넘어갈지는 모르겠지만요 -_-;;;)

미네르바로 검색해 그 분 글이라고 생각되는 글들을 모조리 불펌 했습니다.
링크는 아래 입니다.

http://docs.google.com/Doc?id=d5txfk9_48zcwcmhs

http://docs.google.com/Doc?id=d5txfk9_6gg9p9hg8

이성순이,
니가 누구인지는 모르겠으나... 제발 부탁인데..
아무데나 이런거 뿌리지 마삼.
게다가, 댓글 안에다 HTML로 뿌리지도 마삼.
매너가 정말 없으삼.

그리고 이런 피라미드 하지 마삼.
인생 정말 불쌍해 보여.

할 거 없다고, 할 줄 아는 거 없다는 핑계는 대지마.
어렵지만, 편의점 알바하시는 분도 계시고,
중국 사람들 덕에 높아진 경쟁률을 자랑하는 노가다 하시는 분들도 있고,
각종 봉사 단체 업무 지원하면서 푼돈 모으신 분들도 많으셔.

좀 배워. 인생 좀 배워.

한탕하고 싶냐? 글케?

관리도구 패널을 만들어야되는 시점. 우연히 켜 놓은 메신저를 통해 대구 동생(민수)이 넌즈시 건네준 말. "형 JQuery 알아요?".  예전에 문득 자바스크립트를 이용해서 XHTML에서 객체 Query 하는 기술인 줄 알고 답했더니, 피식 웃으며(물론 소리도, 모습도 보이지 않았지만, 그런 느낌?) JQuery 기술 관련 각종 URL과 문서를 건네주더군요.
자신이 만든 사이트와 함께 JQuery를 소개 시켜준 뒤 유유히 사라졌고(1년이나 지났는데 여전히 깨 쏟아져서 깨 볶아 먹는지 원....) 전 이 새로운 도구를 바라 보며, 먼 산 바라기를 했죠. 뭘 제대로 알아야지....

다행히 API 설명된 사이트를 알려줘서, 그 사이트에 적힌 내용을 하나씩 하나씩 보기 시작했습니다.(아.. 일어로 되어 있습니다 -_-;;) 그러나 역시 똥 한바가지 찬 제 머리로는 단빡에 이해되지 않았고, 다시 삽질 모드를 발동 했죠. 일단 지금 하던 작업과 연관 지어 Javascript 도배가 예상되는 그 페이지에 하나씩 하나씩 적용해 보기 시작했습니다..

왠걸.... 그 예전 Javascript 코드가 1/3 수준으로 줄고, 그 조작도 무척이나 편해져 버리더군요. 게다가 기능은 더욱더 풍부해진.....

이제 지금까제 제가 이해한 부분을 기반으로 이 JQuery를 소개하도록 하겠습니다.  단 Javascript로 자신이 직접 무언가를 짜기 보다는 네이년이나 다움을 통해 단순 Copy & Paste 수준에 머물고 있다면, 굳이 이 JQuery 세계를 이해하려 하는 만용은 조금 자제해 주세요.. 지금 부터 할 내용은 getElementById 라는 함수를 남발하고, AJAX를 좀 하면서, HTML 엘리멘트들을 이리 저리 옮기고 있는 분에게 새로운 도구를 GET 하시는 계기 정도의 글이 될 것 같군요. ( 물론 Javascript 전혀 몰라도, 그냥 읽어보는 것도 뭐 상관은 없지만 시간 낭비지 않을까 싶네요 (笑))

먼저 JQuery를 소개하기 앞서, JQuery가 가진 몇가지 장점들 중.... 제가 감동 먹은 베스트 2를 먼저 말씀드리겠습니다. 뭐 API나 각종 기능들의 소개는 다른 블로그들을 통해서 얻으실 수 있으니깐요. ㅋ

첫번째. null 걱정이 없다!

뭐 걍 직관적으로 javascript 짜시는 분들이야... 원래 신경 안썼다고 하시겠지만, 저 같이 결벽증이 있고, 뭐든 의심하고 보는 사람에게는 엄청난 스트레스 입니다.

예를 한번 들어보죠...

var linkbutton = doucment.getElementById("forNextPage");
linkbutton.style.display = "none";

라는 코드가 있을때... 과연 저 linkbutton 가 null 일까요? 아닐까요? 당연히 있으면 null은 아니겠지만, 만일에 저 "forNextPage" 부분이 변수로 처리되서 값을 만들어서 넣는다면? 과연 항상 null 이 아니라고 장담할 수 있을까요? 만일 null 이기만 하면, 바로 자바스크립트 오류 팍 뿜죠... 그게 걱정 된다고 밑에 if (linkbutton != null )을 넣기 시작하면 점점 코드가 점점 가관의 길을 걷게 됩니다.

자... 이걸 JQuery로 한다면....

$("#forNextPage").css("display", "none");

네.. 이 한줄입니다.  $("#forNextPage")가 null인지 아닌지 어떻게 아냐구요? 절대 null일리 없습니다. 단지, $("#forNextPage") 안에 객체가 있을까 없을까 정도이지, $("#forNextPage") 자체는 null 이 아닙니다. 만일 $("#forNextPage")로 JQuery 객체가 없다고 하면, 그냥 안이 비어 있는 JQuery 객체일 뿐입니다.  그래서 .css(.....) 부분은 실행되지 않고 끝나게 되겠죠. 믿어지지 않는다구요? 뭐 일단 제가 말씀드린 3가지 장점 설명 후에 JQuery 객체에 대해 제가 이해한 내용을 언급드리죠.

두번째, 다중 선택을 한줄로!!!

만일 <div> 라는 객체를 남발한다고 하죠. 그런데 그 div를 일괄적으로 색을 변경해야 된다고 할때... 어떻게 하시나요? 물론 다양한 방법이 있지만, 저 같은 경우에는 각 div 에 id를 할당 한뒤, 그 id를 기반으로 작업을 수행합니다.

예를 들어보죠....

<div id="parent001">
    <div id="display1"> 보여줍니다.</div>
    <div id="Rdisplay1" >이건 빨간색입니다.</div>
    <div id="display2"> 보여줍니다.</div>
    <div id="Rdisplay2" > 이건 빨간색입니다.</</div>
    <div id="display3"> 보여줍니다.</div>
    <div id="Rdisplay3" > 이건 빨간색입니다.</div>
    <div id="display4"> 보여줍니다.</div>
    <div id="Rdisplay4" >이건 빨간색입니다.</div>
    <div id="display5"> 보여줍니다.</div>
    <div id="Rdisplay5" > 이건 빨간색입니다.</div>
</div>

자 위와 같은 html이 있다고 하죠. 자 XHTML의 특징이 바로 저 id라는 항목인데, id는 전체 XHTML 내에서 고유하게 할당해 주어야 합니다. 뭐 저렇게 규칙적인 것은 Server-side-script 인, PHP나 ASP 또는 ASP.NET 으로 만들면 뭐 껌입니다. (껌이 쉬운지는 잘 모르겠지만요..)

자 위의 내용을 자바스크립트를 통해 "보여줍니다" 항목에 style을 모두 파란색으로 변경한다고 하죠.

예전 제가 했던 방식에 의거하면.. 이렇게 만들어지겠죠?

for(i=1; i<6;i++)  {
      document.getElementByIdl("display" + i).style.background-color = "Blue";
}

네 위와 같이 짰을 겁니다. 그러나.. 이 결벽증 어디로 갈까요? 다시 저 eval의 결과가 null 인지 아닌지 검사해야 합니다.

for(i=1; i<6;i++) {
      var target = document.getElementById("display" + i);
      if(target != null)
          target.style.background-color = "Blue";
}

3줄 짜리가 벌써 5줄로 거의 2배가 되버렸네요. 그래도 안전하면 뭐든지.. ㄷㄷㄷ

자.. 저것을.. JQuery로 승화시키면?

$("div[id^='display']").css("background-color","Blue");

조금더 다듬는다면,

$("#parent001']").children("div[id^='display']").css("background-color","Blue");

윗 줄은 전체 document에서 div를 모두 검색하되 단, id가 display로 시작하는 것을 검색하는 것이고, 두번째 줄은 parent001을 먼저 찾고, 그 하위에 있는 구성요소 중 div에서 id가 display로 시작하는 것을 찾는 것이죠.

for에 getElementById에 그것이 null인지 아닌지 ... 전혀 없고, 그냥 한줄로 끝납니다.

결론

정말 엄청난 녀석을 낚았다고나 할까요. 동생 덕에 근좌 자바스크립트 점점 간단해 지고 있습니다. ( 물론 동료들에게는 아직 알리지 않은 내용이니, 그 분들이 제 자바스크립트 소스를 보면 암호문 같아 당혹스러워 할 지는 모르겠습니다. -_-;;;;)

일단, 간단하게 제가 느낀 감상문을 먼저 적어보았고, 그 동안 제가 해보면서 느꼈던 각종 테크닉들을 정리해서 올려보도록 하겠습니다.