안녕하세요. 코난 김대우 입니다.
지난 2011년 1월 14일에 WebMatrix 정식버전(RTW)이 발표되었으며, 이 문서의 내용은 최신의 WebMatrix 정식버전에 맞춰 수정 되었습니다. 감사합니다.
- 최종 수정일 : 2011년 1월 19일
================================================================================
 

안녕하세요. SQLER의 코난 김대우 입니다.

어제의 강좌에 이어서, 이번에는 “(2) WebMatrix 설치부터 Hello World까지”라는 내용으로 진행해 보도록 하겠습니다.

 

사실 “설치”라고 말씀 드리기 어색할 정도로 그 과정이 쉬워서 쬐끔~ 민망하기도 하네요(그만큼, 설치 자체는 쉽다는 이야기에요~)

그럼 시작해 보겠습니다.

 

진행할 강좌는 아래와 같은 시리즈로 풀어볼 생각이에요~

 

(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 강좌 - 캐시 처리

 

WebMatrix설치하기 전에 알아두시면 좋습니다.

최근 마이크로소프트가 웹에서 작지만 여러 개발자와 관리자에게 도움이 되는 일들을 많이 진행하고 있었는데요. 그 중 하나가 바로 Web Platform 입니다. 제가 예전에 작성해둔 강좌도 옆에 있는데요.

 

마이크로소프트 웹 플랫폼 - (1) 다시 쓰는 웹 플랫폼

마이크로소프트 웹 플랫폼 - (2) 마이크로소프트 웹 플랫폼은 무엇인가?

 

마이크로소프트 웹 플랫폼에서 제공하는 다양한 개발환경, 데이터베이스, 프레임워크, 심지어는 오픈 소스 소프트웨어들을 하나의 어플리케이션으로 모두 설치/업데이트 하실 수 있습니다. 그게 바로 플랫폼 설치 관리자 – Web Platform Installer(이하 WPI)” 입니다.

 

이 “웹 플랫폼 설치 관리자”(이하 WPI)를 이용하시면 여러 장점들이 있는데요.

- 복잡한 웹서버 설치, 유지 보수 환경 구성을 클릭 딱 “한번”에 끝낼 수 있도록 쉬운 설치를 제공합니다.

- 개발환경과 배포환경, 웹서버 에서 일관적으로 어플리케이션에 필요한 구성요소들과 프레임워크, 데이터베이스, 관리 도구 둥을 유지 가능합니다.

- 웹사이트 및 웹 어플리케이션 제작에 필요한 웹서버 기능, 프레임워크, 데이터베이스, 개발환경을 이 WPI안에서 모두 제어가 가능합니다.

- 국내외 최고 수준의 오픈 소스 소프트웨어(OSS)를 클릭 한번으로 바로 설치 – 사용이 가능하며, 국내에서 가장 많이 사용되는 XpressEngine(구, 제로보드), Textyle, KimsQ와 같은 토종 오픈 소스 소프트웨어도 이 WPI에서 한번 클릭으로 설치가 가능합니다. (아~ 지금 보고 계신 이 www.sqler.com 웹사이트도 이 WPI의 XpressEngine클릭 한번으로 제작된 커뮤니티입니다.)

 

오늘 우리의 목표인 WebMatrix설치 도 마찬가지 입니다. 이 WPI를 통해서만 설치 가능합니다. – WPI에 대한 이야기는 나중에 천천히 더 풀어 보도록 하겠습니다. - 현재 Beta버전이지만, 이런 설치에 대한 큰 그림은 바뀌지 않을 겁니다. ^_^

WPI 관련 참고 링크 : http://www.microsoft.com/web/downloads/platform.aspx

 

설치 패키지 크기

IIS Developer Express 웹서버, WebMatrix 개발도구, SQL CE 데이터베이스, ASP.NET Web Pages & Razor 개발 엔진이 포함된 WebMatrix의 설치 패키지 크기는 단 15M입니다. 설치 과정은 1분 이내 다운로드 및 설치가 가능하도록 목표로 하고 있습니다. 만약, .NET Framework4가 설치되어 있지 않다면 설치가 필요하며 포함한 전체 패키지는 50M 입니다.

 

설치 가능한 시스템 환경

지원하는 시스템 환경은 아래와 같으니 참고 하시길 바랍니다.

Windows XP Pro SP3이상, Windows Vista SP1이상, Windows 7, Windows Server 2003 SP2이상, Windows Server 2008, Windows 2008 R2 에서 설치가 가능합니다. 사실상 XP부터 모든 환경을 지원한다고 보시면 좋을 것 같아요.

아, 저 코난이는 당연히 새술은 새 부대에! 제가 진행하게될 WebMatrix와 Razor 강좌는 모두 Windows7 환경으로 진행하게 될 겁니다.

 

설치 진행!!! – 살짝 민망하지만, 클릭질 한번에 끝납니다. 저와 설치를 진행해 보시죠~

우선 "WPI - 웹 플랫폼 설치 관리자" 공식 다운로드 사이트에 접속합니다.(WebMatrix 실행에 꼭 필요한 여러 툴과 플랫폼들을 한번에 다운로드 및 설치 가능합니다. - 개별 다운로드 후 설치 과정은 추천해 드리고 싶지 않습니다.)

www_sqler_com_0012.jpg

다운로드 사이트 링크 : http://www.microsoft.com/web/downloads/platform.aspx


어서 우측 맨 위에 초록색 "다운로드"를 클릭하시면 앞에서 소개해 드린 “웹 플랫폼 설치 관리자 – Web Platform Installer - WPI” 설치 화면이 보입니다.

 

 www_sqler_com_0014.jpg

자~ 설치가 끝나시면 앞에서 소개해 드린 “웹 플랫폼 설치 관리자-WPI”가 실행됩니다.

참고로, 이 WPI는 3.0 버전이에요. 여기 에서 “Microsoft WebMatrix”의 "추가"를 선택하고 아래쪽 설치를 클릭!

 

만약 WebMatrix Beta1이나 Beta2, Beta3를 사용하셨던 경우에는 제어판 - 프로그램 제거에서 "Microsoft Web Platform Installer"와 "Microsoft WebMatrix"를 제거 후 설치 하시면 되니 도움 되시길 바랍니다.

www_sqler_com_0015.jpg

대략 이런 녀석들을 설치한다는 화면과 함께 - 설치를 수행합니다. - 주의깊게 봐 두세요. WebMatrix 개발을 위해 이런 녀석들이 필요하며, WPI가 자동으로!!!! 다 알아서 설치해 줍니다. 쌩유!

 

찬찬히 어떤 녀석들이 설치되는지 살펴 보세요. (WPI의 장점!!! 기존에는 개발자와 관리자가 개별적으로 구성 했을 겁니다. 개별 구성했다가는 설치만 3박 4일 걸릴지도. 쿨럭… 보시는 것처럼,WPI가 이런 복잡한 설치/개발환경 구성을 깔끔하게 자동화/단순화/유지보수 해 줍니다.) 이제 설치가 자동으로 진행 되실 거에요~

 

www_sqler_com_0016.jpg

 

설치가 실행되면서 WebMatrix 실행/개발에 필요한 모든 환경들이 자동 구축되지요.~ 어흑~ 생유~

 

www_sqler_com_0017.jpg

이렇게 설치가 끝나면 푸른색 "실행"을 누르셔서 바로 WebMatrix를 실행하시거나, 마침을 눌러 종료 하시고, 설치된 프로그램 들 중  WebMatrix를 실행 하셔도 됩니다.


www_sqler_com_0018.jpg

바로 클릭해서 실행하시면 이렇게~ WebMatrix 시작 화면을 보실 수 있습니다!!!

 

WebMatrix 설치 과정 요약!

(1) “웹 플랫폼 설치 관리자”를 실행하고 - http://www.microsoft.com/web/webmatrix/download/

(2) WebMatrix를 클릭한다.

(3) 끝~ 참 쉽죠잉~

참고로, Simple, Small, Seamless가 WebMatrix의 설계 철학이라고 하네요. 설치 과정에서 보신 것처럼, Small과 Simple은 확실히 철학 맞는 것 같습니다.(Razor를 이제 저랑 공부하시면 더욱 더 확실히 Simple의 철학을 느끼실 것 같아요!!!)

 

이제 Hello World찍어 볼까요~

자 이제 WebMatrix 처음 시작 화면에서 "내 사이트"를 선택하고, 기본으로 되어있는 WebSite1을 선택합니다.

www_sqler_com_0019.jpg

드디어 잘 모르겠지만, WebMatrix가 시작된 것 같습니다. 넵~ 바로 첫 번째 WebMatrix를 이용한 Razor 개발!!! 시작합니다.

 

www_sqler_com_0020.jpg

왼쪽 하단의 “파일”을 클릭하고, 파일을 사이트에 추가 합니다. - ”새 파일 만들기”를 클릭합니다.

 

www_sqler_com_0021.jpg

“Razor”를 실행하기 위해~ CSHTML을 선택하고, 이름을 HelloWorld.cshtml로 지정한 다음 확인을 클릭!

 

www_sqler_com_0022.jpg

기본 HTML 코드가 완성되었을 겁니다. 중간 <Body> 영역에 아래 한 줄을 추가합니다.(저와 기본 HTML 구문이 틀리셔도 무방합니다. 파일을 만들고 아래 구문만 처리 하셔도 됩니다.

 

Hello, 월드 : @DateTime.Now

 

한 줄을 추가하고, F12번 키를 누르거나 위의 “실행” 버튼을 누르시면 끝! (@ 선언자를 이용하지요.)

 

www_sqler_com_0023.jpg

출력 완료~ (한글처리, 결과의 한글 날짜 출력 문제 없음을 확인해 보세요.)

자. 이렇게 WebMatrix 설치부터 Hello World까지 하나의 포스트로 진행해 보았습니다. 대충 WebMatrix 설치에 대해서 감이 잡히시나요?


이후 강좌 진행을 위한 Helper 설치

앞으로의 강좌 진행을 위해 Helper를 설치해 두시면 편리합니다. Helper는 Razor의 강력한 모듈화 기능인데요. 이후 강좌에서 차근차근 설명 드릴거에요. 아래에서는 설치 과정이니 미리 진행해 두시면 편리하니다.


기본으로 실행시 나오는 URL이 http://localhost:8080 이라면 뒤에 _Admin을 붙여주세요.

http://localhost:8080/_Admin

 

www_sqler_com_0024.jpg

그러면, 관리 페이지 접근 메세지와 함께 처음 접근이기 때문에 암호를 넣으라고 합니다. 아무 암호나 넣으시면 이런 화면을 보실 수 있습니다.


www_sqler_com_0025.jpg 

관리 보안 검사라고 해서, /App_Data/Admin 폴더 하위의 _Password.config 라는 파일 앞의 "_"를 제거해야(이름바꾸기 해야) 동작한다고 합니다. 진행해 보죠.


www_sqler_com_0026.jpg

이렇게 WebSite에서 새로고침 합니다.


www_sqler_com_0027.jpg

 메세지 내용대로, 해당 파일을 "이름 바꾸기" 해서 앞의 "_"를 지워줍니다.


www_sqler_com_0028.jpg 

다시 http://localhost:8080/_Admin (주소와 포트는 저와 다를 수 있습니다.) 형태로 _Admin 페이지에 다시 접속하면~


www_sqler_com_0029.jpg 

이렇게 helper 패키지를 설치할 수 있는 화면이 나옵니다. 표시를 "온라인"으로 바꾸고 ASP.NET Web Helpers Library 1.1을 설치하세요. (OData나 FaceBook등 기타 helper는 설치할 필요 없습니다.)


(혹시 회사 내에서 방화벽 또는 프록시 서버를 이용해서 위처럼 Helper 패키지 리스트가 안나오실 경우에는 WebMatrix Readme 링크의 "Issue: Reading feeds or other external data via a proxy server" 항목을 참고해 web.config를 추가 후 수정하면 됩니다.)


www_sqler_com_0030.jpg

설치만 살짝 눌러 주세요.


www_sqler_com_0031.jpg

제 강좌를 진행하기 위해 필요한 Helper의 설치가 완료됩니다~


Helper에 대해 참고하세요

Helper는 WebMatrix의 주요 장점으로, 개발자를 위한 기능 확장 모듈이다라고 보시면 좋습니다. 특히, 복잡한 개발을 극도로 단순화 시킬 수 있도록 돕는 모듈이지요. 어떤 Helper들이 있는지 쭉 참고해 보세요.twitter, facebook 등 다양한 helper들을 기본 제공합니다. 

여담으로, 이 Helper는 개발자나 사용자가 외부 Helper를 통한 제작, 등록 및 다운로드 역시 가능합니다.


설치를 완료 하셨다면 이제 강좌를 계속 진행해 보도록 할께요. ^_^



오늘 진행한 내용을 요약해 보면

- 플랫폼 설치 관리자-WPI”웹사이트 제작에 필요한 다양한 프레임워크, 개발환경, 데이터베이스 등을 관리하는 최고의 설치 관리자 입니다. 이 녀석 하나만 있으면 개발, 테스트, 실제 프러덕션 환경 모두에 꼭 맞는 웹서버 운영 환경 구축이 가능해요. 나름 깔끔한 녀석인 것 같네요. ^_^

- WebMatrix이 WPI클릭질 한번이면 설치가 완료됩니다. 설치 크기는 15M 내외(.NET Framework 제외). 설치 시간 1분.

- 그리고, HelloWorld까지 진행해 보았습니다.

자~ 그럼 다음 시간에는”(3) WebMatrix 다양한 기능 활용”이라는 내용으로 WebMatrix에 대한 기본적인 내용을 마치고, 다음 챕터 부터는 “Razor”를 이용한 개발 과정을 상세히 짚어 보도록 할께요~ 감사합니다.

 

참고링크 :

Introducing WebMatrix

Introducing “Razor” – a new view engine for ASP.NET

New Embedded Database Support with ASP.NET

Introducing IIS Express



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 강좌 - 캐시 처리
(12) Razor 강좌 – SMTP 메일전송(Live메일과 Gmail지원. SSL지원)
(13) Razor 강좌 – 웹사이트 전체, 또는 폴더 내 파일 요청 시 항상 실행 되는 모듈

(14) Razor 강좌 - URL 라우팅(Routing) 으로 SEO 최적화 구현



지난 동영상 참고 자료 :

[동영상 강좌] (1) WebMatrix 첫 실행 & Hello World까지 달려요~

[동영상 강좌] (2) WebMatrix 5분 리뷰~

[동영상 강좌] (3) Razor 강좌 - 기본 구문 및 주석 처리

[동영상 강좌] (4) Razor 강좌 - 코드 블록과 POST 처리

[동영상 강좌] (5) Razor 강좌 - 재사용 가능한 코드 생성
[동영상 강좌] (6) Razor 강좌 - 레이아웃 페이지 구조 처리

[동영상 강좌] (7) Razor 강좌 - 파일처리, 파일 업로드

[동영상 강좌] (8) Razor 강좌 - 데이터베이스 처리
[동영상 강좌] (9) Razor 강좌 - Helper 소개(이미지, 비디오)

[동영상 강좌] (10) Razor 강좌 – 디버깅

[동영상 강좌] (11) Razor 강좌 - 캐시 처리

[동영상 강좌] (12) Razor 강좌 – SMTP 메일전송(Live메일과 Gmail지원. SSL지원)

[동영상 강좌] (13) Razor 강좌 – 웹사이트 전체, 또는 폴더 내 파일 요청 시 항상 실행 되는 모듈

[동영상 강좌] (14) Razor 강좌 - URL 라우팅(Routing) 으로 SEO 최적화 구현






profile

부족하지만, SQLER의 누군가와 함께한 나눔을 통해 제가 더 많이 즐거웠습니다.
SQLER와 함께 즐거워 할수록, 그 나눔을 통해 더 많은 기회와 가치를 발견하게 되었습니다.
나눔의 생각이 앞으로도 계속, SQLER를 움직일 것입니다.

코난, 김대우 / SQLER 운영자 / 골라먹는 SQLER RSS 정보 구독 / 실시간 SQLER 소식 uxkorea 트위터