Lazy Developer

오늘 Internet Explorer 7 Release Candidate 1 버전을 설치했다.

일단 가장 맘에 드는 기능은 당연히..Tab 기능과 Quick Tabs 기능이다.
특히 Quick Tabs 기능은 정말 유용한 것 같다.




ZDNet의 뉴스를 보니, Quick Tabs를 첫 페이지로 하고 싶다는 사용자들의 요구가 상당하다는데..
첫 페이지 몇 개를 설정해놓고 처음에 Quick Tabs가 뜬다면 아주 좋을 것 같다..

오늘 몰라서..한참을 헤멨던 것....-_-;;

1. 하고자 했던 것은, 평소에는 Mouse Over, Out 시에 이미지가 바뀌는 버튼이 선택되고 나면 바뀌지 않고 선택된 채로 남아있게 하는 것. Onmouseover이벤트에 함수가 있는것을 지우는 것은 간단했다. onmouseover=null; 했더니 바로 없어졌으니까. 그런데 이렇게 null로 된 버튼에 다시 이벤트를 주는 것에서문제가 발생했다. 처음 짠 코드는 어땠냐면..

button.onmouseover = "changeImage()";

하지만, 이렇게 하면.. 이 changeImage()는 함수가 아니라, 문자열로 인식되기 때문에 아무런 효과가 없다..-_-;;

구글에서 한참 뒤진 결과..방법을 알게 되었다.

button.onmouseover = function() { changeImage() };

이렇게 function() 을 붙여줘야, 함수라는 개체로 인식이 된다는 것...

2. 그런데, 이것보다 더 좋은 방법을 조금 있다가 누군가에게서 배워서 알게 되었다는 것...-_-;;;

attachEvent() 라는 메서드를 쓰면 된다.

즉,

button.attachEvent('onmouseover',changeImage);

* 그런데, attachEvent는.. IE에서만 된다...FireFox를 생각한다면 쓰면 안 됨...(현재 프로젝트는 Outlook에 있는 IE만을 Target으로 하고 있기 때문에 그냥 뒀다..)

 

현재 참여중인 프로젝트에서는 소스 제어 툴로 Team Foundation Server의 Source Control을 사용하고 있다. 하지만, 아직 Beta 상태인 제품이라 부족한 면이 많은듯 싶다. (아니면 원래 스펙에 빠져있는 건지도? -_-;;)

암튼, 문제가 되었던 것은..

개발자 A(편의상..)가 개인적인 사정으로 프로젝트에서 나가게 되었다. 그런데.. 그만 편집하고 있던 파일을.. 체크인 하지 않고 체크아웃을 해버린 채로..나간 것이다.

이럴경우, Visual SourceSafe 이라면 간단하다. Admin Tool에 접속해서, 강제로 체크인해버리면 끝이니까.

그런데, TFS에는 별도의 Source Control에 대한 Admin Tool 은 없는 것이다.... -_-;;;

하지만, 방법이 없는 것은 아니다. TF.exe 명령어 Command를 사용해서 이런 일들을 할 수가 있다.

TF UNDO filespec /WORKSPACE:workspace;checkout_user

TF LOCK filespec /LOCK:NONE /WORKSPACE:workspace;lock_user

이 방법을 사용해서 개발자 A가 체크아웃을 해서 잠궈버린 파일을 다시 돌려 놓을 수가 있다. 위의 두 가지 구문은 사실은 좀 다르지만, 실제 효과는 같다고 보면 된다.

아래는 샘플.. (위의 구문과는 좀 다르지만 /Server 스위치를 사용해서 반드시 TFS서버를 지정하도록 한다.)

TF UNDO $/Project/SomeFile /WORKSPACE:WorkspaceOfA;UserA /Server:TFSServerName

ASP.NET 2.0에는 Master Page라는것이 새로 생겼다.  마스터 페이지의 개념을 MSDN에 나온 그대로 옮기면 다음과 같다.

"ASP.NET 마스터 페이지를 사용하면 응용 프로그램의 페이지에 대해 일관된 레이아웃을 만들 수 있습니다. 단일 마스터 페이지는 응용 프로그램의 모든 페이지 또는 페이지 그룹에 대해 원하는 모양과 느낌 및 표준 동작을 정의합니다. 그런 다음 표시할 콘텐츠가 포함된 개별 콘텐츠 페이지를 만들 수 있습니다. 사용자가 요청한 콘텐츠 페이지는 마스터 페이지와 병합되어 마스터 페이지의 레이아웃과 콘텐츠 페이지의 콘텐츠가 조합된 결과가 만들어집니다."

그런데, Master Page - Content Page가구성이되면, 마치 ASCX처럼 내부로 중첩된 컨트롤들의 Client ID가 아주복잡해지는 것을 소스보기에서 볼 수가있다. 이렇게..

그래서, 자바스크립트를 사용해서 제어하고자 할 때 반드시 서버사이드에서 그 컨트롤의 ClientID를 구해서 해야한다.다음은 Master Page에서 자바스크립트로 Content Page의 컨트롤을 제어하는 샘플이다.

마스터 페이지에는 버튼 컨트롤과 텍스트 박스 컨트롤을 하나씩 올려 두었다.

ASPX 소스는 아래처럼 된다.



컨텐트 페이지에는 텍스트박스 컨트롤을 하나 올렸다.


ASPX 소스는 아래처럼 구성된다.


목표는 마스터페이지에서 버튼을 눌렀을 때, 컨텐트 페이지의 텍스트 박스에 "aaa"라는 값이 들어가게 하는 것이고, 이를 자바스크립트를 사용해서 수행하는 것이다. 그 코드는 다음과 같다.



주석에도 설명이 되어 있지만, 포인트는 마스터 페이지에 있는 PlaceHolder 컨트롤 내부에서 그 컨텐트 페이지에 있는 컨트롤을 찾는 것이다. 일단 찾은 후에는 그 ClientID 속성을 구할수 있으므로, 이 샘플보다 복잡한 스크립트도 얼마든지 수행시킬 수가 있다.

별로 바뀐게 없는 것 같은데....

Span 태그와 Div 태그는 실제로 아주 비슷하고 기능상으로 거의 차이가 없다. 하지만 이 두 개의 태그는 사실 매우 다르다. http://webdesign.about.com/od/htmltags/a/aa011000a.htm - 여기에 매우 설명이 잘 되어 있다.

이 문서에 의하면,

The <div> tag defines logical divisions in your Web page. In terms of layout, the <div> tag does only one thing, it determines the alignment of that section of your page.
Div 태그는 웹 페이지에서 논리적인 구획을 정의한다. 레이아웃 적인 측면으로 보면, Div 태그는 한 가지 일만을 하는데, 그것은 바로 페이지의 페이지의 섹션 정렬을 지정하는 것이다.

The <span> tag has very similar properties to the <div> tag, in that it affects the style of the text it encloses. Items in the <span> can be aligned or given specific style attributes.
Span 태그는 div 태그와 매우 비슷한 속성을 가지는데, 그것이 감싸고 있는 텍스트들의 스타일에 영향을 준다. Span 태그 안의 아이템들은 특정한 스타일 속성을 가지게 되거나 정렬될 수 있다.

The primary difference between the <span> and <div> tags is that <span> doesn't do any formatting of it's own. The <div> tag acts as a paragraph break, because it is defining a logical division in the document. The <span> tag simply tells the browser to apply the style and align rules to whatever is within the <span>.
Span 태그와 div 태그의 가장 큰 차이는, span 태그는 자체로는 어떤 기능도 하지 않는다는 것이다. Div 태그는 마치 한 문단처럼 행동하는데, 문서의 논리적인 구획을 정의하기 때문이다. Span 태그는 그 내부의 요소들이 특정한 스타일이나 정렬 규칙을 가진다는 것을 브라우저에게 알려줄 뿐이다.

그래서 (내가 몇 번 겪었던 일이긴 한데) Div 태그를 두 개 연속으로 쓸 경우에는 줄나눔이 발생을 하게 된다.

자, 그래서

<div>div1-text</div><div>div2-text</div>
<br>
<br>
<span>span1-text   </span><span>span2-text</span>

이렇게 작성된 HTML의 경우, 이렇게 보인다.

요즘은 Ajax 때문에...HTML에 관심이 많다...ㅎㅎㅎ

우리는 Internet Explorer 등의 웹 브라우저를 통해서 인터넷을 보게 된다. 주소 창에 주소를 입력하거나, 즐겨 찾기에서 선택을 하기도 하고, 또는 링크를 누르는 동작을 통해서 웹 페이지들을 탐색한다. 하지만, 그 내부적으로는 HTTP 프로토콜을 통해서 서버에 Request를 보내고 그에 대한 Response를 받는 복잡한 동작이 이루어지게 된다. 그 Request에는 Cookie나 사용자의 입력값 등의 정보 들이 Header에 들어가게 되고, 이런 정보들은 실제 웹 브라우저에서는 보이지 않는다.

웹 애플리케이션을 개발한다면, 이런 정보들이 제대로 들어가고 있는지를 보는 것은 중요하다. 대부분의 웹 애플리케이션에서 서버 사이드에 있는 로직들은 이런 Header정보를 많이 사용해서 처리하게 되는데, 디버깅 환경이 아니라 실제 운영 환경에서 문제가 생겼을 때 브라우저에서는 Header 정보를 볼 수가 없기 때문에 문제를 해결하기가 쉽지가 않다.

Fiddler는 이 HTTP Request/Response 정보를 볼 수 있게 해주는 아주 유용한 툴이다. http://www.fiddlertool.com/fiddler/ 에서 다운로드받을 수 있다. NetMon 등을 통하면 물론 그 컴퓨터의 모든 네트워크 트래픽을 모니터링 할 수가 있지만, 이 Fiddler는 인터넷 프로토콜만을 모니터링해주기 때문에 웹 개발자들에게 아주 유용하다.

Fiddler의 화면이다. 왼쪽에는 History가, 오른쪽에는 각 세션의 자세한 정보가 나타나게 된다.

각 세션의 Request/Response Header 정보를 자세하게 볼 수 있다.

또 하나의 유용한 기능, 웹 페이지의 Response Time 정보를 알 수가 있다.

 

C# 1.X에서는 파라미터로 넘어온 문자열에 대해서 보통은 아래와 같은 방식으로 체크를 했었다.

if (str != null && str.Length != 0)

{

}

하지만, 이제 C# 2.0에서는 이렇게 길게 코딩할 필요가 없어졌다...!!!

if(!String.IsNullOrEmpty(str)

{

}

이렇게 간단하게 한 번의 메소드 호출로...해결할 수 있다.

그리고, 차라리 젤 위에 있는 예전 방식으로 하고, 아래 방식은 절대로 쓰지 말 것...

If(str != null && str != "")

{
}

http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en#Overview

다음 주소에 가시면, IE Developer Toolbar라는 것을 다운로드받을 수가 있다. 이 툴바는 웹 애플리케이션 개발자/디자이너에게 아주 유용한 많은 기능을 제공한다.

Developer Toolbar 화면





Show Ruler
이 기능은 마우스로 드래그한 부분만큼의 길이를 측정해주는 기능이다. 웹 페이지를 만들다 보면 사실 넓이나 높이를 지정해줘야 하는 경우가 꽤 있는데, 이럴 때 나는 사실 대부분 첨엔 대충 정해놓고 고치면서 맞추는 방식을 사용했다. 하지만, 지금은 이 기능을 사용해서 꽤 자세하게 맞출 수가 있다.

Ruler를 사용하는 화면




Resize
특정 해상도에 맞춰서 IE 창 크기를 자동으로 조절해준다. 디자이너가 여러 해상도에서 어떻게 화면이 나올지를 보는데 좋을 것 같다.

Images
이걸 선택하면 페이지 상의 이미지의 정보들을 화면에서 볼 수 있다. 파일 사이즈, 경로 등의 정보들을 선택해서 볼 수 있고, 통합 리포트도 볼 수가 있다.


Validate
HTML, CSS 등의 표준에 맞는 지를 검증해주는 기능이다. 클릭하면 http://validator.w3.org 사이트로 링크되면서 페이지에서 표준에 맞지 않는 에러등을 리포트해준다. (Visual Studio 2005 등에도 거의 비슷한 기능이 있다)


Outline
가장 잘 쓰고 있는 기능이다. 대부분의 웹 페이지는 Table 이나 Div 등을 써서 페이지의 레이아웃을 잡게 되는데, 이런 용도로 사용된 태그들은 대부분 border 라인을 보이지 않게 한다. (레이아웃만을 잡는 태그니까, 보이지 않게 하는 것이 디자인 상 좋기 때문에) 이 기능을 쓰면 그 숨겨진 경계선들이 다 보이게 된다. 간혹 웹 페이지를 개발하다가 레이아웃이 깨지는 경우가 있는데, 이런 경우에 경계선이 숨겨져 있으면 참 찾기가 힘들다. 그럴 때 아주 유용하다.

Table의 모든 Cell 태그를 outline한 화면




View
HTML 내부에 있는 Class, ID, Link 등의 정보를 화면에 출력해준다.

Disable
화면에서 Cache, 쿠키, 자바스크립트, CSS를 Disable시켰을 때의 효과를 알고 싶다면, 이 기능을 사용하면 된다.

View DOM
이 기능을 선택하면 DOM Explorer라는 것이 브라우저의 하단에 생긴다. 이 DOM Explorer를 통해서 페이지의 HTML구조를 트리 형태로 탐색해 볼 수가 있다. 트리에서 노드를 선택하면, 그 노드에 대한 정보가 옆쪽에 출력이 되고, 브라우저에서도 해당되는 부분이 깜박이면서 표시가 된다. 이 역시 웹 페이지 개발할 때 아주아주 유용하다. 그리고 HTML의 구조를 파악하는데 도움이 되기 때문에, 디자이너가 준 HTML을 개발자가 이해할 때 매우 도움이 될 것 같다.

DOM Explorer 화면