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

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

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

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

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


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

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

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

관리도구 패널을 만들어야되는 시점. 우연히 켜 놓은 메신저를 통해 대구 동생(민수)이 넌즈시 건네준 말. "형 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 인지 아닌지 검사해야 합니다.

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인지 아닌지 ... 전혀 없고, 그냥 한줄로 끝납니다.

결론

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

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

A 태그(<A>) 라든가, DIV 태그(<DIV>), 또는 SPAN 태그(<SPAN>)을 이용하여 안에 각종 Text를 넣을 수 있다. 그런데, 이 Text에 대한 설명이나 말을 줄여 놓으면 그 원래 크기의 문자열을 표시하고 싶을 때가 있다.

이 때 괜찮은 방법이 바로 툴팁이라는 조그만한 노란 창이 좋다. 이것을 사용하려면, 태그 안에 title 이라는 속성 내에 값을 넣어주면 된다.

다양한 Tag 내에서 속성 값으로 title 이라는 속성 값 내에 툴팁으로 표시하는 방법이다. 현재까지 테스트된 태그로는 <A> <DIV> <SPAN> 이며 이외에도 다양한 태그들 안에서 동작가능할 것 같다.

만일 특정 테이블 안에 Text에서 툴팁이 나오게 하기 위해서는 <span title="툴팁내용">test</span>  또는 <div title="툴팁내용">test</div> 라는 형태로 넣어주면 나오게 된다.

테스트 결과 FF 3.0과 IE 7.0 에서 정상적으로 표시된다.
(FF 2.X에는 어떤지는 잘 모르겠다.)

6년 동안 제 홈페이지를 운영해오고, 여기저기 neohihd 라는 계정으로 회원가입 부터 글 작성까지 다양한 활동을 해왔죠.

그래서 한번은 다음과 같은 실헙을 했습니다.
과연 저를 나타내는 검색어에 뭐가 표시되는지 한번 보았습니다.

내가 구글을 사랑하는 이유중 하나인듯. "인도짱"을 제외한 모든 검색에 최상단에 위치해 있습니다. 물론 비인기 검색어인 인도짱이 3위에 오르고 있는 야후도 만만치 않지만, 저 검색어를 대부분 소화하는 건 구글 밖에 없는듯 싶군요. 나머지는 손으로 하는지, 특이하게 분석하는지 잘 검색은 안됩니다. 게다가 대부분의 포탈들은 통합 검색이라는 제한 요소 덕에 제 웹페이지 검색은 저 뒷전 입니다.(笑)

뭐 검색이 되든지 말든지라는 생각은 들지만, 이런거 잘 되면 나름 홈페이지 광고지 않을까 싶기도 합니다.

P.S. 그런데, 제 홈페이지는 비영리다 보니(Google AdSense도 날아가서 더더욱) 광고가 되든지 말든지 상관은 없는데 왜 이런데 연연하는지는 잘 모르겠습니다. 유명세를 타고 싶은 욕망일까요?

이 홈페이지는 벌써 운영한지 6여년이 흘러 흘러 지금까지 온 홈페이지 입니다.

2001년도 여름 즈음, 도메인을 하나 구매했습니다. hind.pe.kr.
그 당시 유행했던 pe.kr의 도메인을 하나 산 거죠.
최초에는 당시에 다니고 있던 명지대학교 객체지향 연구실에 있는 한 서버에
연결해 놓고, 제로보드와 Wiki를 설치해서 운영하고 있었습니다.
아마 그 때 즈음 친구들에게도 이런 저런 사이트를 나눠 주곤 했는데,
사이트를 제공 받던 한 친구와 미묘한 의견 대립으로 인해 완전 찟어지는
사태가 발생하기도 했습니다. 물론 그 이후로는 친구들에게 사이트 자원은
나눠주지 않았습니다. ( 딱 한명 정광선이라는 친구에게만 잠시 자원을 추가해서
나눠 준듯 싶군요)

그 당시에는 많은 실험과 실험을 반복했습니다. 잘 알지 못하는 HTML과 Javascript.
그리고 PHP 언어의 혼란 속에서 이런 저런 시도를 했습니다.
최초 이 사이트를 만든 주요 관심사는 제가 알고 배워왔던 것들을 까먹지 않기 위해서 였습니다. 때로는 메모 형식으로 때로는 길게 장문으로도 써왔던 것 같습니다.

그러다 언젠가, 학교 서버가 맛탱이가 가버렸습니다. 그거 간신히 회복하니 이번에는 교내 망 자체가 맛이 가더군요. 무제한에 가까운 자원(서버 HDD, 네트워크 트레픽 등등)의 매력은 완전히 상실된 결정적인 계기가 되었습니다. 그러나 마땅히 어디로 옮겨야 될지 판단이 서지 않더군요. 그러다, 초등학교 친구인 이선경이라는 친구가 cafe24.com의 저렴함을 알려주었고, 그 기회에 냅다 옮겼습니다. 물론 미어터지게 작은 HDD 용량(100M), 무지하게 작은 트래픽(1G? 4G?)였지만, 나만의 공간이 생기는점에 행복했습니다.

제로보드를 설치하고 내 홈페이지로써의 디자인을 한 뒤, 게시하였고, 차츰 Apache 및 PHP에 대한 이해와 함께 제로보드의 장점들도 서서히 눈에 들어오더군요.

그런데, 실제 제가 쓰는 의도는 기술 나열이라고 했으나, 자꾸 모든 컨텐츠를 게시판 별로 쪼개는게 마음에 들지 않았습니다. 더욱이 제목만 덜렁 덜렁 보이는 것도 마음에 들지 않았고요.

그러다 문득, 외국 한 사이트에서 블로그 라는 기능을 보게 되었고, 그 기능에 감동했습니다.
제목과 글이 쭉 나열되어 바로 제가 찾던 그 모습이였죠.
그러나, 이런 블로그를 개발하는데는 한계가 있었습니다. HTML이나 PHH 그리고 제로보드를 어느정도를 이해한다고 했지만, 그건 단순히 머릿속에서 깨달은 것이였고, 실제 개발이나 완벽한 수술을 위한 지식은 아니였죠. 그러다 문득 제로보드용 블로그로 제시하는 스킨을 받았고, 그걸로 업데이트하기 까지 이릅니다.그.러.나. 태생이 게시판. 게시판의 한계는 계속 되었고, 저의 불만은 점점 커졌습니다. 분명 제목과 글이 나오기는 하는데, 글은 어딘가 부족하게 출력되는 것 같고, 간혹 보이는 알 수없는 버그들과, 글이 이상하게 표시되기도해 하여, 점점 제로보드 게시판 글 작성 자체에 짜증이 물씬 물씬 오르더군요.

그러다, 테터툴즈라는 것을 우연히 보았습니다. 공개 블로그 툴이라 더군요. 초기에 각종 블로그 툴들에 마음은 있었지만, 지금껏 작성한 게시판 글들은 어떻게 해야 하나 하는 고민이 있었습니다.  그러나 다행이도 저와 같은 고민을 하신분이 있었고, 제로보드의 글을 이 테터툴즈로 이전시킬 수 있는 기능을 찾아냈고, 그 즉시 그 작업을 수행하기에 이릅니다. 쉽고 간편하더군요.

그리고 지금까지 왔습니다.

운영한지 6년. 많은 검색엔진들의 로봇이 들락 달락했으며, 종종 제 글을 찾아볼 수 있더군요.( 사실 대부분 검색에 걸리는 부분은 google쪽입니다. 우리나라 검색엔진에서는 잘 찾을 수 없습니다. ㅎㅎ)