태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

DOM과 Javascript로 HTML문서를 트리 구조의 객체로 접근할 수 있습니다.

여기서 말하는 객체는 HTML의 element를 말합니다. html - body - div식의 각 HTML 태그들이 하나의 객체로 표현되죠.

이때 HTML문서의 어느 객채에 접근할 건지를 나타내는 방법으로 XPath(XML Path Language)를 사용합니다.

예를 들어 다음의 XPath를 보면,

//BODY[0]/DIV[8]/SPAN[0] 는

HTML문서내의 첫 번째 BODY의 자식 중 8번째 DIV내의 0번째 SPAN을 가리킵니다.

그리고 아래의 자바스크립트는 XPath를 구하는 함수입니다. getXPath()를 호출하면 되는데 예제와 함께 봅시다.

실행 결과는

//BODY[0]/DIV[0]/SPAN[0]

입니다.

이제, XPath를 구했다면 이 경로로 다시 HTML객체를 얻어올 수 있어야 합니다. 다음의 자바스크립트 함수는 지정된 XPath에 해당하는 HTML객체를 가져오는 함수입니다.

함수의 인자로 XPath를 넣어주면 됩니다.

위의 두 함수는 XML에서 사용되는 XPath와 형식이 동일합니다. 따라서 XPath와 관련된 다양한 함수를 적용할 수 있습니다.



자바스크립트는 클라이언트 사이드 언어인 만큼 클라이언트 웹 브라우저에서 실행됩니다. 따라서 자바스크립트를 디버깅 하려면 웹 브라우저에 미약하게나마 디버깅 기능이 있는 파이어폭스나, 다른 플러그인을 설치해야 가능했습니다. 하지만 비주얼 스튜디오가 있다면 익스플로러와 연동해, 완전한 자바스크립트 디버깅이 가능합니다.

준비물:
인터넷 익스플로러 6.0 이상
비주얼 스튜디오 2003 이상

1. 익스플로러 '옵션 - 고급'에서 '스크립트 디버깅 사용 안함' 체크 박스 2개(기타, IE)를 해제합니다.

2. 익스플로러를 껏다 켠후, 디버깅할 HTML파일을 열고 메뉴의 '보기 - 스크립트 디버거 - 열기'를 하면 디버거 선택창이 나옵니다.

3. 여기서 자기가 좋아하는 비주얼 스튜디오를 선택하면 비주얼 스튜디오가 열리고 HTML파일이 뜹니다.

4. 이제 비주얼 스튜디오가 지원하는 거의 모든 디버깅기능 - 브레이크 포인트, 콜 스택, 워치 등을 사용할 수 있습니다.

5. 방금 막 디버거를 열었다면 페이지 로드가 끝난 상태일테니 원하는 곳에 브레이크 포인트를 걸고 주소창에서 엔터를 치면 (새로고침은 안됨) 디버그가 동작하며, 실행중인 문장을 따라 디버깅이 가능합니다.

참고: 디버깅 옵션을 켜면 스크립트 에러가 뜰 때 디버깅 할거냐고 묻는데, 여기서 디버깅하면 IE와 연결이 잘 안되는 경우가 있습니다. 이럴때는 보기에서 디버거를 열면 됩니다.

Visual Studio 2005의 특징 중 하나가 Unit Test입니다. 하지만 팀 버전 이상을 써야 가능하죠. 게다가 이클립스의 JUnit처럼 간단하고 깔끔하게 되는게 아닙니다.

윈폼용 유닛 테스트는 그리 낯설지 않지만, 문제는 ASP.NET의 경우입니다. 아래에선 제가 겪은 몇 가지 단점들 입니다. 일부 이슈에 대해서는 스트레스를 조금이나마 줄일 수 있는 팁을 적어 놓았습니다.

1. 속도
가장 먼저 유닛 테스트를 하게 되면 적잖게 당황하게 되는게, 속도 문제인데, 매우 느립니다. 대략 펜티엄4 3.0기가에서 테스트용 development server가 실행되고 테스트가 완료되는데 까지 거의 10초 이상이 걸립니다.

속도 정도야 애교죠. 유닛테스트가 보우하사 우리 코드를 지킬 수 있다면, 단 몇 초 여유롭게 기다리는게 코더의 노동보다 힘들까요?

2. 엑서서
두번째 문제는 엑서서입니다. 이클립스는 이 경우를 어떻게 해결했는지 잘 기억이 안나지만... (혹시 아시는 분은 리플을 달아주세요) VSTS(visual studio team system)의 유닛테스트는 클래스의 private, protected멤버 등을 접근하기 위해서 엑서서라는 클래스를 별도로 만듭니다. 테스트 프로젝트를 만들면 자동으로 생성되는 vscodegenaccessors.cs 파일이죠. 일반적으로 프라이빗과 프로텍티드 멤버를 외부에서 접근하지 못하는 것은 당연합니다. 아마 vsts에선 유닛테스트를 위해 별도의 편의?를 봐주지 않기 위해서 C#의 언어적 특성으로 이를 해결한 듯 합니다.

아무튼 이런 불편한 래핑 클래스인 엑서서의 등장으로, 프라이빗 메소드를 테스트 하려면 엑서서를 거쳐서 호출해야 합니다.

이 정도야 그냥 넘어갈 수 있다는 분!

만약에 테스트할 메소드의 signature가 수정되었다면 상황이 어떻게 될까요??

컴파일이 안됩니다.

그럼 어떻게 하나요 - 물론 엑서서는 vs에서 자동으로 만들어주긴 하지만, signature의 변경을 일일히 감지해서 알아서 척척 생성해 주지는 않습니다. 프로그래머는 메소드에서 오른쪽 버튼을 누른 후, create private accessor를 눌러서 엑서서가 자동으로 생성되게 해야 합니다.

3. 애트리븃
모든 테스트 메소드에는 아래와 같은 속성이 붙습니다.

  [TestMethod()]
  [HostType("ASP.NET")]
  [AspNetDevelopmentServerHost("website", "/pms")]
  [UrlToTest("http://localhost/pms")]
  public void InsertTaskTest()

덕지덕지 붙은게 여간 지저분한게 아니죠.

여기서 한가지 팁이 있다면, AspNetDevelopmentServerHost에 웹사이트 경로를 써 줘야 테스트가 돌아가는데 msdn에는 첫번째 인자에 full path를 쓰라고 되어있습니다. 하지만 상대경로를 써도 잘 작동합니다. (기본 웹사이트 경로가 vs 디폴트로 되어 있을때 그렇습니다. 만약 다른 폴더라면 옵션에서 바꿔주면 됩니다.)

4. 디버깅
와! 드디어 ASP.NET의 유닛테스트가 $0인 JUnit에 무릎을 꿇을 때가 왔습니다. 속도, 엑서서, 애트리븃에 불편한 인터페이스까지는 다 봐줍시다. 하지만 ASP.NET 유닛테스트의 디버깅을 생각해보면 저는 정말 화가 납니다. 안그래도 버그가 튀어났는데, 디버깅까지 불편하면 얼마나 화가 날까요??

설마 자바스크립트를 alert()으로 디버깅 하는정도 일까요?? 다행이 그 정도는 아닙니다. 하지만 이걸로 디버깅을 해보면 반드시 디버깅 할 일 없이 완벽하게 짜야겠다는 생각이 듭니다.

잡설이 길었습니다. 왜냐하면 윈폼에서는 먹던 start selected test project with debugger버튼이 without debugger와 똑같은 반응을 보이거든요! 즉, 일반적인 방법으로는 디버깅이 되지 않는다는 말입니다.

그럼 어떻게 해야할까요?

제가 이 문제를 봉착했을 때 재밌는 걸 발견했는데,

System.Diagnostics.Debugger.Break()

라는 메소드 입니다. 이 메소드를, 'F9를 눌러 설정하던 그라데이션 입혀진 브레이크 포인트' 대신에 넣으면 됩니다. 그럼 without debugger로 실행했을 때, 저 메소드를 만나면 디버거 선택창이 뜹니다. 여기서 적절한 디버거를 선택해주면 됩니다.

물론 여러분이 기대하는 만큼 온전하게 작동하지는 않습니다.

참고:
How to: Debug while Running a Test in an ASP.NET Solution 
http://msdn2.microsoft.com/en-us/library/ms243172.aspx#DebuggingOnCassini

Ajax는 그리스의 트로이 전쟁 영웅이라고 합니다. 네덜란드의 축구 클럽 이름이 거기서 나왔다는 군요.

네덜란드의 J발음은 Y와 비슷해서 (유럽에선 그렇다고 합니다.) 아약스라고 발음한다고 합니다.

http://www.blazenewmedia.com/articles/ajax-or-ajax

Ajax는 Asynchronous Javascript and XML의 약자이므로

약자 그대로 에이젝스라고 하는게 맞을 것 같긴 합니다.

인터넷의 여러 글들을 조사 해보면

미국에서는 에이젝스

유럽에서는 아약스

캐나다 에서는 에젝스? 라고 발음하며

약자 그대로를 발음하는' 에이-제이-에이-엑스'파도 있습니다.

http://discuss.joelonsoftware.com/default.asp?joel.3.326217.17

하지만 Ajax라는 용어를 처음 사용한 Jesse James Garrett는 자기가 원하는대로 발음하라고 했다더군요.

참고로 그는 AJAX가 아닌 Ajax를 원한답니다.

HTTP를 이용한 프로그램을 만들때 가장 골치아프지만 중요한 것 중 하나는 상대경로의 처리이다.

상대경로는 파일시스템의 경우와 비슷하다. 예를 들어 현재 디렉토리가 c:\test이고, text.txt라는 상대경로가 주어졌을 때, 이를 절대경로로 표현하면 c:\test\text.txt이다. 반면 상대경로가 ../text.txt는 c:\text.txt를 가리킨다.

URL의 경우엔 파일경로의 이 개념을 단순히 URL 나타낸 정도 밖에 없다.http://WebReference.com/html/라는 Base URL이 있고, 이에 대한 Relative URL이 about.html라면 Absolute URL은 http://WebReference.com/html/about.html가 된다.

참고로 Base URL은 다음과 같이 계산한다.

User agents must calculate the base URI according to the following precedences (highest priority to lowest):
1. The base URI is set by the BASE element.
2. The base URI is given by meta data discovered during a protocol interaction, such as an HTTP header (see [RFC2616]).
3. By default, the base URI is that of the current document. Not all HTML documents have a base URI (e.g., a valid HTML document may appear in an email and may not be designated by a URI). Such HTML documents are considered erroneous if they contain relative URIs and rely on a default base URI.

1번과 2번이 우선순위가 높긴하지만 대부분은(귀찮으면) 3번으로 처리해도 된다.

파일 시스템의 경우와 같이 상대경로는 현재 URL내의 주소만 가르킬 수 있는것이 아니다. 상대경로의 앞에 디렉토리를 이동하는 특수한 문자를 붙여서 Base URL을 이동할 수 있는데 이는 /나 //, ../ 같이 지정된 형식이다.

이것을 해결하는 과정이 바로 상대경로 처리이다.

파이썬에서는 아주 고맙게도 라이브러리에서 지원해준다.

>>> import urlparse
>>> urlparse.urljoin('http://www.egloos.com/egloo/insert.php?eid=b0003850', '../test.html')
'http://www.egloos.com/test.html'

혹시 다른 언어에서 이 기능이 필요한데 라이브러리를 찾지 못한 경우엔 아래 두 링크를 보고 직접 만들면 된다.

http://www.webreference.com/html/tutorial2/3.html
http://www.tcpipguide.com/free/t_URLRelativeSyntaxandBaseURLs-3.htm

첫번째 링크의 예제는 단순해서 상대경로 '//www.internet.com/'가 ../와 비슷하게 보이지만 두번째 링크를 보면 알 수 있듯이, 이것은 호스트 네임을 바꾸는 것이므로 혼동하지 말자.