Visual Studio.Net으로 웹사이트 생성하기

웹 페이지 코드 모델에는 Single-File Code Model과 Code-Behind Page Model 이 있습니다. 두 가지 코드 모델에 해당하는 웹 페이지를 생성해 보고 코드에 대해서 설명하겠습니다. 먼저 새로운 웹 사이트를 Visual Studio로 생성합니다. <CENTER> <IMG src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkorea.internet.com%2Fimages%2Fasp050302_1.JPG"></CENTER> 다음으로 그림의 빨간 네모 영역과 같이 선택하고 확인을 클릭합니다.(여기선 C#을 선택했지만 사용언어는 편한 것으로 선택해도 됩니다.) <CENTER> <IMG src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkorea.internet.com%2Fimages%2Fasp050302_2.JPG"></CENTER> 생성된 웹 페이지를 Design View로 변경하고 왼쪽의 Toolbox에서 라벨과 버튼 컨트롤을 끌어서 옮깁니다. <CENTER> <IMG src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkorea.internet.com%2Fimages%2Fasp050302_3.JPG"></CENTER> 컨트롤 속성창 에서 라벨의 Text부분을 공란으로 만들고 버튼의 Text 속성을 경우 한글로 클릭으로 바꿔줍니다. <CENTER> <IMG src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkorea.internet.com%2Fimages%2Fasp050302_4.JPG"></CENTER> 이제 Code Model을 설명하기 위한 준비가 끝났습니다. 위에서 만들어 놓은 것을 이용하여 예제를 적용하여 Single-File Code Model과 Code-Behind Model을 설명 하겠습니다. Single-File Code Model(.aspx 파일에 markup언어와 프로그램 파일이 같이 들어 있는 경우) 1. 위에서 생성한 파일을 Code View로 전환합니다. 2. 버튼을 클릭하면 현재 시간이 나타나도록 한다. [예제코드] <TABLE style="MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px; LINE-HEIGHT: 150%" cellSpacing=0 borderColorDark=white width=434 align=center bgColor=#efefef borderColorLight=black border=1> <TBODY> <TR> <TD width=445> <script runat=server> void Button1_Click(Object sender, EventArgs e) {     Label1.Text = "현재시간 : " + DateTime.Now.ToString(); } </script> <body>     <form id="form1" runat="server">       <div>         <asp:Label ID="Label1" Runat="server"></asp:Label>         <asp:Button ID="Button1" Runat="server" Text="클릭" [안내]태그제한으로등록되지않습니다-xxOnClick="Button1_Click" />       </div>     </form> </body></TD></TR></TBODY></TABLE> 3. 코드를 작성한 후 Ctrl+S를 사용하여 저장한 후, Solution Explorer에서 브라우저를 통해 실행합니다. <CENTER> <IMG src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkorea.internet.com%2Fimages%2Fasp050302_5.JPG"></CENTER> 4. 다음 그림과 같이 브라우저를 통해 보여진 버튼을 마우스로 클릭 합니다. 5. 현재 시간이 나타나는 것을 볼 수 있습니다. <CENTER> <IMG src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkorea.internet.com%2Fimages%2Fasp050302_6.JPG"> <IMG src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkorea.internet.com%2Fimages%2Fasp050302_7.JPG"></CENTER> 이제 위의 소스코드를 살펴보겠습니다. <asp:Label ID="Label1" Runat="server"></asp:Label> <asp:Button ID="Button1" Runat="server" Text="클릭" [안내]태그제한으로등록되지않습니다-xxOnClick="Button1_Click" /> 이 부분은 Design View를 통해서 생성된 markup 부분 입니다. <script runat=server> void Button1_Click(Object sender, EventArgs e) {      Label1.Text = "현재시간 : " + DateTime.Now.ToString(); } </script> markup tag를 자세히 보면 [안내]태그제한으로등록되지않습니다-xxOnClick 이라는 부분이 있는데 이것을 클릭하면 자바 스크립트에서 처럼 <script> 테그 안에 있는 function( { }, 중괄호 부분 )이 실행 됩니다. 자바 스크립트와 다른 점은 이 코드들은 모두 Runat = server 로 표시 되어 있어 소스 파일을 가지고 있는 서버에서 해석된다는 점입니다. 이것으로 인해 코드는 브라우저로 해석되지 않고 서버에서 해석되어진 결과를 표시하게 되는 겁니다. 보여드린 예제는 Single-File Code Model로 만들어져서 서버에서 해석된 페이지 예제 입니다. 2.03 기본 웹 페이지와 코드 분리해서 생성하기 Code-Behind Page Model 코드 비하인드 파일은 markup 으로 이루어진 파일 하나(.aspx) 와 프로그램으로 이루어진 파일 하나(.cs)로 이루어진다. 기존의 예제 파일을 가지고 실습해 보겠습니다. 1. 오른쪽의 Solution Explorer로 이동합니다. 2. 그림에서 처럼 Add New Item...을 클릭합니다. <CENTER> <IMG src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkorea.internet.com%2Fimages%2Fasp050302_8.JPG"></CENTER> 3. 그림과 같이 Web Form을 선택한 후 하단에 위치한 Place Code in seperate file을 선택합니다. <CENTER> <IMG src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkorea.internet.com%2Fimages%2Fasp050302_9.JPG"></CENTER>참고로 Place Code in seperate file을 체크하고 파일을 생성하면 코드(.cs)와 디자인(.aspx)이 분리된 형태로 웹 페이지가 만들어집니다. 4. 아래의 그림 같이 위에서 만든 것과 동일한 형태의 페이지 디자인을 합니다. <CENTER> <IMG src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkorea.internet.com%2Fimages%2Fasp050302_3.JPG"></CENTER> 5. Design View에서 버튼을 마우스로 두 번 클릭합니다. 6. 아래의 그림처럼 두 개의 파일이 생성된 것을 확인 할 수 있습니다. <CENTER> <IMG src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkorea.internet.com%2Fimages%2Fasp050302_10.JPG"></CENTER> 7. .cs 파일의 void Button_Click(object sender, EventArgs e) 부분에다가 Label1.Text = DateTime.Now.ToString(); 이라고 코딩 합니다. 8. 저장 후 Solution Explorer을 통해 웹 브라우저에서 실행합니다. (기존 Visual Studio에서는 컴파일 후 결과 확인이 가능했지만 이번 베타버전이나 이후 나올 VS에서는 저장 후 웹 브라우저로 실행해도 자동으로 컴파일 됩니다.) 9. 버튼을 클릭 합니다. <CENTER> <IMG src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkorea.internet.com%2Fimages%2Fasp050302_11.JPG"></CENTER> (Code-Behind Page로 생성된 페이지) 이렇게 해서 Single-File Page Model과 Code-Behind Page Model을 살펴 봤습니다. 이 두 개의 모델의 차이점은 무엇일까요?? 사실 거의 없다고 봐도 무방합니다. 다만 복잡한 어플리케이션을 작성할 경우 관리를 위해서 코드와 디자인을 분리합니다. 그것이 유지/보수를 위해 유리하기 때문입니다. 성능상의 차이점은 없습니다. 보너스로 한 가지 재미난 것을 보여드리겠습니다. Code-Behind Page Model로 생성한 웹 페이지의 Code View로 이동한 후 제일 상단에 위치한 <%@ Page Language="C#" CompileWith="Default.aspx.cs" ClassName="Default_aspx" %> 에서 CompileWith="Default.aspx.cs" ClassName="Default_aspx" 부분을 삭제하고 저장합니다. 다음에 Design View로 이동하여 마찬가지로 버튼을 두 번 클릭합니다. 신기하게도 아래의 그림처럼 자동으로 Single-File Page Model로 변환 됩니다. <CENTER> <IMG src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkorea.internet.com%2Fimages%2Fasp050302_12.JPG"></CENTER> 모든 것을 Visual Studio가 자동으로 해결해 줍니다. 이상으로 Visual Studio로 웹 페이지 만들기를 마치고 다음 시간에는 Web Page의 Syntax와 .cs 파일의 코드에 대해 간략하게 설명 하겠습니다.