mari.kr

네이트온 비밀번호를 입력할 수가 없어요.

마리C — Wed, 08 Feb 2012 16:15:34 +0900

네이트 개인정보 유출 사고가 일어난 후 네이트 서비스의 비밀번호를 변경하게 되었지요.
네이트는 원래 계정을 오래전 삭제했고... 네이트온만 사용하기 위해 싸이월드에 가입을 했지요.
왜냐하면... 싸이월드 계정은 내 맘대로 가입이 가능해서...

도대체 왜~ 네이트온이 회사에서 일하는데 반드시 필요한 프로그램이 됐는지 이해가 안간다...ㅠ
몇번 네이트온 삭제, 탈퇴해도 업무상 필수 프로그램이니 다시 가입...ㅠ
친구목록에는 업무에 관련된 사람밖에 없어요...ㅎㅎ

아무튼... 유출사고 초반에만 하더라도 비밀번호 변경시 특수문자 사용에 제한이 있었습니다.
점(.) 을 사용하지 못하는 제한이요... 다른 특수문자는 모르겠고요.

몇 달 지난 다음에 혹시나 해서 점을 이용한 비밀번호로 변경하니 아주 잘 되더군요.
그래서 네이트온 로그아웃후 다시 로그인 하는데....
네이트온 비밀번호 입력창에서 점(.) 만 타이핑하면 입력창에 있던 데이터가 초기화 됩니다.

즉, 비밀번호가 123.456 이라면 네이트온 비밀번호 입력창에 123. 까지 입력후 4를 누르는 순간...
초기화되는 버그지요...

네이트온측에 문의한 결과...
로그인 보안 방식이 총 1,2,3단계가 있는데... 이중 2단계 로그인시 그런 현상이 발생한다고 합니다.

뭐 저런 현상이 잘못된거다 이런 말도 없고... 그냥 2단계 로그인시 발생한다는 답변..
저런 것 때문에 네이트온 업데이트할 SK 커뮤니케이션도 아니고 메모장에 비밀번호 타이핑후 복사해서
붙여넣기로 로그인 했지요.. ㅎ

개인정보 유출로 정신 좀 차리나 했으나... 역시 네이트는 한참 멀었어요.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

짜증나는 뉴스 사이트 광고.. 리얼클릭등 제거

마리C — Sun, 16 Jan 2011 00:48:28 +0900

뉴스기사를 클릭하다 보면 깔끔한 뉴스사이트도 있지만 광고로 도배한 사이트도 있다.
신문사들은 광고 배너로 돈을 벌기야하겠지만 사용자들은 아주 짜증이 밀려온다.
그 중에서도 특정 단어 위에 마우스가 올라가면 나오는 광고들...
리얼클릭이다.
IE가 아닌 다른 브라우져들은 애드블럭이란 플러그인이 있어 광고 자체가 아예 나오지 않는다.
IE도 있긴 하지만 특별한 이유에서 사용하기 힘들다...

그래서 틈나는대로 신문사들의 광고 URL과 리얼클릭을 만들어주는 JavaScript URL을 찾아냈다.

일단 리얼클릭은 여러 사이트가 존재한다.
script.contentlink.co.kr , js.contextads.net , script.keywordlink.co.kr , js.keywordsconnect.com , realclick.co.kr 등이다.

이 정도만 IE의 인터넷 옵션 - 보안 - 제한된사이트 에서 추가해도 리얼클릭은 사라진다.

참고로 첨부 파일은 각종 사이트 광고를 제한된 사이트에 등록해논 레지스트리파일이다.

다운받고 싶으신 분들은 받은 파일을 더블클릭하면 자동으로 등록됩니다.

광고.reg

광고.reg

HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings\ZoneMap\Domains

위 레지스트리에 가면 제한된 URL이 나오니 알아서 삭제해도 된다.

하지만...죽어도 계속 나오는 광고가 있었으니 그 광고는 보통 뉴스 하단에 나오는
무슨 병원 비슷한 광고들이나 dr.광고 인가?? 암튼 그것들...

소스로 파악해 보면 mediaanchor.co.kr와 mediaharbor.co.kr 그리고 쇼핑몰 사이트인 pics.about.co.kr, sba.about.co.kr 이다..

제한된 사이트에 등록해도 죽어라 나온다. 젠장할 광고들....
선택권 조차 주지 않는 지랄같은 광고들이다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

LG XNote R405 SP71K 그래픽 카드 고장, 노트북 청소...

마리C — Wed, 02 Dec 2009 18:41:35 +0900

약...2년 4개월동안 사용하던 노트북이 갑자기 오후에

이렇게 붉은색으로 화면을 덮어 버리며 사망하셨다...
물론 다시 재부팅해도??

이런...젠장할;; 이건 뭐... 노트북을 켜도 잘 보이지 않아서 어찌 손써 볼 가치도 없다.
바로 LG서비스 센터로 고고씽... 30분을 기다린 끝에 AS 기사분 앞에 앉아 노트북 화면이 이상해요...
기사분은 전원을 키자 마자 나온 화면을 보고 바로 전원을 끈다...
그래픽카드가 하늘나라 가셨단다... ㅠㅠㅠㅠㅠㅠㅠㅠㅠ 비쌀텐데....
다행히도 그래픽카드는 무상AS기간이 3년이란다. 올레~~~~~~
그래픽카드가 가신 이유를 묻자 발열때문이란다..

노트북 우측(혹은 좌측)에 보면 통풍구가 있는데 청소를 안해서 먼지가 쌓이고 쌓여 막혔기 때문에
열이 나가지 못하고 통풍구와 가장 가까이 계시는 그래픽카드가 더위 드셨단다.
통풍구가 막히는건 쿨러도 소용없단다. 쿨러는 노트북 전체 열만 내려줄뿐....

한달에 한번정도는 통풍구를 헝겊이나 기타 물건등으로 완전히 막고 노트북 팬에 진공청소기를 밀착시켜
먼지를 제거 해줘야 한단다. 반드시 통풍구를 막아야 먼지가 나온다고...

전에 쓰던 후지쯔는 잘 넘겼는데...

노트북 청소 자주 합시다. 특히 무상 기간이 끝난 노트북은~~~

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

IE8 RC1 웹사이트 로그인(HTTPS) 안되는 문제

마리C — Tue, 10 Mar 2009 13:09:58 +0900

IE8 RC1을 설치하고 웹사이트에 로그인이 안되는 문제가 있습니다.

모든 사이트가 로그인이 안되는 것은 아니고 HTTPS를 사용하여 로그인하는 웹사이트에서 발생합니다.

주로 포털사이트나 live.com등이 HTTPS이니 자바스크립트 에러를 내뿜으며 로그인에 실패합니다.

RC1이 처음 나왔을 때는 다시 지우고 재설치도 해 보고 여러 방법을 써봤지만 실패를 하였고

우연히 Beta를 사용하던 도중 큰 맘 먹고 RC1을 다시 설치하니 아무런 문제가 없어 한,두달 잘 사용했습니다.

그런데... 오늘 일이 또 터지고 말았습니다. 로그인이 안되는 오류...

이래저래 구글링이나 MS뉴스그룹등 찾아 봐도 해결을 못하였고 액티브X나 정리하자라는 맘으로...

금융, 결제등에 사용되던 액티브X를 지우고 다시금 로그인을 하니 정상적으로 되는 것 입니다.

범인을 찾기로 하고 생각을 더듬어 보니... nProtect가 범인이였습니다.

국민은행 인터넷뱅킹을 위해서는 nProtect가 설치가 되는데.. 설치되는 액티브X가 문제가 아니라

액티브X설치시 윈도우서비스에 자동으로 등록되는 nPStarterSVC가 문제였습니다.

해당 서비스를 중지하거나 명령프롬프트의 SC명령으로 서비스를 지우거나

혹은 System32에서 "np어쩌구uinst" (제가 조금전에 지워서 확인 못했습니다.)와 비슷한 이름을 클릭하여 해당 프로그램을 제거합니다.

프로그램 추가/제거에도 있는지는 확인 못했지만 있을 것으로 예상합니다.

확인차 다시 국민은행이 친히 방문하여 지웠던 프로그램을 다시 설치하고 재부팅하니 동일한 증상입니다.

nProtect가 왜 HTTPS를 차단하는지는 모르겠지만 골치아프게 생겼습니다.

18일에 정식버전이 나온다는데 해결이 될런지는... Beta에서는 이런일이 없던 것으로 아는데 RC1이 이래도 되는건지;; ㅠ

※ 위 사항은 제 추측입니다. 해당 프로그램이 제거되었을 경우엔 발생하지 않는 문제이므로...

2009-03-31

유입경로를 토대로 볼 때 의외로 많은 분들이 IE8 로그인 문제로 검색을 하시나 봅니다.
현재 정식버전이 출시된 이후로는 위와 같은 문제가 발생하지 않고 있습니다.
좀 더 지켜봐야 알겠지만 말입니다. 혹시 정식 버전을 설치했는데도 HTTPS 로그인이 안되시는 분들이 계신가요??

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Visual Studio 2008 SP1 한글 Intellisense 문제

마리C — Mon, 23 Feb 2009 16:38:43 +0900

Visusal Studio 2008 SP1을 영어가 아닌 다른 언어로 설치할 경우 Intellisense가 영어로 나오는 버그가 있습니다.
분명 FIX가 나왔을 때 설치했을 터인데... 다시금 VS 2008을 설치하니 또 찾게 되는군요.

또 잊어버릴까봐 블로그에 포스팅. 이거 건망증이야 뭐야~

FIX: 영어가 아닌 다른 언어 버전의 Microsoft Visual Studio 2008 서비스 팩 1을 설치한 후 몇몇 지역화된 IntelliSense 텍스트가 영어로 되돌려질 수 있음

다운로드 - 한글파일을 다운로드 하면 됩니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

IE8 검색공급자 추가/수정

마리C — Thu, 19 Feb 2009 19:21:12 +0900

IE7부터는 브라우져 우측 상단에 검색창이 있습니다. 여기에 검색공급자를 추가할 수가 있는데요.
IE7에서는 사용자가 직접 URL을 입력하여 추가할 수가 있었습니다.

역시 IE8에도 검색창이 있는데 이 IE8이란 녀석은 검색공급자를 MS에서 지정한 아이들만 추가되게 만들어져 있습니다. 구글링을 자주 하기에 일단 구글을 찾아 추가를 합니다.
그런데... 구글로 검색을 하면 영문 검색페이지로 이동을 합니다. 추가한 검색공급자의 url을 보니 영어로 세팅이 되어 있네요 ㅠ

사용자가 수정할 수 없는 인터페이스로 돼있으니 곰곰히 생각해 봅니다. 저 URL이 어딘가에 저장되어 있다면??
그 값만 변경하면 될텐데... 무심코 첫 타겟이 레지스트리가 됩니다.

시작 - 실행 - regedit - 찾기

주의 - 레지스트리 함부로 건드리다가 큰일 납니다. 꼭 백업을 받으시던지 두려우면 건드리지 마세요~~

HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchScopes

여기에 가면 검색공급자들이 쭉...있습니다. 하단 키들 중 구글을 찾습니다.
우측창에 보면 URL이란 문자열값이 있는데요. 더블 클릭하여 값을

http://www.google.com/search?q={searchTerms}

바꿉니다. 그런 다음 IE8의 검색창으로 검색을 하면 한국어 검색페이지로 이동하게 됩니다.

그런데 호기심 발동... 내가 추가 할 수는 없을까??
일단 해보기로 합니다. 다른 포털들은 공급자에 이미 추가가 되어있으니(IE7에 추가된 아이들은 그대로 들고 오나 봅니다.)

타겟은 엠파스

HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchScopes 에 오른쪽 마우스 새로만들기 - 키 엠파스 혹은 아무런 값이나 입력
우측창에서 오른쪽 마우스 새로만들기 - 문자열값 추가된 문자열의 이름을
DisplayName 값은 엠파스
같은 방법으로 FaviconURL 값에는 빈값 혹은 엠파스 FaviconURL을 입력합니다.
같은 방법으로 URL 값에는 http://search.empas.com/search/all.html?z=A&q={searchTerms}&a=w&s=&f=

이렇게 하면 IE8의 검색공급자에 엠파스 항목이 보입니다. 아이콘이 돋보기로 되어있는데
Favicon값이 없으면 저렇게 되나 봅니다.

테스트 해보고 바로 포스팅하는 것이기에 문제점은 못찾았습니다. 사용하다 문제가 생겨도...
저는 책임을 못져요;;

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

국내 포털사이트 광고 도메인

마리C — Fri, 02 Jan 2009 20:30:57 +0900

국내 포털사이트 상하좌우에 나오는 광고 도메인들...
이 도메인을 IE - 도구 - 인터넷옵션 - 보안 - 제한된사이트 에 입력하게 되면...
기존 광고 영역이 하얗게 나옵니다.
*.ad.naver.com
*.ads2.msn.com
*.atdmt.com
*.dmcmedia.co.kr
*.nasads.com
*.rad.live.com
ad.empas.com
ad.news.naver.com
ad.yieldmanager.com
adver.paran.com
adz.kr.yahoo.com
amsv2.daum.net
cyad.nate.com
kr.ads.yimg.com
kr.ard.yahoo.com

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Windows Live Mail(Windows Live 메일) 실행이 안되는 문제

마리C — Wed, 24 Sep 2008 11:19:59 +0900

얼마전에 Windows Live Suite Wave3 베타버전이 나왔습니다. 뭐가 달라졌나 궁금하여 다운로드 받아서 설치를 했습니다. 이래저래 건드리다가 특정 서비스를 제거할 일이 생겨 제거를 하였는데 잘못하는 바람에 엉뚱한 서비스(메일, 메신져)가 제거되는 어처구니 없는 일이 생겼습니다.
그래서 다시 설치를 하였지요. 상황은 지금부터 시작됩니다.

Windows Live Mail(이전 정식버전)을 사용중...
Windows Live Suite Wave3(메일 서비스) 설치 후 제거
Windows Live Mail(이전 정식버전) 이나 Live Suite Wave3 설치 후 실행
Windows Installer("Windows Live Mail 구성하는 동안 잠시 기다려 주십시오.")가 나온 후 사라짐
Windows Live Mail(Suite Wave3포함) 실행 불가

Live 지원센터에 문의를 하였지만 뾰족한 답을 얻을 수가 없었고 지원센터 측에서 현재 제 시스템 환경(시스템 정보, 이벤트로그)등을 담은 파일을 요청하였습니다.
그래서 시스템 정보를 파일에 저장하고 이벤트로그를 살펴보더중 이상한 점이 발견되었습니다.
Windows Live Mail 실행시 아래와 같은 2개의 경고 이벤트 로그가 생성이 됩니다.

구성 요소 '{5B7A884B-05AC-4645-8CC6-FFA1063BE62F}'을(를) 요청하는 동안 제품 '{721DD9DA-F0BC-4DE5-9674-BB94F88C1453}'의 기능 WinMailFeat을(를) 검색하지 못했습니다.
제품 '{721DD9DA-F0BC-4DE5-9674-BB94F88C1453}', 기능 'WinMailFeat', 구성 요소 '{7E005D82-ED7A-445F-AD8F-ABCCA42ACBAF}'을(를) 검색하지 못했습니다. 리소스 'HKEY_LOCAL_MACHINE\Software\Classes\WLMail.Url.Mailto\'이(가) 존재하지 않습니다.

Live Search와 Google를 통해 검색을 하였고 예전에 Live Beta시절에 올라왔던 글인듯 한데 혹시나 하는 마음에
글에서 나오는 방법대로 실행을 하여 성공하였습니다.

방법은...

일단 원인은 레지스트리키(HKEY_LOCAL_MACHINE\SOFTWARE\Classes\WLMail.Url.Mailto)의 사용권한 문제인 것 같습니다.

위 레지스트리키를 액세스하면 에러가 나옵니다. 그리하여 사용권한을 수정할 수 있게 Ps Exec이란 것을 다운 받아 실행합니다.

psexec.exe -s -i regedt32

그럼 레지스트리창이 열리는데 위 레지스트리키 이름을 선택한 후 오른쪽 마우스를 눌러 "사용권한" 을 클릭합니다.

그룹 또는 사용자에 보면 시스템에 로그인한 계정이 없을 겁니다. 그 계정을 추가해주고 권한을 "모든권한"으로 줍니다.

그리고 다시 메일 프로그램을 실행 하면 정상적으로 실행이 됩니다.

참고 http://andystechfun.spaces.live.com/blog/cns!16FB6442242CEAB7!7278.entry
아무래도 베타버전이라 이런 현상이 발생하는 것 같네요.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Daum MY홈, 실시간 이슈 검색어 인코딩 버그

마리C — Wed, 16 Jul 2008 20:07:30 +0900

다음에는 MY홈 이라는 서비스가 있습니다. 개인이 필요한 콘텐츠를 추가하여 자신만의 페이지를 만드는 서비스이죠. 포털들의 메인 화면을 보면 나에게 필요 없는 정보들이 많기도 하고 어느 누군가는 모두 필요 할 수도 있겠지요. 구글이나 라이브에도 다음의 MY홈과 같은 서비스들이 있습니다.

저는 뉴스를 주로 보기때문에 즐겨찾기에서 "다음"을 클릭하면 다음 계정으로 자동 로그인 하여 MY홈으로 이동합니다. 내가 보고 싶은 뉴스만 모아 놓고 메일, 검색, 날씨등 편리하게 사용하고 있습니다.

이 편리한 서비스의 콘텐츠중 실시간 이슈 검색어라는 콘텐츠도 있습니다.
그런데 이게 처음 접속한 시점에는 한글이 잘 나오다가 한번 새롭게 이슈 검색어를 뿌려줄 때는 한글이
모두 깨져서 보입니다.

좌측이 첫 접속시 나오는 이슈 검색어 부분이고 우측이 새롭게 이슈 검색어를 경우 입니다.
이 원인을 어느 정도 살펴본 결과 MY홈의 인코딩은 UTF-8이지만 이슈 검색어의 페이지로 이동을 해 보니
인코딩이 한국어로 돼있습니다.
아마도 처음엔 UTF-8로 이슈 검색어를 불러오고.. AJAX로 새로 갱신 할 때는 한국어로 받아오는 듯 하네요.

이것도 좀 이상한 것이 XP IE6에서는 아주 날 나옵니다. 제가 지금 사용하는 PC는 비스타에 IE7인데요..
확인 결과 파이어폭스에서는 정상적으로 나오구요(디잔이 좀 깨지긴 하지만), 오페라는 아예 MY홈에 접근이 안되네요. 이상하네... 결과적으론 비스타의 IE에서만 이런 오류가 나는 것 일까요?

XP SP3 IE7에서도 같은 증상이군요...저거 고치는게 그렇게 어려운가;;

다음측에 문의를 했지만 기술적인 문의라 그런지...시간이 좀 걸린다고 합니다.

※ 10월 초(정확히 알지못함)에 수정된 것으로 확인 됐습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Visual Studio 2008 Themes

마리C — Wed, 16 Jul 2008 16:30:28 +0900

텍스트 편집기나 개발 툴들을 보면 대부분 흰바탕에 검정색 폰트를 사용합니다.
가끔 이 기본 색들이 실증이 나거나 눈의 피로도를 좀 줄이기 위해 색을 변경하기도 합니다.

저는 명령 프롬프트(cmd.exe)의 색도 변경하여 사용합니다.
그런데 오늘 인터넷 카페에 들렀다가 Visual Studio의 색을 변경하는 글이 올라와 관련 링크를
돌아 다녔습니다.
http://www.hanselman.com/blog/VisualStudioProgrammerThemesGallery.aspx
이곳에 보시면 여러 테마들이 나오는데 그나마 처음에 나오는 Oren Ellenbogen's Dark Scheme가
제일 괜찮아 보이더군요. 노트북 LCD가 반사광이라 해야 하나? 있는 편이라 검정색은 좀 눈이
부신 느낌이 들더군요. 그리하여 Oren의 블로그 에 가서 다운로드 받았습니다.
포스트 제목이 2005를 설정하는 것인데 2008도 되려니 하고 자연스레...ㅋ

이제 설정하는 방법을 알려드려야지요...
영문 버전의 VS는 http://blogs.msdn.com/charlie/archive/2008/05/26/ide-color-schemes-for-the-vs-editor.aspx 여기서 확인하시구요.

한글의 경우 "도구" - "설정 가져오기 및 내보내기" - "선택한 설정 가져오기" - "아니오, 새 설정을 가져와 현재 설정을 덮어 씁니다." - "찾아보기" - 다운받은 vssettings확장자 파일을 선택합니다.
그러면 아래와 같은 화면이 나오는데 "글꼴 및 색" 만 선택하여 마침을 누릅니다.

모두 선택할 경우 이전 VS의 설정이 변경될 수 있습니다. 그런 이유로 미리 현재 설정을 내보내기로 저장하는 것도 좋은 방법입니다.

세팅을 마치면 뭔가 좀 부족하고... 폰트 종류나 키워드등의 색이 맘에 안듭니다.
그래서 도구 - 옵션에 들어가 색을 아래와 같이 변경해 봤습니다.

폰트는 비스타를 사용하기 때문에 가장 맘에 드는 맑은 고딕입니다.

Dark_20080716.vssettings

Visual Studio 2008 Color 설정 파일

제가 설정한 파일을 첨부하겠습니다.

가만 보니 Scott Guthrie 횽님도 위의 테마를 사용중 인듯 하네요..

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

INPUT file 찾아보기 버튼 이미지로 바꾸기

마리C — Sun, 29 Jun 2008 02:09:27 +0900

웹 페이지에서 파일을 업로드 하기 위해 INPUT태그의 file을 사용합니다.
그런데 이 태그가 정말 스타일리쉬 하지 않아요.
예전에는 찾아보기 부분을 이미지로 바꾸기 위해 file태그를 숨기고 자바스크립트의 click 명령을 사용하였습니다.
이 방법이 처음엔 아주 잘되는 듯 하였으나 안 된다던 브라우져가 많이 나와 사라져 버렸지요.
이제 다른 방법을 사용하여 찾아보기를 없애고 이미지로 바꾸는 것을 알려드리겠습니다.
사실 이 방법은 많은 웹에디터에서 사용하는 방법입니다.
방법을 설명드리면...

div 태그 안에 file 태그를 위치시킵니다. div 태그안에 그냥 위치한다면..
<div style="width:300px;height:30px;border:solid 1px red;overflow:hidden;">
<input type="file" id="fileid" name="fileid"/>
</div>

만약에 div의 width값이 30px이라면 어떻게 될까요?

위처럼 file태그의 좌측 일부만 나오게 됩니다. 원래 file태그는 width 속성이 없기때문에 조정해도 소용없습니다.
하지만 IE에서는 width 속성도 적용이 됩니다. 표준을 따라야 되겠지요?
찾아보기 버튼을 누르기 위해서는 찾아보기 버튼이 div안에 나타나게 해야 되겠지요.

이제 찾아보기 버튼 대신 이미지를 위치시켜야 하는데요. 이미지대신 일단 "찾기"라는 글씨를 사용하도록
하겠습니다. 그냥 안쪽 div 태그 옆에 <font id="fileid2" style="cursor: pointer">[찾기]</font> 넣습니다.

[찾기]

버튼 뒤에 가려져서 안보이는데요...이제 저 찾아보기 버튼을 사라지도록 하기 위해 opacity 값을 0으로
줍니다. 그러면 안쪽 div는 투명하게 처리가 됩니다. opacity 지정방법이 ie와 다른 브라우져가 서로
다릅니다. 그래서 두개의 코드는 style속성에 넣습니다.
FILTER: alpha(opacity=0); opacity: 0

[찾기]

이런 방법으로 찾아보기 버튼 대신 이미지를 사용할 수 있겠지요?
찾기 위에 마우스를 올려도 cursor이 변하지 않습니다. cursor:pointer; 스타일이 적용이 되면 좋으련만...
IE는 pointer가 적용이 됩니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

태오 사이트 10주년 쑈미나~!!

마리C — Mon, 09 Jun 2008 19:03:00 +0900

등록이 마감되었습니다.
국내 최고의 ASP.NET 개발자 커뮤니티인태오닷넷(국제닷넷협회 회원)에서 2008년 6월 탄생 10주년을 맞아 기념 세미나를 진행합니다. 이 행사는 모든 개발자에게 무료로 제공되며, 평소에 듣기 어려웠던 노하우를 이야기하는 세미나로 구성될 예정입니다.

장소 : 건국대학교 새천년관 대강당 (300석)
일시 : 2008-07-05 13:30

*** 사전 등록하신 분들 중 행사일날 선착순 200분께 10주년 티셔츠 및 기념품을 드립니다 ***
*** 사전 등록하신 분들 중 행사일날 선착순 50분께 고급 뱃지(태오 로고)를 드립니다 ***

상기 사은품은 협찬사의 사정에 따라 변경 혹은 취소될 수 있습니다

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

5GB 메일 + SMS 300건... 그렇지만 POP3는...??

마리C — Sat, 31 May 2008 08:57:00 +0900

국내 3대 포털중 하나... 최하위의 인기를 달리고 있는 파란이라는 곳이 있습니다.(순전히 갠 적인 생각;;)

일전에 인기가 없어서 파리 날린다느 표현으로 전면 개편을 했었지요..솔직히 잘 안들어가서 뭐가 바꼈는지 잘 모르겠네요...

제 직업은 개발자인데 주로 xx쪽 일을 하게 됩니다. xx 내부 네트웍 환경에서 웹메일을 사용하려면 골치 아픕니다.

왜냐하면 xx와 관련있는 파란을 제외하고 나머지 웹메일들의 메일쓰기가 안 됩니다. 내부에서 차단을 하는 것이지요..

몇년 전 일인데 지금도 그렇다는 얘기가 들리긴 합니다.(<-- 지금은 xx에 없다는 걸 의미 하네요;;ㅎ)

그래서 어쩔 수 없이 파란에 회원가입을 하고 파란 메일을 잘 썼습니다. 그때 당시 용량이 1GB였습니다. 네이버나 다음은 아니였는데...

그렇게 메일이 쌓이고 쌓이고...xx에서 나와 파란메일을 안 쓰고 다른 메일 혹은 개인 도메인으로 메일을 사용하려고 맘 먹고

파란에 있던 보관된 메일을 POP3로 받으려 하였습니다.

허걱~!! 파란은 POP3와 SMTP가 지원이 안 된다는 안내문이 있습니다. 서비스 받으려면 돈내랍니다.

SMTP야 그렇다 치고 POP3도 지원 안 해주는 메일이 있나 싶기도 하고 혹시..정말 혹시나 직원의 실수로 예전에 있던 글인데

안 지웠나 싶어 파란에 문의를 한 적이 생각이 나네요... 지원하지 않는 이유는 스팸~~ 그렇다고 파란에 스팸이 전혀 안오느냐..

그건 아니지요. 옵니다. 너무나도 중요한 메일이라 하루 이용료를 내고 POP3를 이용하여 메일을 모두 받았습니다.

하지만 파란으로 메일은 계속 오게 되었고... (다른 메일로 보내달라 말했는데 계속 보내주시네요;; ㅡㅡ)

다시 한번 정리하려 했는데 너무나도 돈이 아까웠습니다. POP3때문에 돈을 내야 하다니...

파란에 문의해도 안 된다니 어쩌겠습니까... 불편하면 고객이 떠나야지요... 눈물을 머금고 돈을 주고 받으려 했지만

그냥 메일을 내려받기 해서 파일로 보관하고 있습니다.

그리고 과감하게 "파란 회원 탈퇴" 를 눌러 버렸네요... 제목 처럼 파란 메일 광고를 보니 용량 5GB에 SMS 300건

SMS는 잘 모르겠고... 용량 5GB .. 이용량을 정말 알뜰하게 꽉 채워서 사용하는 사람이 몇이나 될런지 포털중 최고 용량을

제공 해주는 것도 아니면서... 이것저것 다 때려치고 메일의 기본인 POP3나 지원해주는 파란이 되길 바랍니다.

전 단순하게도 메일 때문에 포털이 싫어집니다. 첨에 다음이 그랬고...lycos, nate(얘는 네이트온이 싫어서...), empas(요건 자연스레

잊혀졌습니다.) 이번엔 파란이 그렇고.. 많은 구설수에 오르고 있는 네이버는 아직까지 별로 없네요. 그냥 청구서 메일로 사용중;;

어쨌거나 저쨌거나 "파란이여 POP3만이라도 남아있는 회원들을 위해 제공해 주셔욘~~~"

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

윈도XP SP3 설치하면, IE 7 삭제 불가능???

마리C — Fri, 09 May 2008 04:13:00 +0900

오늘 IT 뉴스를 보니 "윈도XP SP3 설치하면, IE 7 삭제 불가능" 이라는 제목이 눈에 띄어 클릭을 해 봤습니다.

왜냐하면 제가 이 기사를 보기 바로 직전에 IE7을 삭제했기 때문입니다. 물론 SP3가 설치된 컴퓨터 입니다.

기사의 핵심 내용은 IE7을 설치한 후 SP3를 설치한 컴퓨터에서 IE7을 삭제할 경우 예전의 IE6(아마도 SP2 혹은 그 이전의 IE6??)으로 돌아가게 된다는 말인듯 한데... 이 예전의 IE6이 보안상 안 좋지만 SP3에는 새로운 IE6(보안업데이터등이 적용된)이 포함되어 있다고 합니다.

그런 이유로 SP3가 설치된 컴퓨터에서 "프로그램 추가/제거"를 보면 IE7이 있긴 하지만... 삭제를 할 수 없도록 삭제 버튼이 없다고 합니다.

위 기사의 내용을 보면 삭제가 불가능 하다는 건지... 꽁수등으로 삭제는 가능하나 그럴경우 예전 IE6으로 돌아가기 때문에

보안상 안 좋으니 SP3를 먼저 삭제한 후 IE7을 삭제하고 다시 SP3를 설치하라는 건지...

제가 보기엔 후자의 내용을 보입니다.

저도 프로그램 추가/제거에서 삭제할 수 없어서 방법을 찾기 시작했습니다.

그 방법을 알려드리고자 글을 써 봅니다.

먼저 기사의 내용에서 권하는 방법은

SP3가 설치되지 않은 컴퓨터
- 제어판 - "프로그램 추가/제거" - IE7 제거 - SP3 설치
SP3가 설치된 컴퓨터
-제어파 - "프로그램 추가/제거" - SP3 제거 - IE7 제거 - SP3 설치

이렇습니다. 굳이 IE7을 계속 사용하려는 사용자는 위 절차가 필요 없겠죠...

저야 개발자다 보니 여러 브라우져에서 테스트를 해야 하기에 IE6도 필요하긴 했지만 일반 사용자는 IE6이 불필요할 수도 있겠죠..

제가 삭제한 방법입니다. 아주 간단합니다.

C:\Windows\ie7\spuninst 로 이동합니다. 거기에 있는 파일들 중에 " spuninst.exe " 를 더블 클릭합니다.

그러면 IE7삭제가 진행이 되고 실행 완료 후 재부팅하면 IE7삭제가 완료됩니다.

재부팅 하자마자 윈도우즈 업데이트가 IE7 업데이트를 알려주네요. 과감히 체크 해제하고 "다시 묻지 않음"을 체크한 후 닫으면

더이상 물어보지 않습니다.

기사에는 IE8 베타도 언급하고 있는데 이는 테스트 해보지 못했습니다.

설마 제 컴퓨터만 됐을리는 없겠죠? ㅋ

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

CSS의 Sprite 기능

마리C — Fri, 21 Mar 2008 08:12:00 +0900

얼마전에훈스님 블로그에서넥슨 사이트의 성능튜닝 - #3 HTTP 요청 줄이기라는 글을 보았습니다.

글 내용중에 HTTP요청을 줄이기 위한 하나의 방법으로 CSS Sprite 라는 기능을 설명하셨는데

그냥 보고 넘어가다가 태오사이트에서 어떤 분이 구글 메인페이지 하단의 아이콘들의 움직임을 궁금해 하시기에 저도 한번 테스트 해보기로 맘 먹고 코드를 분석하기 시작했습니다.

CSS Sprite 기능을 구글의 경우로 설명을 드리면 구글 하단에 쓰이는 이미지를 보면 하나의 통 이미지 입니다.

이 이미지를 해당 div의 background로 넣고 position의 값을 변경하면 원하는 부분의 이미지 즉 메일, 캘린더, 노트 부분만 나오게 하는 기능입니다.

그래서 IE Developer Toolbar를 이용하여 그 부분의 스타일과 HTML 코드를 보니 마우스를 올리는 순간
마우스가 가르키는 div style의 position값을 setInterval로 변경 해 주는 방법으로 보였습니다.

그 방법으로 간단하게 코딩을 해 봤습니다. 아래의 소스를 복사해서 테스트를 해 보세요.

이 기능을 모르셨던 분들은 언젠간 유용하게 사용하실 수 있겠죠? ^^;

<styletype="text/css">

#gm{

width:52px;

height:37px;

background:url(http://www.google.co.kr/ig/f/JB08UxZqEXw/intl/ALL_kr/svc_sprite_all.gif)no-repeat0px0px;

cursor:pointer;

}

</style>

<scripttype="text/javascript">

<!--

varnum=0;

varinterVal;

functionstartSprite(bol)

{

num = (bol ? 0 : -312);

interVal = setInterval("_sprite("+ bol +")",70);

}

function_sprite(bol)

{

document.getElementById("gm").style.backgroundPosition = num +"px 0px";

num = (bol ? num-52 : num+52);

if(num < -312 || num > 0)

clearInterval(interVal);

}

//-->

</script>

<divid="gm"onmouseover="startSprite(true);"onmouseout="startSprite(false);">

</div>

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

파이어폭스, 오페라에서 레이어가 플래시 뒤로 숨는 문제...

마리C — Thu, 20 Mar 2008 00:39:00 +0900

파이어폭스나오페라로 웹사이트를 이용하다 보면 레이어가 플래시 뒤로 숨어버리는 경우를 종종 발견합니다.

물론 IE에서는 제대로 표현이 됩니다.
레이어의 z-index속성 값을 높여도 소용 없고... 평소에 IE에서 잘 되니 문제 없이 그냥 넘겨버린 제가 미워요;;
앞으로는 제대로 테스트를 해 봐야 겠습니다.

해결 방법은

object 태그에는
<param name="wmode" value="transparent">

embed 태그에는
<embed wmode="transparent" ...

이렇게 추가를 하면 해결 됩니다.

앞으로는windowless와 windowed 문제가 없어지길 바랍니다.

사실 이 글은 나중에 혹시 잊어 버릴까 염려되어 간단하게 남겨 봅니다. ㅋ

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

JavaScript replace 함수 오버라이딩

마리C — Wed, 19 Mar 2008 00:04:00 +0900

요즘 들어 JavaScript의 문법들이 다양하고 어렵다는 걸 알게 됩니다.
아무래도 여러 자바스크립트 라이브러리나 ajax의 활성화등이 이유가 아닌가 싶습니다.
저도 개발하면서 조금이라도 복잡한 로직을 요하는 기능이 있다면 가차 없이 함수로 따로 만들고 그것을 불러서 사용합니다.

예를 들면, 아래의 함수는 select박스(DropDownList)의 모든 option을 제거하는 함수입니다.
clearOptions =function(_arg)
{
var_obj =document.getElementById(_arg);
if(typeof(_obj) != "undefined")
{
  while(_obj.options.length> 0)
  {
   _obj.remove(0);
   if(_obj.options.length== 0)
    break;
  }
}
};

뭐... JavaScript에서 저런 기능을 아예 지원해주면 좋겠지만 있을 법 한데 분명 있을 것 같은데 없는
그런 기능들이 있습니다. 바로 trim, ltrim, rtrim 등...
다른 언어로 개발해 보신 분들이라면 아시겠지만 좌,우 공백을 제거해주는 함수죠.
왜... 없을까요? 물론 정규식을 이용하여 replace함수를 이용하면 가능해 집니다.
또, 이 replace함수도 문제 입니다. 보통 다른 언어에서는 replace(찾을값, 바꿀값) 이렇게 하면 해당 문자열에
있는 모든 값들을 찾아서 값을 변경하는데 JavaScript의 replace함수는 그렇지 않습니다.
varstr = "abcabac";
alert(str.replace("a","A");

이렇게 하면 맨 처음 나오는 a만 A로 변경이 됩니다. 즉, 처음 나오는 찾고자 하는 값을 바꾸고 끝입니다.
그래서 저 replace함수도 정규식을 사용해서 이용하는 경우가 많습니다.

str.replace(/a/g,"A");

a라는 값을 처음부터 끝까지 찾아서 A로 바꿔라 하는 명령입니다. 정규식은 /패턴/flag 형식으로 사용하는데요.
/g라고 하면 패턴을 전역 검색을 하라는 의미가 됩니다.
http://koxo.com/lang/js/object/RegularExpression.html요기를 참고 해 보세요.

자.. 이제 원하는대로 됐습니다. 그러나 문제인 것이 매번 replace를 쓸 때 마다 정규식을 계속 타이핑을 해야 합니다.
위에서 예제로 제시했던 clearOptions처럼 함수로 만들어서 사용해도 되지만 JavaScript의 prototype을 이용하면
JavaScript의 기본객체의 함수나 속성을 정의하거나 재정의 할 수 있습니다.

String은 JavaScript의 기본객체이므로 저 replace함수를 prototype을 통해 재정의 할 수 있지만
그렇게 할 수 없지요...왜냐 아래의 예문을 보세요.

String.prototype.replace = function(_findValue, _replaceValue) {
return this.replace(new RegExp(_findValue,"g"), _replaceValue);
};

왜 그럴까요?? 실행을 해보시고 생각을 해 보세요.

결과를 말씀드리면 String객체의 replace함수를 재정의하기가 어렵습니다. 재정의하는게 아니라 replaceAll이란
이름으로 새로운 정의를 하여 사용하면 문제가 없겠죠..

아래는 위에서 설명한 방식으로 생각하면 나올 수 있는 trim, rtrim, ltrim 함수 입니다.

String.prototype.trim = function() {
    return this.replace(/(^ *)|( *$)/g, "");
};
String.prototype.ltrim = function() {
    return this.replace(/(^ *)/g, "");
};
String.prototype.rtrim = function() {
    return this.replace(/( *$)/g, "");
};

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Security and Ajax.NET Professional

마리C — Tue, 30 Oct 2007 19:53:00 +0900

출처 :Michael's Blog

Security and Ajax.NET Professional

PostedFriday, May 12, 2006 3:51 PMbyinteractive

I have written a short example about how to use web forms security with Ajax.NET Professional. The example (C# and VB.NET) is included in the latest version available athttp://www.ajaxpro.info/. Discuss the security.aspx example atGoogle groups. (Update: there are about 2.500 members reading and writing posts!!!)

See this example:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Security.Permissions;

public partial class SecurityCS : System.Web.UI.Page
{
[AjaxPro.AjaxMethod]
[PrincipalPermission(SecurityAction.Demand, Role = "Admin")]
public static string AdminMethod()
{
return "Hello Admin!";
}

protected void Page_Load(object sender, EventArgs e)
{
// Register Ajax.NET methods from this class
AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxPro.Services.AuthenticationService));
AjaxPro.Utility.RegisterTypeForAjax(typeof(SecurityCS));
}

}

The AuthenticationService lets you sign in and out directly from JavaScript code:

If you then access a AjaxMethod without the needed security rights you will get an SecurityException.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

SBS Sliverlight 서비스...

마리C — Wed, 03 Oct 2007 02:21:00 +0900

SBS가 얼마전Sliverlight로 동영상 서비스를 한다는 소식을 접하고 오늘 RSS 다른분의 내용을 참고하여 방문해 보았습니다.

정말 죽이는군요...ㅋ 한번 둘러보시려면 아래 주소를 클릭하고 이쁜 전지현 언냐 사진 우측 하단의 NView 보기를 클릭하세요...

Sliverlight가 설치돼 있지 않으면 다운로드 페이지로 가니까...미리 다운 받고 설치하셔서보세요...

http://news.sbs.co.kr/section_news/news_read.jsp?news_id=N1000316393

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Windows Vista에서 듀얼모니터 구성시 화면 깜빡이는 증상

마리C — Thu, 16 Aug 2007 18:54:00 +0900

노트북을 이용하시는 분들중에는 외부모니터와 연결해서 듀얼모니터 구성으로 사용하시는 분들이 계실겁니다.

저도 얼마전까지는 이전에 사용하던 노트북(Windos XP)과 LCD모니터를 연결해서 사용하다가 새로 구입한 노트북으로 연결하려고

케이블을 꽂았습니다. 그러나... 화면이 계속적으로 깜빡이고 제대로 잡힐듯 하다가 다시 깜빡이고 그래픽 설정 / 디스플레이 설정에서 아무리 잡아도 Vista가 지 맘대로 구성하는 것 입니다. 다른 Vista사용자는 잘 사용하고 있는데 나만 왜 이럴까... ㅠ

노트북 제조업체측에 문의했습니다.

며칠 후 답변을 받았는데요... 저 뿐만 아니라 아니, 타 노트북중 Vista를 사용하는 이용자들도 그런 현상이 있다는 것 입니다.

결론은 TMM이라는 Vista의 기능때문인데요. 이 TMM이 윈도우가 로딩되고 시작이 되는데 TMM이 Display와 System을 Refresh하기 때문이랍니다. 이 기능을 사용하지 않으면 그러한 깜빡임 증상이 없어진다고 하네요.

기능 제거 방법

시작 > 내 컴퓨터(우측 마우스) > 관리 > 작업 스케줄러(더블 클릭) > 작업 스케줄러 라이브러리(우측 마우스) > 실행 중인 모든 작업 표시 >TMM(작업끝내기/사용안함)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Measuring Element Dimension and Location

마리C — Thu, 19 Jul 2007 21:54:00 +0900

HTML Element의 위치 정보를 알아내는 속성이 여러가지가 있는데 이 속성들이 브라우져에서 어떤 위치인지 혹은 어디부터 어디까지인지

종종 헷갈리는 경우가 있는데요 아래의 내용을 보면 쉽게 이해할 수 있을 것 같아 MSND 내용을 옮겨 봅니다.

출처 -MSDN

Measuring Element Dimension and Location

The following section is designed to help Web authors understand how to access the dimension and location of elements on the page through the Dynamic HTML (DHTML) Object Model.

Understanding Properties That Measure Element Dimension and Location

The diagrams illustrated in this document represent different DHTML Object Model properties for the same page. The sample page contains adivelement that is relatively positioned on the page. Since theoverflowattribute of thedivhas been set toscrolland it contains more content than can be displayed within its limited client area, scroll bars are displayed.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Vista에 Oracle Client / ODP.NET 설치하기

마리C — Wed, 11 Jul 2007 01:50:00 +0900

컴퓨터의 OS가 비스타인 경우Oracle을 설치하려고 시도하면 에러가 납니다.

Oracle사이트의 링크를 거치고 거쳐Oracle Client 10g/ODP.NET 10g설치에 성공을 하여 설치 팁을 알려드릴까 합니다.

아래의 방법으로 시도를 해보세요.

1. Oracle Client를 다운로드 받습니다.(다운로드 후 압축풀기 - 예전에 압축을 푼 경로에 한글이 포함되면 에러가 났었는데 지금은 모르겠네요. 제 경우 한글이 포함이 안되있어서 일부러 포함시켜 보진 못했습니다.)

2. 압축 푼 폴더에서 setup.exe를 실행시키고 설치를 진행합니다.

(옵션 선택은 개개인의 환경에 맞춰서 설치를 하시면 됩니다.)

--여기까지는 무난하게 설치가 됩니다.

다음은 ODP.NET 설치입니다.

ODAC라는 이름으로 프로그램 설치 파일이 제공이 되는데요. 최신 버전으로 다운을 받아도 설치시 에러가 납니다.

일단 ODP.NET을 다운로드 받는데요. VS.NET의 add-in 툴을 같이 설치하려면

Oracle Developer Tools for Visual Studio .NET with ODAC 10.2.0.2.21

아니라면ODAC 10.2.0.2.21을 다운로드 받고 다운로드 받은 파일을 실행합니다.

실행하면 다운로드 받은 파일이 위치한 곳에 두개의 폴더(install/stage)가 생성됩니다.

일단 여기까지 했다면 다음은 아래의 방법으로 시도를 해보세요.

1. 명령프롬프트창(cmd.exe)를 열고 Oracle이 설치된 경로로 이동합니다.(기본적으로 설치를 하면 D:\oracle\product\10.2.0\client_1\oui\bin 로 이동하시면 됩니다.)

2. 명령프롬프트창에서 다음 명령을 실행합니다. setup.exe use_prereq_checker=false

3. 위 명령을 실행하면 창이 하나 더 열리고 명령 실행 후 Oracle설치 화면이 나옵니다.

4. 경로를 선택하는 부분에서 찾아보기를 클릭하고 위에서 생성된 폴더(ODAC파일 실행후 생성된 폴더) stage로 찾아가 products.xml을 선택하고 설치를 실행하면 에러없이 설치가 됩니다.

설치 화면을 캡쳐했으면 좋았을텐데 그러지 못해 아쉽군요. 캡쳐를 위해 제거하고 설치하기는 좀....ㅋ

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

element의 childNodes는 왜 브라우져마다 다른가...

마리C — Mon, 02 Jul 2007 23:31:00 +0900

웹 표준이 점점 당연시 되면서 이제는 IE로만 테스트하는 것이 아니라 여러 브라우져로 테스트를 하게 됩니다.

이전에는 웹 표준이 있음에도 불구하고 대부분 IE에서만 동작하면 개발이 잘 된 것으로 판단을 했지요...

물론 지금도 기업에서 사용하는 웹 애플리케이션의 경우 대부분 IE에서 동작하면 만사 OK입니다.

저도 대부분 아니...100% 개발 애플리케이션이 기업용이라 IE에서만 동작하면 개발하는데 지장이 없지만 웹 개발자의 가다가 있지요...

IE와 더불어 사용자가 늘고 있는 Firefox나 Opera같은 브라우져로 나름 테스트하며 여러 브라우져에서 동작하도록 개발하고 있습니다.

safari는 아직 버그등의 문제, 한글화 문제등으로 제외했습니다.(사실...개발자 최대의 적~!! 귀차니즘 때문이겠죠;;)

개발을 하다 보면 자바스크립트를 많이 사용하는데요. Table이나 계층적인 Element구조에서 최상위 Element부터 하위 Element까지

탐색하고 각 Element의 정보를 얻거나 다른 작업을 해야 하는 경우가 자주 발생합니다.

Table 같은 경우는 document.getElementById(TableElementID).rows나 cells로 정보를 쉽게 구할 수 있지만 Table Element가 아닌

다른 Element 혹은 Table Element를 rows나 cells가 아닌 childNodes로 제어를 해야 한다고 치면...

해당 Element의 childeNodes의 length를 구하고 그만큼 반복하며 제어를 하겠지요...

그런데 이상하게도 각 브라우져마다 childNodes의 length가 다릅니다.

어찌 된 일인지 어떤 것이 표준에 맞게 Dom구조로 파싱을 하는 것 인지 모르겠네요...

IE에서는 무조건 하위 노드(element)갯수가 childNodes의 length가 됩니다.

아래의 소스에서 div1의 하위 노드 갯수는 2가 됩니다. 이것이 흔히 생각하는 것이 되겠지요..저만 그런가 ㅡㅡ;;

하지만 Firefox에서는 결과가 다릅니다. div1의 하위 노드 갯수는 5가 나옵니다. 왜 그런지 Firefox의 Dom Inspector로 살펴보니

소스상에서 각 노드(element)마다 공백/엔터가 존재하면 이것을 하나의 element인 Text Element로 간주하게 됩니다.

이 TextElement는 element에 있는 텍스트 값이 됩니다.

<div>가나다</div> 여기서 "가나다"가 Text Element가 되는 것이며 저 div Element의 하위 노드가 되는 것이지요..

IE와 Firefox에서 Dom구조를 보여주는 툴을 이용하여 아래의 소스를 본 화면 입니다.

그나마 IE와 Firefox는 양반입니다. IE는 노드사이의 공백/엔터는 무시합니다. Firefox는 노드사이의 공백/엔터도 하나의 element로 간주합니다. 그러나 Opera의 경우 아래 소스에서 div는 노드사이의 공백/엔터는 하나의 element인데 Table의 경우 무시합니다.

어떤 브라우져가 맞는 것 일까요?

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>New Document</title>

</head>

<body>

<divid="div1">

<divid="div2">

div2

</div>

<divid="div3">

div3

</div>

<tableid="table1"cellpadding="5"cellspacing="1"border="1">

<tr>

<tdstyle="background-color:Gray;color:White;">TD1</td>

<tdstyle="background-color:Gray;color:White;">TD2</td>

</tr>

</table>

</body>

</html>

<scripttype="text/javascript">

<!--

alert("div1의 자식노드 갯수 : "+ document.getElementById("div1").childNodes.length);

alert("table1의 자식노드 갯수 : "+ document.getElementById("table1").childNodes.length);

alert("table1의 Row 갯수 : "+ document.getElementById("table1").rows.length);

//-->

</script>

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

AJAX.NET Professional - Table에 결과 출력

마리C — Thu, 28 Jun 2007 00:34:00 +0900

이전 AJAX.NET Professional 포스트에서는 기본적인 사용 방법에 대해서 설명해드렸는데 이번에는 조금 수준 높은?? 방법에 대해 설명드릴까 합니다.

버튼을 클릭하면 데이터베이스에서 데이터를 받아 오고 이 데이터를 HTML의 Table태그에 출력하는 방식입니다.

물론 이것을 실무에서 사용하기엔 많이 부족하지만 간단한 예제를 보여드리고자 함이니 참고하시면 좋을 것 같습니다.

1 <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"
Inherits="AjaxProTableExam._Default"%>

3 <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

5 <htmlxmlns="http://www.w3.org/1999/xhtml">

6 <headrunat="server">

7 <title>제목 없음</title>

8 <scripttype="text/javascript">

9 functionErrorCheck(args)

10 {

11 if(args.error !=null)

12 {

13 alert(args.error);

14 returnfalse;

15 }

16 returntrue;

17 }

18 //버튼 클릭시 호출

19 functiongetData()

20 {

21 //cs에서 정의한 Ajax메서드 호출

22 //네임스페이스명.클래스명.메서드명(콜백함수)

23 AjaxProTableExam._Default.getData(titlesBinding);

24 }

25 //응답 데이터를 전달받는 콜백함수

26 functiontitlesBinding(args)

27 {

28 if(!ErrorCheck(args))

29 returnfalse;

30 alert(args.value.Tables[0].Rows.length +"행을 Table태그에 출력합니다.");

31 varDataTable = args.value.Tables[0];

32 varDataRowLength = DataTable.Rows.length;

33 varDataColumnLength = DataTable.Columns.length;

34 if(DataRowLength == 0)//데이터가 없을 경우

35 {

36 EmptyDataDisplay(DataColumnLength);

37 returnfalse;

38 }

39 varcurrentRow;

40 for(varrowsLength = 0; rowsLength < DataRowLength; rowsLength++)

41 {

42 currentRow = CreateRow(document.getElementById("titles"));

43 for(varcellsLength = 0; cellsLength < DataColumnLength; cellsLength++)

44 CreateCells(currentRow, cellsLength, DataTable.Rows[rowsLength][DataTable.Columns[cellsLength].Name]);

45 }

46 }

47 functionEmptyDataDisplay(columnLength)

48 {

49 varcells = CreateRow(document.getElementById("titles")).insertCell(0);

50 cells.style.height ="20px";

51 cells.appendChild(document.createTextNode("데이터가 존재하지 않습니다."));

52 cells.colSpan = columnLength;

53 }

54 functionCreateRow(tableElement)

55 {

56 returntableElement.insertRow(tableElement.childNodes[0].childNodes.length);

57 }

58 functionCreateCells(trElement, cellIndex, value)

59 {

60 varcells = trElement.insertCell(cellIndex);

61 cells.style.height ="20px";

62 cells.appendChild(document.createTextNode(value));

63 }

64 </script>

65 </head>

66 <body>

67 <formid="form1"runat="server">

68 <div>

69 <asp:ButtonID="Button1"runat="server"Text="클릭하세요."UseSubmitBehavior="False"OnClientClick="getData(); return false;"/>

70 <tableid="titles"cellpadding="5"cellspacing="1"border="1">

71 <tr>

72 <tdstyle="background-color:Gray;color:White;">title_id</td>

73 <tdstyle="background-color:Gray;color:White;">title</td>

74 </tr>

75 </table>

76 </div>

77 </form>

78 </body>

79 </html>

자바스크립트 부분을 설명해 드리면 버튼을 클릭할 경우 서버측의 Ajax메서드를 호출하고 DataSet 타입의 데이터 집합을 받아 옵니다.

그리고 콜백함수에서는 행과 열의 수에 따라 지정한 Table태그의 자식 element인 TR/TD element를 만들어 내는 코드입니다.

문자열에 태그를 넣어 innerHTML로 만들지 않고 나름 표준적인? 방식으로 사용했습니다.

받아온 Row의 갯수가 0일 경우 "데이터가 존재하지 않습니다."라는 문자를 출력하고 위의 코드가 다소 미운 UI가 나옵니다. style은 다양하게 적용할 수 있으나 소스가 길어지는 관계상(사실은...귀차니즘;;ㅠ) 생략하였습니다.

자바스크립트 코드중 궁금한 것은 댓글달아 주시구요.

코드가 조금 엉성하거나 좋아 보이지 않는다면 그건...제 내공 부족으로 인해 알흠답게 코딩을 못하기 때문에...ㅠ

cs코드는 아래와 같습니다.

usingSystem;

usingSystem.Data;

usingSystem.Configuration;

usingSystem.Collections;

usingSystem.Web;

usingSystem.Web.Security;

usingSystem.Web.UI;

usingSystem.Web.UI.WebControls;

usingSystem.Web.UI.WebControls.WebParts;

usingSystem.Web.UI.HtmlControls;

usingSystem.Data.SqlClient;

namespaceAjaxProTableExam

{

publicpartialclass_Default: System.Web.UI.Page

{

protectedvoidPage_Load(objectsender,EventArgse)

{

AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));

}

[AjaxPro.AjaxMethod]

publicDataSetgetData()

{

using(SqlConnectioncon =newSqlConnection("server=(local);database=pubs;user id=sa;password=****;"))

{

SqlCommandcmd =newSqlCommand("select title_id, title from titles order by title_id", con);

con.Open();

DataSetds =newDataSet();

SqlDataAdapterda =newSqlDataAdapter(cmd);

da.Fill(ds);

con.Close();

returnds;

}

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Microsoft Surface

마리C — Wed, 20 Jun 2007 02:29:00 +0900

Microsoft에서 선보인Microsoft Surface입니다.

사진으로만 보면 별거 없어 보이지만 직접 동영상으로 확인하시면 입에서 소리가 나옵니다. 와우~!! ㅋ

국내 기사로는 올 11월에 미국의 레스토랑이나 호텔, 고객관리센터등에 상용화가 된다는데 가격이 꽤 나갑니다.

3~5년 내에 가격을 내린다는데 그 때 우리나라에 왔음 좋겠네요...

<위 그림은 Surface 사이트에서 다운 받은 이미지를 작게해서 올린 겁니다.>

와우~ 써프라이즈~~!!

동영상은http://www.microsoft.com/surface/에 있습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

AJAX.NET Professional - DropDownList에 출력

마리C — Fri, 15 Jun 2007 20:10:00 +0900

ASP.NET에서 AJAX를 이용하여 좀 더 편하게 웹사이트를 개발하기 위해서ASP.NET AJAX1.0이란 라이브러리를 제공합니다.

저 라이브러리는 ASP.NET 2.0에서 지원이 되기때문에 ASP.NET 1.X버전은 사용할 수가 없었습니다.

ASP.NET 1.X시절 AJAX를 좀 더 편리하게 사용하여 개발할 수 있게 도와준 라이브러리가 있었습니다.

AJAX.NET이란 이름으로 MSDN에도 소개가 되었었죠...

Michael Schwarz라는 개발자가 개인적으로 만든 라이브러리인데 간단하게 사용할 수 있어서 저도 1.X시절에 이를 이용하여 개발을 했었습니다. 잠깐 잊고 있었는데 우연하게 다시금 찾게 되어 웹사이트에 들어가 보니 떡하니... 2.0도 지원하는 라이브러리를 내놨네요...

AJAX.NET Professional이란 이름인데요.이 웹사이트는 여기, 라이브러리 개발자인Michael Schwarz의 개인 블로그는 여기로 방문하면 됩니다. 좀 더 많은 기능을 제공하는 것 같기는 한데 영어 실력도 형편없고 머리도 아프고 이런저런 핑계를 다 대고는 싶지만...ㅠ

그리하여..... 1.X시절에MSDN에 소개가 되었고태오사이트에서도 소개가 됐던 예제를 2.0버전을 다운 받아서 비슷한 예제를 소개할까 합니다.

AJAX.NET Professional다운로드참고로 6.대 버전으로 다운로드 하세요. 7.대 버전은 제 예제가 실행이 안되더군요. DataSet을 리턴받지 못하는거 같던데 이유는 찾기 귀찮습니다.

다운받은 dll파일을 참조추가로 추가해주면 라이브러리를 이용할 준비는 끝입니다.

그럼 예제 나갑니다. pubs 데이터베이스의 titles테이블에서 type을 선택하면 type에 해당하는 title들을 반환하는 예제입니다.

일단 예제를 보고 간단하게 설명하렵니다.

web.config의 system.web하위에 아래의 코드를 추가하세요.

<addverb="*"path="*.ashx"type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>

</httpHandlers>

aspx소스....

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"
Inherits="AjaxNetProExam._Default"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>AJAX.NET Professional Example</title>

<scripttype="text/javascript">

functiongetTitle(obj)

{

var_value = obj.options[obj.selectedIndex].value;

if(_value !="")

{

AjaxNetProExam._Default.GetTitle(_value, _callBack1);

}

function_callBack1(argument)

{

if(argument.error !=null)

alert(argument.error.Message);

else

{

varDropDownList2 = document.getElementById("DropDownList2");

DropDownList2.options.length = 0;

for(i=0;i<argument.value.Tables[0].Rows.length;i++)

{

DropDownList2.options[DropDownList2.options.length] =newOption(argument.value.Tables[0].Rows[i].title,argument.value.Tables[0].Rows[i].title);

}

function_callBack2(argument)

{

alert(argument.value);

}

</script>

</head>

<body>

<formid="form1"runat="server">

<div>

<asp:DropDownListID="DropDownList1"runat="server"onchange="getTitle(this);">

<asp:ListItemText="전체"Value=""/>

<asp:ListItemText="business"Value="business"/>

<asp:ListItemText="mod_cook"Value="mod_cook"/>

<asp:ListItemText="popular_comp"Value="popular_comp"/>

<asp:ListItemText="psychology"Value="psychology"/>

<asp:ListItemText="trad_cook"Value="trad_cook"/>

<asp:ListItemText="UNDECIDED"Value="UNDECIDED"/>

</asp:DropDownList>

<asp:DropDownListID="DropDownList2"runat="server">

</asp:DropDownList>

<inputtype="button"value="XML보기"onclick="AjaxNetProExam._Default.GetDataSet(_callBack2);"/>

</div>

</form>

</body>

</html>

aspx.cs소스....

usingSystem;

usingSystem.Data;

usingSystem.Configuration;

usingSystem.Collections;

usingSystem.Web;

usingSystem.Web.Security;

usingSystem.Web.UI;

usingSystem.Web.UI.WebControls;

usingSystem.Web.UI.WebControls.WebParts;

usingSystem.Web.UI.HtmlControls;

usingSystem.Data.SqlClient;

namespaceAjaxNetProExam

{

publicpartialclass_Default: System.Web.UI.Page

{

privatestaticDataSetds;

protectedvoidPage_Load(objectsender,EventArgse)

{

AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));

}

[AjaxPro.AjaxMethod]

publicDataSetGetTitle(stringtype)

{

using(SqlConnectioncon =newSqlConnection("server=(local);database=pubs;user id=sa;password=*****"))

{

SqlCommandcmd =newSqlCommand();

cmd.Connection = con;

cmd.CommandText ="select title from titles where type = @paramType group by title order by title";

cmd.Parameters.Add("@paramType",SqlDbType.VarChar);

cmd.Parameters["@paramType"].Value = type;

con.Open();

ds =newDataSet();

SqlDataAdapterda =newSqlDataAdapter(cmd);

da.Fill(ds);

returnds;

}

[AjaxPro.AjaxMethod]

publicstringGetDataSet()

{

returnds.GetXml();

}

AJAX.NET Pro를 사용하기 위해선 반드시 위에서 말한 web.config에 코드를 추가하고 AJAX에 사용될 메서드가 있는 클래스에 아래의 코드가 존재해야 합니다.

AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));

그리고 AJAX메서드는 [AjaxPro.AjaxMethod]를 위에 추가해주면 끝입니다. 이 코드 추가로 JavaScript에서 cs의 함수를 호출할 수 있는

즉, AJAX를 이용한 개발이 완료가 된 것 입니다.

자바스크립트에서 cs의 AJAX메서드의 호출은

AJAX메서드가 포함된 클래스의 네임스페이스.클래스.AJAX메서드명으로 호출을 합니다.

그런 방법으로 나온 코드가

AjaxNetProExam._Default.GetTitle(_value, _callBack1);

호출할 때 괄호안에 필수 인자가 있는데요. 그 인자는 결과를 리턴 받을 자바스크립트 메서드이고 그 메서드는 하나의 인자를 받습니다.

그 인자에 리턴 받은 결과가 담기게 되지요.

그리고 AJAX메서드에 인자가 있다면 그 인자를 차례대로 자바스크립트에서도 넣어주면 됩니다.

단, 맨 마지막은 리턴 받을 자바스크립트 메서드여야 합니다.

예제에서는 사용자가 선택한 DropDownList의 값입니다. 이 값을 선택하면 AJAX메서드를 호출하여 title테이블의 type에 해당하는

title정보를 DataSet에 담고 그 DataSet을 리턴하게 됩니다.

인자의 value속성에 결과 값이 들어오게 되는데 이 결과값에는 우리가 C#에서 DataSet을 다루는 문법과 비슷합니다.

Tables[0].Rows[0].title

비슷하지 않나요?? 마지막 title은 컬럼명입니다. 자바스크립트 코드를 보시면 이해가 될 것으로 생각이 되구요.

위 예제를 비록 1.X버전이긴 하지만 아주~ 잘 설명해주신태오님 강좌를 참고해보세요.

예제가 틀린데요? 라고 한다면 무자게 곤란합니다. 알아서 이해를 하셔요...

한가지 아쉬운 점이 도움말이 없다는거 어디에 있는지 알려주세요.

DataSet으로 리턴 받으면 어떻게 그걸 참조하는지 각 리턴 타입별로 알려주면 안되나... ㅡㅡ;;

예제의 버튼은 해당 DataSet이 어떻게 나오는지 보여주는 버튼입니다.

기타 궁금한 사항은 댓글이나태오사이트에 질문해주세요. 태오님을 포함한 여러 MVP분들이 친절하게 답변해주실 겁니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

내 도메인으로 LiveMail 이용

마리C — Fri, 15 Jun 2007 03:58:00 +0900

Windows Live에 개인 도메인으로 Hotmail처럼 이용할 수 있는 서비스Windows Live Custom Domains가 있습니다.

위 사이트에서 기존 혹은 신규 Live ID로 로그인을 한 후 도메인을 등록하면 사용 가능합니다.

좋은 점은Live Mail서비스를 그대로 이용 가능하다는 점인데요.

1. 일단 제일 중요~ 무료입니다.

- 단, DNS에서 MS 레코드 세팅을 해야 합니다.

- 도메인 호스팅 업체에 문의하거나 호스팅을 받고 있지 않다면DNSEver에서 무료로 등록 가능합니다.

2. 회사 도메인도 등록 가능합니다.

- 보통 웹호스팅이나 웹메일 혹은 중소기업청에서 제공해주는 불편한?? 메일을 이제 사용 안해도 됩니다.

3. 각 도메인당 수백(현재는 500개...)여개의 계정을 등록할 수 있습니다.

- 계정당 용량은 무려... 2GB~!!

4. Windows Live Hotmail 기능과 동일합니다.

- 이 서비스 이전에는 Hotmail계정으로 사용되었지만 이제는 등록한 계정으로 동일 기능을 사용할 수 있습니다.

5.Windows Live Messenger와 연동이 됩니다.

- 하지만... Messenger로그인을 등록한 계정으로 해야 됩니다. ㅠ

6. 등록한 계정으로 Messenger 로그인도 가능합니다.

- 이 경우는 회사에서 편리하겠지요...

- 하지만 한 컴퓨터에 하나의 계정으로 로그인만 된다는거...ㅠ

- 멀티로그인을 찾아봤지만 패치파일은 있어도 실패했습니다.

- 성공하신분 댓글 부탁드립니다. ㅠ

7. 물론Windows Live Mail desktop과도 연동이 됩니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Windows Live Mail desktop

마리C — Thu, 14 Jun 2007 04:00:00 +0900

Windows Live Mail desktop/직접다운로드

회사메일, 개인메일등... 여러가지 계정이 있는데 일일이 사이트 들어가서 확인하기 어렵기때문에

보통 OutLook을 많이 사용합니다.

그런데Windows Live에서Windows Live Mail desktop 베타버전이 있기에 설치해봤습니다.

디자인도 이쁘고 outlook보단 조금 가벼운듯 하여 이것을 사용하고 있는데 제가 보기엔 편리합니다.

아직 한글버전이 없는 것이 단점이긴 하지만...

첨에는Windows Live Betas에 있었는데 어느샌가 없어졌습니다. 다운로드페이지 찾기 쫌 어려웠네요...ㅠ

1.Windows Live Messenger와 연동이 되서 편리합니다.

- 메신져 계정과 상관없이 메일 송/수신 가능합니다.

- SMTP가 없으신 분들은네이버메일을 조금만 사용하시다 보면 마일리지가 쌓여 SMTP도 이용 가능합니다.

2. 디자인이 정말 이쁩니다. 나만 그런가... ㅡㅡ;; outlook을 버린 이유도 디자인~ㅋ

3. 일반인들에겐 별로 관계없지만 Newsgroups와 연결됩니다.

- outlook 2007에선 못찾았습니다.

4. 새로운 메일 수신 최단 1분마다 확인 가능

- Tool - General Tap - Check for new Messages every 체크 후 분 단위로 시간 선택

5. Messenger에 등록된 사람들에게 메일 보내기가 편합니다.

- 수신자 메일을 입력시 자동완성처럼 해당 메일의 Contact정보가 나옵니다.

**** 기타 사용시 궁금한 사항은 덧글이나 메일주세요. 먼저 사용해본 유저로써 아는한 답변드리겠습니다.

중요한건... outlook과 기능이 유사합니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

UpdatePanel안 컨트롤의 addHandler사용 팁

마리C — Fri, 08 Jun 2007 23:53:00 +0900

ASP.NET AJAX1.0의 Client Reference에 보면addHandler라는 메서드가 있습니다.

이 메서드는 element의 이벤트를 추가해주는 역할인데 자세한 설명은여기를 참고해주세요.

사용법은 간단합니다.

$addHandler(객체, 이벤트명, 이벤트메서드);

객체는 $get("element명") 이고 이벤트명은 click등으로 각 event명을 문자열로 넣고 이벤트메서드(handler)는 추가한 이벤트가

발생할 경우 실행될 메서드입니다. 저렇게 등록을 하고 이벤트메서드는 아래와 같은 형태로 작성하면 됩니다.

<scripttype="text/javascript">

functionbtnClick(eventElement){

$get("TextBox2").value = (newDate()).toLocaleString();

}

</script>

위의 메서드에서는 인자를 하나 받는데요. 이 인자에 event를 일으킨 element에 대한 정보들이 존재합니다.

어떤 정보들이 있는지 알고 싶으신 분들은클릭하세요.

$addHandler는 유용하게 사용될 수 있으며 AjaxControl Extender들은 $addHandler메서드를 자주? 사용하고 있습니다.

그런데 한가지 주의할 점이 있습니다.

해당 컨트롤이 UpdatePanel안에서 비동기로 업데이트가 이뤄질 경우 $addHandler에 등록된 이벤트는 사라지게 됩니다.

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Untitled Page</title>

</head>

<body>

<formid="form1"runat="server">

<asp:ScriptManagerID="ScriptManager1"runat="server"/>

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<asp:TextBoxID="TextBox1"runat="server"Width="296px"></asp:TextBox><br/>

<asp:TextBoxID="TextBox2"runat="server"Width="296px"></asp:TextBox><br/>

<asp:ButtonID="Button1"runat="server"OnClick="Button1_Click"Text="Button"/>

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

<scripttype="text/javascript">

$addHandler($get("Button1"),"click",btnClick);

functionbtnClick(eventElement){

$get("TextBox2").value = (newDate()).toLocaleString();

}

</script>

위의 코드를 보면 Button1을 클릭하게되면 $addHandler에 등록된 btnClick이 실행되고 TextBox2에 클라이언트의 날짜를 출력합니다.

그리고 Button1의 서버측 이벤트는 서버의 현재날짜를 TextBox1에 출력하는 코드가 있습니다.

위의 예제를 실행하면 첫 실행 즉, 처음 페이지가 로드되면 아주 잘 동작하지만 그 이후 부터는 $addHandler에 등록된 btnClick가

실행되지 않음을 알 수 있습니다.

만일 위의 컨트롤들이 UpdatePanel밖에 존재할 경우 PostBack되면서 첫 동작 이 후에도 아주 잘 동작하게 됩니다.

이렇게 되는 이유를 제가 이해한데로 설명을 해드리자면...

컨트롤이 PostBack후 다시 랜더링되면 $addHandler로 해당 이벤트를 다시 등록해줘야만 첫 동작 이 후에도 동작을 하게 됩니다.

비동기 업데이트가 아닌 일반 PostBack의 경우 모든 코드를 다시 서버로 부터 받기 때문에 잘 되는 것이고

UpdatePanel에서 비동기 업데이트가 이뤄질 경우 컨트롤들만 다시 랜더링되기 때문에 두번째 동작부터는 안되게 되는 것 입니다.

그럼 어떻게 해결 해야 할까요?? 방법은 여러가지가 있을 수도 있지만 제가 생각한 것은 두가지 방식입니다.

1. PostBack이후

ScriptManager.RegisterStartupScript

코드를 사용하여 $addHandler를 등록해준다.

이렇게 할 경우 aspx의 코드에 있는 $addHandler를 빼고 cs파일 Page_Load이벤트에 아래의 코드를 넣어주면 됩니다.

ScriptManager.RegisterStartupScript(this.Page,this.GetType(),"_addHandler","$addHandler($get(\"Button1\"),\"click\",btnClick);",true);

이 방식으로 할 경우 aspx코드에서 변경할 것이 btnClick 메서드의 위치입니다. btnClick를 못찾는다고 할 것 입니다.왜 그런지는 아시죠??

2. Button1을 UpdatePanel밖으로 빼고 UpdatePanel의 UpdateMode와 ChildrenAsTriggers 속성을 변경한다.

이 방식은 실제 AJAX 개발할 때 자주 사용됩니다. 한페이지에 두개 이상의 UdpatePanel이 있거나 버튼 같은 클릭을 위한 컨트롤이

UpdatePanel과 UI위치상 멀리 있을 경우에 말이지요... 다른 경우도 있겠지만;;

<asp:UpdatePanelID="UpdatePanel1"runat="server"ChildrenAsTriggers="true"UpdateMode="conditional">

위처럼 변경하면 됩니다. 그럼 Button1컨트롤은 서버로 부터 비동기 업데이트될 컨트롤에서 제외되기 때문에 처음 페이지 로드시 등록한

$addHandler의 이벤트는 잘 동작하게 되는 것 입니다.

2번째 방법을 사용한 코드입니다.

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Untitled Page</title>

</head>

<body>

<formid="form1"runat="server">

<asp:ScriptManagerID="ScriptManager1"runat="server"/>

<asp:UpdatePanelID="UpdatePanel1"runat="server"ChildrenAsTriggers="true"UpdateMode="conditional">

<asp:TextBoxID="TextBox1"runat="server"Width="296px"></asp:TextBox><br/>

<asp:TextBoxID="TextBox2"runat="server"Width="296px"></asp:TextBox><br/>

</ContentTemplate>

</asp:UpdatePanel>

<asp:ButtonID="Button1"runat="server"OnClick="Button1_Click"Text="Button"/>

</form>

</body>

</html>

<scripttype="text/javascript">

$addHandler($get("Button1"),"click",btnClick);

functionbtnClick(eventElement){

$get("TextBox2").value = (newDate()).toLocaleString();

}

</script>

위에서 알려준링크에있는 예제가 제가 말한것 처럼 처음에만 동작하지 않고 아주 잘 되는 이유는 UpdatePanenl의 속성에 답이 있습니다.

처음에 이게 왜 안될까 고민했었는데...기본적이라면 기본적인 이것을 팁이랍시고 올리는 제가 미워요;;

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

ASP.NET AJAX에 대한 전망

마리C — Tue, 05 Jun 2007 23:27:00 +0900

출처 :MSDN Magazine

지난 12개월간 열대 섬으로 휴가를 다녀왔거나 리얼리티 게임 쇼에 참가하여 인터넷과 떨어져 지낸 경우가 아니라면 AJAX에 대한 내용을 들어 본 경험이 있을 것입니다. 그래도 만약을 위해서 간단한 요약을 준비했습니다.

먼저 AJAX는 Asynchronous JavaScript and XML을 의미하는 머리글자어이며 진정한 혁신을 통해 지금까지는 불가능했거나 실질적으로 구현할 수 없었던 솔루션을 가능하게 하는 것을 목표로 하고 있습니다. AJAX가 무엇으로 구성되어 있는지도 알아야 합니다. AJAX는 그 자체가 하나의 기술은 아니며 JavaScript, CSS(Cascading Style Sheet), DHTML 및 XMLHttpRequest와 같이 몇 년 전부터 있었던 클라이언트 쪽 웹 기술의 강력한 조합을 사용하여 구축한 풍부한 기능을 갖춘 브라우저 응용 프로그램을 나타내는 포괄적인 용어입니다.

현재 사용할 수 있는 브라우저의 상당수는 공통적인 기능을 지원하고 있으며 웹 개발자는 이러한 기능을 활용하여 신속하게 새로 고칠 수 있고 클라이언트에서 많은 양의 작업을 처리하는 대화형 응용 프로그램을 구축할 수 있습니다. AJAX 응용 프로그램은 이러한 기능을 활용하여 데스크톱 응용 프로그램을 사용하는 것과 흡사한 풍부한 기능의 사용자 환경을 제공합니다. 또한 AJAX는 어느 때보다 "혼합" 응용 프로그램을 더 쉽게 개발할 수 있도록 지원합니다. 혼합은 다양한 원본의 정보를 결합한 웹 응용 프로그램을 의미합니다. 예를 들어 Microsoft^®Virtual Earth™와 부동산 판매 정보를 결합하여 유용한 부동산 업무 도구를 만들 수 있습니다.

사실 필자는 AJAX가 너무 거대하고 중요하기 때문에 몇 년 안에 사람들에게서 잊혀질 것으로 예상하고 있습니다. 그 이유는 AJAX가 이 업계에서 일하는 모든 사람들에게 흡수되어 일상적으로 수행하는 일의 표준적인 부분이 될 것이기 때문입니다. 지금은 XML나 HTTP 사용을 강조할 필요가 없는 것과 마찬가지 원리입니다.

2005년 9월 Microsoft Professional Developers Conference에서 처음으로 소개된 Microsoft ASP.NET AJAX(이전에는 "Atlas"라고 불림)는 ASP.NET 2.0(ajax.asp.net(영문) 참조)에 많은 새 기능을 추가했습니다. 이러한 기능은 모두 웹 사이트에 AJAX 기반 기능을 손쉽게 추가할 수 있도록 설계되었습니다. 이번 달 칼럼에서는 ASP.NET AJAX의 몇 가지 핵심 기능을 자세하게 살펴보고자 합니다. 이 칼럼에서는 독자가 기본 개념 및 도구에 어느 정도 익숙하다고 가정합니다. 처음 시작하는 독자는 Matt Gibbs가MSDN^®Magazine2006년 7월호에 소개한 "Atlas at Last: ASP.NET Atlas를 활용한 AJAX 방식의 사이트 개발"을 참조하십시오. 또한 보충 기사인 "현재로서는 동기만 지원" 부분에서도 약간의 추가 정보를 볼 수 있습니다.

ASP.NET에서 AJAX로

AJAX를 사용하여 어떤 새로운 응용 프로그램 기능을 만들 수 있을까요? 좀 더 구체적으로 말해, 비동기 JavaScript 호출 및 브라우저의 개체 모델을 사용하여 어떤 기능을 만들 수 있을까요? AJAX의 기능을 가능하게 하는 기술로는 원격 메서드 호출, 클라이언트 쪽 데이터 바인딩 및 시각 효과의 세 가지가 있습니다. 원격 메서드 호출은 다소 막연하게 들리므로 부분 페이지 다시 게시 및 대역 외 요청으로 범위를 좁히겠습니다.

어떻게 하면 새로운 또는 기존 ASP.NET 응용 프로그램을 AJAX 응용 프로그램으로 바꿀 수 있을까요? 현재 AJAX 개발을 위한 100종 이상의 프레임워크가 있는 것으로 보고되고 있습니다. 이러한 프레임워크에서는 다양한 플랫폼을 지원하며 여러 가지 프로그래밍 방식을 활용합니다. 필자는 일반적으로 AJAX 프레임워크를 기능에 따라 콜백 프레임워크, UI 프레임워크 및 종합 프레임워크의 세 가지 큰 범주로 구분합니다.

콜백 프레임워크는 간단한 클라이언트 및 서버 라이브러리 집합으로 구성됩니다. 클라이언트에서 서버 쪽 코드 조각을 호출하고 serialize된 형식으로 입력 및 출력 매개 변수를 전달하는 것이 이 프레임워크의 기능입니다. 일반적인 UI 프레임워크는 고급 표, 차트 및 트리 컨트롤을 제공하던 기존의 전문 컨트롤 라이브러리를 발전시킨 것이며 비동기 다시 게시 및 페이지의 자동 새로 고침을 위해 클라이언트에 JavaScript 코드를 삽입하는 작업을 지원합니다. 마지막으로 종합 프레임워크는 컨트롤 및 응용 프로그램 서비스를 포함하는 풍부한 기능의 프로그래밍 모델을 제공하며 클라이언트 및 서버 양쪽에 대해 지원되는 경우가 많습니다. Microsoft ASP.NET AJAX는 이 세 번째 범주에 속합니다.

이미 시판된 컨트롤 제품군을 사용하고 있다면 매끄럽게 다음 AJAX 지원 버전으로 업그레이드할 수 있을 것입니다. 응용 프로그램 전체를 내부에서 개발하고 프레젠테이션 계층을 비롯하여 백 엔드 계층까지 처리한다면 종합 프레임워크가 가장 적합한 옵션입니다. 마지막으로 간단한 프레임워크는 기존 ASP.NET 버전 1.1 및 2.0 응용 프로그램에 신속하게 콜백 기능을 추가하려는 경우에만 유용합니다.

ASP.NET 2.0에서는 이미 스크립트 콜백 API를 기본 제공하며 이에 대해서는 "Cutting Edge: Script Callbacks in ASP.NET(영문)" 및 "Cutting Edge: Custom Script Callbacks in ASP.NET(영문)" 칼럼에서 몇 차례 살펴본 적이 있습니다. 그리고 이 칼럼과 함께 제공되는 코드에도 원격 메서드 호출을 위한 매우 간단한 AJAX 프레임워크 데모가 포함되어 있습니다. 이 데모는 단지 50줄의 JavaScript 및 관리 코드로 이루어져 있습니다. 물론 이 데모로 ASP.NET AJAX와 경쟁할 수는 없겠지만 ASP.NET 1.1 응용 프로그램에 기본적인 AJAX 기능을 추가하기 위한 핵심 코드로 사용할 수는 있습니다.

ASP.NET AJAX로의 지름길

ASP.NET AJAX는 서로 배타적이지는 않지만 별개인 클라이언트와 서버의 두 API로 구성되어 있습니다. 개발자는 직접적인 클라이언트 쪽 프로그래밍, 일반적인 서버 쪽 프로그래밍 또는 이 두 가지의 모든 조합을 사용하여 AJAX 기능을 작성할 수 있습니다. 모든 AJAX 기반 페이지에는 브라우저 DOM(문서 개체 모델) 및 응용 프로그램별 확장 기능을 처리하기 위한 약간의 클라이언트 쪽 JavaScript 코드가 필요합니다. 그러나 이러한 스크립트 코드를 작성하는 역할을 ASP.NET 프로그래머에게 넘길 필요는 없습니다. 프레임워크를 사용하면 서버 쪽 컨트롤의 출력을 통해 맞춤형 스크립트 코드를 생성할 수 있기 때문입니다. 이러한 형식의 간접 페이지 업데이트는 새로운 또는 기존 ASP.NET 2.0 페이지에 AJAX 기능을 추가하는 가장 간단한 방법입니다. ASP.NET AJAX에서 페이지 업데이트는 서버 컨트롤인 UpdatePanel 컨트롤이 자동으로 주입한 클라이언트 코드 조각에 의해 제어될 수 있습니다.

UpdatePanel 컨트롤은 ASP.NET AJAX의 서버 중심 프로그래밍 모델에서 중추 신경이라 할 수 있으며 이를 통해 서버 쪽 코드를 실행하고 업데이트된 태그를 클라이언트 브라우저로 반환할 수 있습니다. 이것이 기존의 다시 게시와 어떻게 다른지 궁금할 것입니다. 차이점은 다시 게시가 구현되는 방법에 있습니다. UpdatePanel 컨트롤은 전체 페이지를 새로 고치지 않고 우선 새로운 태그를 위한 대역 외 요청을 전송한 다음 응답이 준비되면 DOM 트리를 업데이트할 수 있습니다.

ASP.NET의 클라이언트 중심 프로그래밍 모델은 원격 끝점(대부분 ASP.NET 웹 서비스 및 Windows^®Communication Foundation 서비스)에 대한 호출을 수행할 수 있는 기능을 중심으로 구성되어 있습니다. 클라이언트 브라우저에서 직접 시작된 원격 끝점에 대한 호출에는 JavaScript 프록시 및 약간의 JavaScript 코드가 필요합니다. 마지막으로 클라이언트 쪽 데이터 바인딩은 기존의 JavaScript 런타임 및 DOM을 확장한 것으로 볼 수 있습니다. 순수한 클라이언트 쪽 프로그래밍 스타일의 경우 원격 끝점에 연결하고 데이터를 다운로드한 다음 이를 DOM 하위 트리에 바인딩합니다. 템플릿의 구조는 약간의 상태 정보와 함께 클라이언트에 유지되며 원시 데이터만 서버에서 클라이언트로 전송됩니다.

ASP.NET AJAX에는 세 가지 주요 프로그래밍 방식이 있습니다.그림 1에서는 이러한 도구를 요약하고 최적의 용도를 보여 줍니다.

UpdatePanel 및 인터셉터 패턴

UpdatePanel 컨트롤의 등장으로 인해 페이지 전체를 새로 고치지 않고, 클라이언트 쪽 프로그래밍을 사용하지도 않으면서 페이지 내용을 업데이트하는 프로그래밍 스타일이 가능해졌습니다. ASP.NET AJAX 용어로는 이를 부분 렌더링이라고 합니다. 이러한 기능을 가능하게 하는 구성 요소 중 가장 눈에 띄는 것은 UpdatePanel 컨트롤이지만 부분 렌더링 내부 구현의 실제 처리 주체는 ScriptManager 컨트롤입니다. 물론 UpdatePanel 컨트롤을 무시할 수는 없습니다. 이는 개발자가 부분 업데이트 가능한 페이지를 작성할 때 사용하는 주요 도구입니다.

웹 페이지를 새로 고치는 작업은 제출 단추를 직접 클릭하거나 프로그래밍 방식으로 DOM 폼 개체의 제출 메서드를 호출하는 두 가지 방법 중 하나로 수행할 수 있습니다. 두 경우 모두에서 브라우저는 현재 페이지에 대한 작업을 멈추고 새 요청을 백 엔드 웹 서버로 전송합니다. 그러면 들어오는 응답이 기존 내용을 다시 정의하게 됩니다.

UpdatePanel 컨트롤의 목적은 간단히 말해 이 프로세스에 관여하는 것입니다. 즉, 폼 제출을 가로채어 전송되는 정보를 캡처하고 동일한 정보를 XMLHttpRequest 기반의 대역 외 호출을 통해 전송합니다. 이때 UpdatePanel 컨트롤은 서버에서 처리하여 렌더링될 컨트롤이 무엇인지 나타내는 약간의 정보를 추가합니다. 즉, 부분 페이지 렌더링을 수행하는 것입니다.

UpdatePanel 컨트롤의 결과 동작은 인터셉터 패턴으로 완전하게 설명할 수 있습니다. 여기서 패턴은 개체 호출을 감시하고 자체 코드를 호출자와 수신자 사이에 끼워 넣는 모든 외부 구성 요소를 말합니다. 외부 구성 요소는 이 방법으로 작업을 완벽하게 제어하고 작업이 수행되는 방법을 결정하며 호출자에 유효한 응답을 반환할 수 있게 됩니다.그림 2에서는 ASP.NET AJAX에서 이 패턴이 어떻게 구현되는지 보여 줍니다.

그림 2 UpdatePanel 컨트롤 및 인터셉터 패턴 (더 작게 보려면 이미지를 클릭하십시오.)

클라이언트 페이지로 주입된 스크립트 코드는 폼의 onsubmit DOM 이벤트에 대한 처리기를 등록합니다. 이 새 처리기는 XMLHttpRequest를 통과하고 추가 정보를 전달하는 요청으로 기존의 요청을 대체합니다. 특히 이 처리기는 기존 입력 필드의 목록을 다시 게시하는 역할을 하는 UpdatePanel 컨트롤의 이름을 추가합니다. 페이지로 나눌 수 있는 표 형태가 있는 페이지의 경우 내용이 다음과 같이 수정됩니다.

ScriptManager1=UpdatePanel1|GridView1&
__EVENTTARGET=GridView1&
__EVENTARGUMENT=Page%241&
__VIEWSTATE=...&
__VIEWSTATEENCRYPTED=&
__EVENTVALIDATION=...

의사 매개 변수인 ScriptManager는 다시 게시를 수행하는 UpdatePanel 컨트롤의 ID를 참조합니다. 지정된 UpdatePanel 컨트롤과 연결된 컨트롤만 새로 고쳐지며 수정된 태그는 업데이트된 viewstate 정보와 함께 브라우저로 다시 전송됩니다.

내부 구현 방식에는 차이가 있지만 부분 렌더링은 다양한 AJAX 프레임워크의 공통적인 기능입니다. 각 프레임워크의 차이점은 대부분 업데이트 가능 컨트롤을 요청에 연결하는 방식에 있습니다. ASP.NET AJAX에서는 업데이트 가능 컨트롤이 가장 바깥쪽 컨테이너 컨트롤(UpdatePanel)로 그룹화됩니다. 컨테이너에 포함된 모든 내용은 현재 표시된 페이지의 변경된 내용을 나타내는 태그로 렌더링됩니다. AJAX 스타일의 다시 게시로 렌더링을 수행하는 프레임워크에 프로그래밍 방식으로 개별적인 컨트롤을 등록하도록 요구하는 다른 방법도 있습니다. 이것은 ASP.NET 2.0에서 컨트롤 상태를 지원하는 컨트롤을 사용할 때 진행되는 방식과 다소 유사합니다.

컨테이너에 컨트롤을 그룹화하는 것보다 세분성과 유연성이 개선된 방식으로, 각 컨트롤이 AJAX 스타일의 다시 게시를 렌더링하는 방법을 결정하도록 하는 것이 있습니다. 그러나 이 방법을 사용하면 추가 코드 숨김 명령이나 특수 컨트롤을 사용해야 합니다. 이 방식은 컨트롤 라이브러리 및 기타 제품으로는 좋지만 ASP.NET과 같은 웹 프레임워크로는 지나치게 복잡합니다.

UpdatePanel 컨트롤은 System.Web.UI.Panel에서 파생된 클래스입니다. 하위 ASP.NET 컨트롤의 UI 없는 컨테이너인 UpdatePanel은 어떤 ASP.NET 서버 컨트롤도 포함할 수 있으며 이를 사용하기 위해 특수한 AJAX 지원 컨트롤이 필요하지도 않습니다. UpdatePanel을 사용하면 기존의 ASP.NET과 동일한 응용 프로그래밍 모델 및 프로그램 스타일을 사용하여 완전히 서버에서 AJAX 프로그래밍을 수행할 수 있습니다. 개발자는 JavaScript 또는 클라이언트 쪽 Microsoft AJAX 라이브러리에 대해 배울 필요가 없으며, XML 스크립트 또는 브라우저의 DOM을 사용할 필요도 없습니다.

기존 ASP.NET 페이지를 AJAX 페이지로 변환하려면 두 가지 단계를 거치게 됩니다. 우선 ScriptManager 컨트롤을 페이지에 추가합니다. 그런 다음 부분적 및 비동기적으로 새로 고칠 컨트롤 그룹을 UpdatePanel 컨트롤로 래핑합니다. UpdatePanel 컨트롤은 중첩 시나리오를 지원하며 동적으로 만들 수 있습니다. ASP.NET 페이지에는 원하는 만큼 UpdatePanel 컨트롤을 추가할 수 있습니다.

실제 업데이트는 자식 컨트롤이 다시 게시할 때와 특정 외부 이벤트가 발생할 때의 두 가지 방법으로 트리거됩니다. 트리거와 기타 속성을 사용하면 각 UpdatePanel 컨트롤이 해당 내용을 조건에 따라 새로 고치도록 할 수 있습니다.

UpdatePanel 컨트롤을 사용하면 신속하게 ASP.NET 페이지를 조금씩 AJAX로 마이그레이션할 수 있습니다. 동일한 ASP.NET 페이지에서 AJAX 스타일의 다시 게시 및 기존 방식의 다시 게시를 모두 수행할 수 있으므로 UpdatePanel에서는 각각의 모든 요청에 대해 페이지의 보기 상태를 전달해야 합니다. 보기 상태는 서버로 전송되고 선택된 컨트롤의 변경 내용을 반영하도록 업데이트된 다음 클라이언트에서 다운로드됩니다. 이벤트 유효성 검사 데이터의 경우에도 동일한 과정이 진행됩니다. 보기 상태 및 이벤트 유효성 검사 데이터는 클라이언트에서 업데이트할 수 없으므로 서버로 다시 전송하여 변조 및 올바른 업데이트 여부를 확인해야 합니다. 클라이언트에서 보기 상태 및 이벤트 유효성 검사 데이터의 최신 복사본을 사용할 수 있도록 하는 것은 AJAX 및 기존 스타일 모두에서 성공적인 다시 게시를 허용하면서도 페이지를 일관적인 상태로 유지하는 데 매우 중요합니다.

기본적으로 UpdatePanel은 ASP.NET AJAX를 배우기 위한 가장 쉬운 방법이며 이를 사용하면 최소한의 업그레이드와 마이그레이션 작업만으로 기존 페이지 및 AJAX 페이지에서 완벽하게 상호 운용이 가능합니다. 업데이트 가능한 패널을 사용하면 패널이 매우 빠르게 새로 고쳐집니다. 사실 이러한 업데이트는 너무 빠르게 수행되어 사용자가 변화를 알아차리지 못하는 경우도 있습니다. 이 때문에 변화하는 상황에 대해 알려 주는 자주 변경되는 패널에는 적당하지 않을 수 있습니다. UpdateProgress 컨트롤과 같이 내용이 자주 변경되는 패널은 표시된 변경 내용을 사용자에게 알려 주는 용도가 아니라 장기 작업에 맞게 최적화되어 있습니다. 이러한 변경 내용에 대해 사용자에게 피드백을 제공하는 데는 AJAX Control Toolkit의 최신 CTP에 정의되어 있는 UpdatePanelAnimation Extenter를 사용하는 것이 좋습니다.여기(영문)에서 작동하는 샘플을 볼 수 있습니다. 이 Extender는 다시 게시하는 동안 UpdatePanel의 영역에 애니메이션을 적용합니다. Extender에서는 특히 updating 및 updated 이벤트에 대한 애니메이션을 지정할 수 있습니다. AJAX Control Toolkit은 ASP.NET AJAX Extensions 다운로드에는 통합되어 있지 않으므로 별도로 설치해야 합니다.

대역 외 호출 제어

JavaScript를 사용하는 데 익숙하며 클라이언트에서 직접 서버 호출을 수행하려는 개발자의 경우에는 기본적으로 웹 서비스를 사용하거나 정적 페이지 메서드로 호출할 수 있습니다.

개발자는 스크립트 관리자에 ASMX 웹 서비스를 등록함으로써 JavaScript 프록시 클래스를 생성하고 이를 클라이언트 페이지에 주입하도록 ASP.NET AJAX 인프라에 지시하게 됩니다. 웹 서비스 URL에 /js 접미사를 붙여 주소 표시줄(로컬 시스템)에 입력하면 프록시 클래스를 살펴볼 수 있습니다. 다음은 공용 메서드 두 개가 있는 웹 서비스를 위한 JavaScript 프록시의 예입니다. 코드는 읽기 쉽게 간소화하였습니다.

Type.registerNamespace('Samples.MyWebService');
Samples.MyWebService = new function() {
this.appPath =http://YourServer/AjaxDemo/;
var cm = Sys.Net.ServiceMethod.createProxyMethod;
cm(this, "LookupCustomer", "id");
cm(this, "LookupAllCustomers");
}

이 코드를 사용하면 스크립트 태그에서 웹 서비스를 호출할 수 있습니다. 여기에서는 기존 프록시 패턴이 사용되며 전반적인 메커니즘은 기존 ASP.NET 또는 Windows 응용 프로그램의 서버에서 웹 서비스를 사용할 때와 정확하게 동일합니다.

그러나 몇 가지 주의 사항이 있습니다. 클라이언트에서 어떤 종류의 서버 쪽 코드를 호출하는 것인지, 다른 말로 하면 클라이언트에서 웹 서비스의 어떤 작업을 호출하려는 것인지 생각해 보아야 합니다. AJAX 페이지에서 호출되는 웹 서비스는 클라이언트 페이지에 약간의 비즈니스 논리를 노출하게 됩니다. 공개 끝점은 인터넷에서 호출할 수 있는 웹 서비스이며 응용 프로그램의 논리를 보호하기 위한 기본 제공 보안 계층은 없습니다. 이러한 취약성은 이전부터 있었던 것입니다.

ASP.NET AJAX는 개발자에게 웹 서비스를 통해 약간의 응용 프로그램 논리를 공개할 수 있는 기회를 제공합니다. 일단 인터넷에 게시되면 모든 호출자가 이 논리(어떤 보안 계층으로도 보호되지 않음)를 사용할 수 있습니다. 일반적으로 인터넷에서 사용하기에 안전한 것으로 생각되는 데이터 및 논리만 공개해야 합니다. 제품 목록을 반환하는 웹 서비스를 작성하고 호출하더라도 심각한 문제는 일어나지 않을 것입니다. 그러나 예를 들어 신용 카드 유효성 검사 처리를 포함하는 BLL(비즈니스 논리 계층)을 공개하는 것은 피해야 합니다.

ASP.NET AJAX는 웹 서비스를 사용하여 클라이언트 페이지에서 직접 사용할 BLL을 공개하도록 하고 있습니다. 즉, AJAX 웹 서비스는 중요하지 않은 사용자 인터페이스 계층 BLL의 한 종류로 보면 됩니다. 중요한 BLL은 기존의 다시 게시 또는 UpdatePanel 컨트롤을 사용하여 호출해야 합니다.

웹 서비스를 직접 ASP.NET AJAX 페이지에 연결하려면 이러한 웹 서비스가 호출자 페이지와 동일한 웹 응용 프로그램에서 호스팅되는 로컬 웹 서비스여야 합니다. 이러한 요구 사항이 있는 이유는 두 가지입니다. 첫째, 웹 서비스는 각 요청에 추가된 /js 접미사를 처리하는 방법을 아는 ASP.NET AJAX 응용 프로그램의 지원을 받아야 합니다. 다른 ASP.NET AJAX 응용 프로그램을 사용하여 웹 서비스를 호스팅하는 것도 가능하지만 이 경우에는 클라이언트 호출이 사이트 간 호출을 방지하는 최신 브라우저의 엄격한 보안 설정과 충돌할 수 있습니다.

페이지 메서드 대 웹 서비스 메서드

서버 코드를 ASP.NET AJAX 페이지에 바인딩하는 또 다른 방법으로 페이지 메서드를 호출하는 방식이 있습니다. 호출 가능한 페이지 메서드는 코드 숨김 클래스에 정의되며 웹 서비스 메서드에 사용된 것과 동일한 WebMethod 특성이 지정된 공용 정적(Visual Basic^®.NET에서는 공유) 메서드입니다. 현재로서는 인라인 및 코드 숨김의 경우 모두 ASPX 페이지에서만 사용할 수 있지만 향후에는 사용자 컨트롤 및 사용자 지정 컨트롤로 확장될 것입니다.

ASMX 웹 서비스와 페이지 메서드에는 다른 설정이 필요하다는 것도 알아야 합니다. 특히 페이지 메서드를 실행하려면 스크립트 관리자에 웹 서비스를 등록하고 스크립트 HTTP 모듈을 설치해야 합니다.그림 3에서는 web.config 파일에 무엇이 필요한지 보여 줍니다.

웹 서비스를 등록하고 프록시 생성을 지정하려면 다음과 같은 항목이 필요합니다.

<asp:ScriptManager ID="scriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/WebServices/MyDataService.asmx" />
</Services>
</asp:ScriptManager>

웹 서비스 클래스에 지정할 추가 특성도 필요합니다. 특히 JavaScript 프록시 클래스 생성을 위해 ScriptService 특성이 필요하며 일반 형식을 제외한 사용하려는 각 사용자 지정 형식에 대해 GenerateScriptType이 필요합니다.그림 4에서 예를 볼 수 있습니다.

Customer 형식에는 GenerateScriptType을 적용해야 하지만 CustomerCollection의 경우 이 형식은 ASP.NET AJAX 기본 제공 지원이 있는 제네릭 컬렉션<T> 클래스에서 파생되기 위해 정의된 것이므로 적용하지 않습니다.

public class CustomerCollection : Collection<Customer> {}

페이지 메서드에 필요한 HTTP 모듈은 ASPX 요청을 위한 기본 HTTP 처리기에 연결한 다음, 지정된 메서드를 실행하고 반환 값을 serialize하는 사용자 지정 코드 조각으로 렌더링 단계를 재지정합니다.

페이지 메서드 방식과 웹 서비스 메서드 방식은 모두 백 엔드 BLL에 액세스할 수 있도록 도와줍니다. 공개적으로 제공되는 웹 서비스 메서드와 마찬가지로 페이지 메서드 역시 기초적인 JSON(JavaScript Object Notation) 기술만 있으면 브라우저의 주소 표시줄에서 손쉽게 자동화할 수 있습니다. 따라서 공개하는 BLL 논리와 관련하여 WebMethod와 마찬가지로 이러한 페이지 메서드에 대해서도 주의를 기울여야 합니다.

결국 페이지 메서드 또는 웹 서비스 메서드 중에 어떤 것을 사용할지는 순전히 개발자의 선호에 달려 있습니다. 두 가지 경우에 모두그림 5와 같이 적절한 BLL 함수로 라우팅되는 Façade 계층으로 호출해야 합니다. 웹 서비스 메서드는 각 페이지에 서비스로의 끝점을 등록했다는 가정하에 어떤 페이지에서도 호출할 수 있으나 페이지 메서드는 이를 정의한 페이지에서만 호출할 수 있습니다. 현재 필자는 페이지 메서드를 사용하는 방법을 선호하고 있습니다.

그림 5 페이지 메서드 및 웹 서비스 메서드 비교 (더 작게 보려면 이미지를 클릭하십시오.)

ASP.NET AJAX 웹 서비스 메서드와 페이지 메서드는 모두 개체 데이터를 전달하기 위해 JSON을 광범위하게 사용합니다. 간단한 데이터 교환 형식인 JSON은 개체를 serialize하여 문자열로 만드는 데 사용됩니다. JSON은 근본적으로 단순하므로 사용자와 시스템 모두에 적절합니다. SOAP 패킷을 읽고 쓰는 것보다는 JSON 문자열을 읽고 쓰는 것이 쉽습니다. 또한 JSON은 시스템에서 구문 분석하고 처리하기도 쉽습니다.

페이지 메서드가 웹 메서드에 비해 좋은 성능을 제공할 것으로 기대하는 개발자도 있을 것입니다. 결국 웹 서비스 호출을 확인하기 위해 ASP.NET 런타임은 SOAP 패킷을 구문 분석해야 하기 때문입니다. 그러나 실제로는 그렇지 않습니다. ASP.NET AJAX는 모든 ASMX 요청을 가로채는 맞춤형 HTTP 처리기를 설치합니다(그림 3참조). /js 접미사가 있는 요청은 JSON 페이로드 및 웹 서비스 메서드와 직접 작업하여 다르게 처리됩니다. 결과적으로 SOAP는 전혀 관련되지 않으며 요청의 본문에는 입력 인수의 JSON 스트림만 포함하게 됩니다. AJAX가 아닌 요청의 경우 새 HTTP 처리기는 SOAP를 이해할 수 있는 원래 ASP.NET 처리기로 호출을 위임합니다.

ASP.NET AJAX 적용 방법

모든 사항을 고려할 때 필자는 UpdatePanel이 대부분의 개발 팀에 최적의 방식이라고 생각합니다. 이 방법을 사용하면 기존 ASP.NET이 방해를 받지 않으며 필요에 따라 기존 페이지를 수정할 수 있습니다. 또한 복잡하지 않고 시작하기 전에 많은 내용을 새로 배울 필요도 없습니다. 뿐만 아니라 UpdatePanel은 BLL에 대해서도 기존 웹 페이지와 같이 어느 정도 수준의 보호를 제공하며 긴 작업을 실행하는 비동기 ASP.NET 페이지를 완벽하게 지원합니다.

마지막으로 강조하고 싶은 것은 다양한 AJAX 플랫폼을 혼합하지 않도록 해야 한다는 것입니다. JavaScript 기본 제공 개체 확장이라는 측면에서 ASP.NET AJAX 및 다른 프레임워크 간에 충돌이 발생할 수 있습니다. 더 중요한 것은 현재 동작하는 제품 조합이 나중에도 동작하리라는 보장은 없다는 사실입니다. 특정 프레임워크의 새 버전에서는 이전에는 없던 충돌이 발생할 수 있습니다.

현재로서는 동기만 지원

AJAX 기능은 비동기 기능과 연결되는 경우가 많으므로 ASP.NET AJAX가 기본적으로 비동기적으로 프로그래밍된다고 가정하기 쉽습니다. 클라이언트 관점에서 이것은 분명 사실입니다. 작업은 서버에서 시작되며 현재 페이지는 추가 상호 작용에 사용할 수 있도록 유지됩니다.

그러나 ASP.NET AJAX는 ASP.NET 2.0 비동기 페이지를 지원하지 않으며 비동기적으로(비동기 HTTP 처리기를 통하는 것을 의미) 원격 호출을 구현하지도 않습니다. AJAX 웹 서비스 요청을 처리하는 HTTP 처리기는 동기적으로 작동합니다. 페이지 메서드를 처리하는 HTTP 모듈도 역시 동기적으로 작동합니다. 이는 ASP.NET 페이지가 비동기 처리를 위해 표시되었는지 여부에 관계없이 동일합니다. 이러한 구조적인 문제는 현재 코드 이름 "Orcas"라고 부르는 ASP.NET 이후 버전에서 해결될 것으로 보입니다. 현재로서 최선의 방법은 UpdatePanel 컨트롤을 사용하여 AJAX를 구현하는 것입니다.

Close [x]

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.