(10) Razor 강좌 – 디버깅

Article
08/15/2010

안녕하세요. 김대우 입니다.

코난이와 함께하는 Razor & WebMatrix 시리즈 강좌리스트

(1) WebMatrix와 Razor! 이제 시작합니다.

(2) WebMatrix 설치부터 Hello World까지

(3) Razor 강좌 - 기본 구문 및 주석 처리

(4) Razor 강좌 - 코드 블록과 POST 처리

(5) Razor 강좌 - 재사용 가능한 코드 생성

(6) Razor 강좌 - 레이아웃 페이지 구조 처리

(7) Razor 강좌 - 파일처리, 파일 업로드

(8) Razor 강좌 - 데이터베이스 처리

(9) Razor 강좌 - Helper 소개(이미지, 비디오)

(10) Razor 강좌 – 디버깅 - (지금 보고 계신 내용)

(11) Razor 강좌 - 캐시 처리

지난 시간에는 (9) Razor 강좌 - Helper 소개(이미지, 비디오)” 강좌를 진행 했습니다.

이번 시간에는 바로 이어서, “ (10) Razor 강좌 – 디버깅” 강좌를 진행 하도록 하겠습니다.
Razor에서 디버깅(Debugging)
웹 개발 이라는게 워낙 엮인 기술들이 짬뽕된, 짜장같은(?) 영역이 많아 우리 웹 개발자 분들 참 고생 많습니다. 특히, 데이터베이스 연계 부분이나, 사이트 제작에 필수적인 게시판이나 CMS 오픈소스 프로젝트 한두개 정도는 꿰고 있어야 하고, 디자인 영역이나 웹 저작 영역인 CSS까지도 이해가 필요합니다. 그뿐인가요, 최근에는 Open API나 외부 서비스 연동 관련 기술은 물론, Flash나 Silverlight과 같은 RIA쪽도 이해가 필요한 상황이지요.
이런 짜장들이 짬뽕되어(?) 뒹구는 웹개발 업무에, 다방면에 걸쳐 고민해야할 "디버깅"은 참 만만한 녀석이 아닙니다. 이게 서버의 오류인지, 내려 보낸 Ajax 스크립트의 문제인지, 사용자 브라우저 환경 문제인지, DB문제인지 걸러내는 것만 해도, 어떤 경우에는 고민스러울 경우가 많지요. 하지만 Razor에서는 조금 숨 돌리실만 하실 겁니다. WebMatrix와 Razor는 가장 최근에 발표된 웹 개발 방식인 만큼, 이러한 복잡한 웹 개발에 대한 디버깅을 위해 여러 기능들을 제공합니다.

저와 같이 Razor 디버깅에 대해서 차근차근 살펴 보시지요~
Razor와 WebMatrix의 디버깅 방식을 간단히 정리해 보면
- ServerInfo Helper를 이용해 서버 설정 정보를 일괄 출력, 디버깅에 이용 가능합니다.(PHP 하신 분들이라면, phpinfo와 유사하다고 보시면 됩니다.)
- 10년 넘는 역사를 가지고 있는 기존 ASP.NET의 디버깅-오류 정보 기능을 그대로 이용합니다.
- WebMatrix 자체 제공하는 Request 처리 기록을 이용해 오류 재현 등이 손쉽게 가능합니다.
- 기존 ASP나 PHP의 디버깅 방식인 출력값 처리 디버깅(변수 값 찍어보기) 형태로도 디버깅이 가능합니다.
- ObjectInfo Helper를 이용해 추적을 원하는 개체 정보를 정확히 얻어 디버깅에 도움을 받을 수 있습니다.
- WebMatrix에 기본 포함된 SEO 리포트 툴을 이용해 SEO관련 오류를 쉽게 처리 가능합니다.

ServerInfo로 서버 설정 및 환경 정보 조회
서버의 설정이나 환경 정보를 일괄 조회해 디버깅이나 설치 등이 잘 이루어졌는지 등을 알아볼 수 있습니다. 바로 디버깅의 시작이지요. cshtml 동작 여부 역시 이 테스트를 통해 확인 가능하지요. 아래처럼 수행 가능합니다.

<!DOCTYPE html>
<html>
 <head>
 <title></title>
 </head>
 <body>
 @ServerInfo.GetHtml()
 </body>
</html>

웹사이트 루트에 Debug라는 폴더를 만들고 하위에 ServerInfo.cshtml 파일을 만들고 위와 같이 올려 두었습니다.
이렇게 ServerInfo Helper를 실행하시면, 서버의 설정, 구성 환경 정보를 한눈에 보실 수 있습니다.

PHP에 경험이 있는 분이라면 바로 감이 오실겁니다. phpinfo() 와 같은 역할을 수행 한다고 보시면 됩니다. 다음으로 ASP.NET 디버깅 인터페이스를 봐 보도록 할께요.
Razor는 10년동안 서비스된 ASP.NET의 정확하고 상세한 오류 페이지 정보를 이용 합니다.
Razor는 ASP.NET의 성능과 안정성에 PHP처럼, 아니 제 경험상 PHP 이상으로 더 쉬운 개발 방식을 제공하는 기술입니다. 기본 베이스 엔진을 ASP.NET으로 이용하기 때문에 근간이 되는 디버깅이나 오류 정보를 확인 가능하지요.
예를 들어, Razor로 데이터베이스 삽입을 하다가 이런 오류가 발생한다면.(예시 오류 입니다. 재현하려 애쓰지 마세요~ ^_^;;;)

개발하면서 이렇게 잘 뽑혀져 나온 오류 정보만 슥슥~ 읽어도 어디 코드가 어떤 오류를 유발했는지 예측과 확인이 가능합니다. – 상세한 추적을 원할 경우에는 Call Stack 정보를 보셔도 어떤 루틴을 타다가 오류가 발생했는지도 확인 가능하지요.(물론 대부분의 운영-Production 환경에서는 이런 화면은 내부적으로 저장만 시키고, 예쁜 일반 사용자 대상 UI의 화면을 출력 하고 계실 겁니다.)
잊지마세요, Razor는 어느날 뚝딱 나타난 아이돌같은 녀석이 아니라 ASP.NET이라는 엄청난 스폰서(?)가 뒤에서 후원 해주고 있으며 마이크로소프트가 차세대 웹 개발 기술의 한 축으로 엄청나게 밀고 있는 녀석이라는 것 입니다.
WebMatrix에서 제공하는 Request 처리 요청 로깅을 이용한 디버깅
이거는 이 WebMatrix 개발 도구의 기능인데요. 개발하는 과정에서 로깅 기능을 이용해 발생하는 오류를 확인 / 상세한 오류 해결을 위한 가이드도 제공이 가능합니다.

이렇게, WebMatrix 왼쪽 하단의 Site 섹션을 선택하고, 왼쪽 위의 Requests를 선택하고 상단의 “Capture Request가 선택” 되어 있다면-기본선택 개발간 발생한 요청 처리를 자동 기록해 확인 가능합니다. 만약 오류가 발생한 게 있다면 해당 요청을 클릭하세요. 바로 상세 정보와 오류의 해결 방안에 대한 추천 가이드까지 제공 받을 수 있습니다. 와우~

예전 같으면, 개발 환경일지라도, IIS 웹로그 열어 죽어라 파거나 오류 보고 루틴을 직접 만들어 이용하셨을 겁니다. Razor에서는 그럴 필요 없어요~ 넵~ 나름 훌륭합니다. 개발 환경에서 이용하기에는 아주 딱이실 겁니다.
출력 값 처리 디버깅(변수 값 찍어보기)
기존 ASP나 PHP의 디버깅 방식인 출력 값 처리 디버깅을 물론 해 보실 수 있습니다. 예를 들어, 이런 형태입니다.

@{
var weekday = DateTime.Now.DayOfWeek;

if(weekday == "Saturday") {
 "토요일"
 }
 else {
 "아마 일요일"
 }

}

debug 폴더 하위에 output.cshtml 파일로 저장하고 실행했습니다. 아마도, if문에서 형변환(Casting) 관련 오류가 발생했을 겁니다.
이렇게 수정하면서 디버깅을 해 보시죠.

@{
 var weekday = DateTime.Now.DayOfWeek;
 @weekday;
 /*
 if(weekday == "Saturday") {
 "토요일"
 }
 else {
 "아마 일요일"
 }
 */
}

아마도, 이런 식으로 @weekday를 찍어보는 처리를 하실 수 있을 겁니다. 이런 방식을 찍어보는, 출력 디버깅 방법이라고 보통 이야기 합니다. 타입 형변환 관련 이슈이기 때문에 weekday 개체가 어떤 타입이길래? 이런 정보도 궁금 하실 겁니다. 이럴때 “ObjectInfo” Helper를 이용 가능합니다.

@{
 var weekday = DateTime.Now.DayOfWeek;
 @ObjectInfo.Print(weekday);
 /*
 if(weekday == "Saturday") {
 "토요일"
 }
 else {
 "아마 일요일"
 }
 */
}

찍어보니 weekday는 "DayOfWeek" 형이네요. String 과 비교하려 했으니 안됩니다. 따라서, String 타입으로 형변환 하면 되겠지요.

@{
 var weekday = DateTime.Now.DayOfWeek;
 //@ObjectInfo.Print(weekday);
 if(weekday.ToString() == "Saturday") {
 "토요일"
 }
 else {
 "아마 일요일"
 }
}

이렇게 ToString으로 형변환해 처리가 잘 되는 것을 확인 가능합니다. 이런 출력 디버깅 방식도 가능합니다.

참고로, 웹개발 경험이 많으신 분들만을 위한 부가 설명...

웹개발 경력자 분이시라면, Break point(중단점)을 걸고 단계별로 따라가면서 오류를 확인하고 싶으실 경우에는 무료로 제공되는 Visual Web Developer Express(무료 웹 개발 버전의 비주얼 스튜디오) 나 Visual Studio 이용해 개발하시면 가능합니다. 이 강좌는 WebMatrix와 Razor 강좌로 Visual Studio 디버깅은 보여드리기 좀 그렇네요. 하지만, 나중에 따로, WebMatrix & Razor 강좌 마무리 후에 준비해 보여 드리도록 할께요. ^_^ - 아 알고 있으시지요? Visual Studio에서도 ASP.NET MVC3 부터 Razor 개발이 가능합니다.
참고자료 : Introducing ASP.NET MVC 3 (Preview 1) - 영문
위 내용은 본 강좌와 무관하니, 그냥 그러려니 하고 넘어가셔도 됩니다. Razor를 위해 MVC나 ASP.NET을 모두 이해하실 필요는 없습니다.

WebMatrix에 기본 포함된 SEO 리포트 툴을 이용해 검색엔진과 맞지 않는 SEO관련 오류를 쉽게 처리 가능합니다.
예전에 WebMatrix 소개 동영상 강좌에서 언급해 드렸습니다만, 요즘은 웹사이트에 대한 사용자 유입에 검색엔진 만한 게 없지요. 이 검색엔진에 의해 잘 검색되도록 SEO 관련 처리도 많이 하고 계실 겁니다. 이 SEO 최적화를 검사 하는 게 만만치 않고 고가의 유료 서비스 등을 이용해야 할 수 있는데요. IIS7과 WebMatrix에서는 이런 SEO 최적화 기능을 제공하고 있습니다.
참고자료 :
[동영상 강좌] (2) WebMatrix 5분 리뷰~
IIS7의 SEO Toolkit 소개

왼쪽 아래 Reports를 선택하시고, 웹사이트를 선택하시면 이렇게 자동으로 리포트를 만들고, SEO 최적화를 위한 상세한 가이드라인까지 알려 줍니다. - 훌륭하죠~ 이러한 SEO 관련 작업도 WebMatrix와 내장해서 제공하고 있습니다.
자~ 이렇게 해서 WebMatrix와 Razor가 제공하는 디버깅 방안과 접근 절차에 대해서 소개해 드렸습니다. 기존 웹 개발 경험이 있는 분들은 쉽게 감이 오실 것 같아요~ 개인적인 소견으로 Razor는 어떤 면에서는 PHP의 디버깅 장점과 ASP.NET의 디버깅 장점들을 모두 가지고 있다고 느껴지네요. ^_^
그럼 다음 강좌는 마지막 WebMatrix & Razor 하는 강좌 (11) Razor 강좌 - 캐시 처리 에서 뵙도록 하겠습니다. 감사합니다. ^_^

참고자료 :

(1) WebMatrix와 Razor! 이제 시작합니다.
(2) WebMatrix 설치부터 Hello World까지
(3) Razor 강좌 - 기본 구문 및 주석 처리
(4) Razor 강좌 - 코드 블록과 POST 처리
(5) Razor 강좌 - 재사용 가능한 코드 생성
(6) Razor 강좌 - 레이아웃 페이지 구조 처리
(7) Razor 강좌 - 파일처리, 파일 업로드
(8) Razor 강좌 - 데이터베이스 처리
(9) Razor 강좌 - Helper 소개(이미지, 비디오)
[동영상 강좌] (1) WebMatrix 첫 실행 & Hello World까지 달려요~
[동영상 강좌] (2) WebMatrix 5분 리뷰~
[동영상 강좌] (3) Razor 강좌 - 기본 구문 및 주석 처리
[동영상 강좌] (4) Razor 강좌 - 코드 블록과 POST 처리
IIS7의 SEO Toolkit 소개

Introducing ASP.NET MVC 3 (Preview 1)

Partager via

(10) Razor 강좌 – 디버깅

Ressources supplémentaires