2. 처음으로 작성하는 ASP.NET

4/14/2024
37 minutes to read

Visual Studio를 실행하고 Visual Studio의 통합 개발 환경(IDE)을 살펴본 후 ASP.NET 웹 프로젝트를 처음으로 작성해 보는 시간을 갖도록 합니다.

02_01 One ASP.NET 소개

02_02 ASP.NET과 Core를 다루는 기술 2장 처음으로 작성하는 ASP.NET

참고로, 이 책에서 사용되는 모든 소스는 다음 경로의 GitHub에서 제공합니다. https://github.com/VisualAcademy/  AspNetCoreBook  ASP.NET & ASP.NET Core 관련 전체 소스  MemoEngine  ASP.NET 4.7.2  DotNetNote  ASP.NET Core 2.2  MemoEngineCore  ASP.NET 4.8  DotNetNoteCore  ASP.NET Core 6.0

2.1 Visual Studio 2019 통합 개발 환경(IDE) 살펴보기 Visual Studio를 정상적으로 설치했다면 <시작 > 모든 앱 > Visual Studio> 순으로 Visual Studio 통합 개발 환경(IDE: Integrated Development Environment)을 실행시킵니다. Visual Studio에 익숙하지 않은 독자를 대상으로 ASP.NET 관련 기능 위주로 설명할 것입니다. 그림 2-1은 설명을 위해 예로 든 화면입니다. 이미 C#을 익히면서 Visual Studio에 익숙한 독자라면 그냥 편안하게 한 번만 읽고 넘어간다.

<참고> 이번 내용을 "Visual Studio 2019 통합 개발 환경(IDE) 살펴보기"라는 제목의 동영상 강좌로도 마련하였으니 참고하기 바랍니다.

https://youtu.be/kQXjOJaKTwo </참고>

그림 2 1 Visual Studio 2019 IDE(통합 개발 환경)의 예

① 메뉴 표시줄(Menubar): 메뉴 표시줄은 다른 윈도 응용 프로그램과 마찬가지로 여러 가지 명령어를 보여줍니다. ② 표준 도구 모음(Toolbar): 표준 도구 모음은 자주 사용되는 명령어를 아이콘으로 만들어 쉽고 빠르게 사용할 수 있게 합니다. ③ 도구 상자(Toolbox): 도구 상자는 GUI(Graphic User Interface) 환경의 프로그램을 작성할 때 주로 사용됩니다. 도구 상자는 <보기 > 도구 상자> 메뉴에서 찾거나 간단히 [Ctrl]+[Alt]+[X] 단축키를 사용해서 볼 수 있습니다. ④ 솔루션 탐색기(Solution Explorer): 솔루션 탐색기는 Visual Studio의 솔루션(프로젝트) 관련 항목을 쉽게 관리해주는 도구입니다. 솔루션 탐색기는 <보기 > 솔루션 탐색기> 메뉴를 사용하거나 간단히 [Ctrl]+[Alt]+[L] 또는 [Ctrl]+[;] 단축 명령어를 통해서 열 수 있습니다. 그림 2 2 솔루션 탐색기

솔루션 탐색기의 주요 기능은 다음과 같습니다.

속성: 현재 파일 또는 웹 사이트에 대한 속성 창을 실행합니다.
새로 고침: 현재 파일 또는 웹 사이트의 변경된 사항을 새롭게 가져옵니다.
모든 파일 표시: 현재 프로젝트에 포함된 모든 파일을 보여줍니다.
코드 보기: 현재 폼에 대한 코드를 작성하는 영역을 보여줍니다. ⑤ 속성 창(Properties Window): 속성 창은 폼과 폼 위에 있는 컨트롤의 현재 속성 설정 사항을 보여주고, 쉽게 설정 내용을 변경할 수 있습니다. <보기 > 속성 창> 메뉴를 사용하거나 간단히 [F4] 단축키로 열 수 있습니다. ⑥ <디자인 보기>(Design View) 또는 폼 디자인 창(Form Design Window): 폼 디자인 창은 Web 응용 프로그램을 작성할 때 필요한 컨트롤을 올려놓고 작업할 수 있는 영역입니다. 이 영역은 ASP.NET Web Forms(aspx, ascx 파일)에서만 사용할 수 있습니다. ⑦ 소스 보기(Source View) 또는 HTML 소스 창(HTML Source Window): 디자인 기반이 아닌 HTML 텍스트 기반에서 웹 응용 프로그램을 작성할 때 사용되는 영역으로 태그 보기라고도 합니다. ⑧ 코드 보기(Code View) 또는 코드 창(Code Window): 코드 창은 응용 프로그램의 실제 코드 부분을 입력하는 편집기 부분입니다.

2.1.1 Visual Studio 프로그래밍 방식의 종류 Visual Studio의 프로그래밍 방식에는 크게 콘솔(Console) 응용 프로그래밍 방식, 윈도(Windows) 응용 프로그래밍 방식, 웹(Web) 응용 프로그래밍 방식, 세 가지가 있으며 ASP.NET은 웹 프로그래밍 방식 자체를 의미합니다.  콘솔 응용 프로그램: 명령 프롬프트(명령창) 화면에서 실행되는 프로그램을 작성하는 방식으로 현재 시점에서는 C# 프로그래밍 언어를 학습하는 데만 사용됩니다. 이 책을 선택한 독자라면 대부분 C# 프로그래밍 학습 시 콘솔 환경에 대한 경험이 이미 있을 것입니다.  윈도 응용 프로그램: 메신저(Messenger), 게임(Game) 같은 프로그램처럼 윈도 기반의 프로그램을 작성할 때 사용됩니다.  ASP.NET 웹 응용 프로그램: 게시판(Board), 쇼핑몰(Commerce) 같은 웹 기반 프로그램을 작성할 때 사용되며, 이 책에서 다루는 방식입니다.

2.1.2 프로젝트와 솔루션  프로젝트(Project): 하나의 프로그램을 이루는 가장 작은 단위가 되는 프로그램을 말합니다. 예를 들어 게시판 프로젝트, 방명록 프로젝트, 쇼핑몰 프로젝트 등 단위 프로그램 하나를 프로젝트라고 합니다. Visual Studio에서 프로젝트는 확장자가 csproj(C# 프로젝트를 의미)인 파일로 관련된 여러 파일을 하나의 이름으로 묶는 역할을 합니다.  솔루션(Solution): 프로젝트가 하나 이상 모여서 만들어진 프로그램을 말하며 Visual Studio에서 솔루션은 하나 이상의 프로젝트를 묶어서 하나의 단위로 표현할 때 사용됩니다. 예를 들어 프로젝트가 여러 개 모인 웹 사이트 솔루션, ERP 솔루션, 쇼핑몰 솔루션 등 완성된 프로그램 그룹 하나를 솔루션이라고 합니다. Visual Studio에서 솔루션은 확장자가 sln(솔루션의 약자)인 파일로 하나 이상의 프로젝트를 묶어서 관리할 때 사용됩니다.

2.2 [실습] ASP.NET 웹 프로젝트 작성해보기 2.2.1 소개 Visual Studio를 사용해서 웹 브라우저 화면에 텍스트박스(TextBox)와 버튼(Button)을 올려놓고 버튼을 클릭했을 때 텍스트박스에 “안녕하세요.”라는 문자열을 출력하는 프로그램을 작성해봅니다. 간단한 프로그램이지만, ASP.NET 프로그래밍을 작성하는 전체 흐름을 이해할 수 있으니 가능하면 여러 번 반복해서 실습해보고 내용을 이해하기 바랍니다.

<참고> 이번 실습 과정을 "처음으로 작성하는 ASP.NET 4.6 - ASP.NET 웹 폼(Web Forms) 시작하기"라는 제목의 동영상 강좌로도 마련하였으니 참고하기 바랍니다.  https://youtu.be/6VXykyNEcgU  </참고>

첫 실습인 만큼 과정을 상세히 소개할 것이며 큰 흐름은 다음과 같습니다. ① 실습용 폴더 생성하기 ② 새로운 웹 프로젝트 만들기 ③ 폼 디자인 ④ 컨트롤의 속성 변경 ⑤ 코드 작성 ⑥ 웹 브라우저로 실행 및 결과 확인

2.2.2 따라하기 ① 실습에 사용할 폴더로 C 드라이브 루트에 ASP.NET 폴더를 생성합니다. 앞으로 실습을 따라하면서 작성되는 소스 대부분을 C 드라이브에 만든 ASP.NET 폴더에 저장하겠습니다.

그림 2 3 C 드라이브에 ASP.NET 폴더 생성하기

② <시작 > 모든 앱 > Visual Studio 2019>를 실행합니다. 또는 실행 창을 열고 “devenv” 명령어를 입력하여 Visual Studio를 실행합니다.

<참고> devenv 명령줄 스위치 Visual Studio 2017로 버전이 올라서면서 기존에 사용해오던 devenv 명령어를 사용할 수 없게 되었습니다. Visual Studio 2017을 실행할 때에는 시작 버튼 클릭 후 모든 앱에서 Visual Studio 2017을 검색 후 사용하면 됩니다. Visual Studio 2017 업데이트 버전에서 devenv 명령줄 스위치가 다시 돌아왔습니다. </참고>

그림 2 4 Visual Studio 2019 실행

③ Visual Studio에서 <파일 > 새로 만들기 > 프로젝트>를 실행하여 새 프로젝트 창을 실행합니다. 그림 2 5 새 프로젝트 만들기

④ 새 웹 프로젝트 생성 창이 뜨면 다음 그림과 같이 왼쪽 영역의 <설치됨 > 템플릿 > Visual C# > 웹>을 선택합니다. 상단에서 <.NET Framework 4.6>을 선택한 뒤 <ASP.NET 웹 응용 프로그램 Visual C#> 항목을 선택합니다. 그리고 화면 아래에 프로젝트에 대한 이름, 위치, 솔루션 이름을 입력합니다. 그림 2 6 새 웹 프로젝트 생성 창

새 프로젝트 창에서 다음과 같이 설정합니다. 앞으로 특별한 설명이 없는 한 다음과 같이 새로운 웹 프로젝트를 구성할 것입니다. 값을 입력한 뒤에는 <확인> 버튼을 클릭해서 새 ASP.NET 프로젝트 화면으로 넘어간다. <솔루션용 디렉터리 만들기>에 체크하는 것과 <소스 제어에 추가> 체크 박스에 체크하지 않는 것은 별도의 언급이 없는 한 매번 같습니다.  이름: DevHelloWorld  위치: C:\ASP.NET  솔루션 이름: DevHelloWorld  솔루션용 디렉터리 만들기: 기본 체크  소스 제어에 추가: 체크 안 함  .NET Framework: .NET Framework 4.6

<참고> 새 웹 프로젝트 생성 창 실습을 할 때 그림 2-6 <새 웹 프로젝트 생성 창>이 책의 화면과 다를 수 있습니다. 다음과 같이 한 항목이 나오는 게 기본입니다. 이를 선택하고 프로젝트를 생성하면 됩니다.

책의 화면은 이 책의 후반부에서 다룰 ASP.NET Core 도구까지 모두 설치된 상태라서 ASP.NET 웹 응용 프로그램(Web Application) 항목 이외에 두 가지 항목이 더 나타난다. 앞으로도 책의 화면과 다른 화면을 볼 경우가 종종 있을 텐데 해당 실습에 해당하는 항목을 잘 확인하면서 진행하기 바랍니다. </참고>

⑤ 새 ASP.NET 프로젝트 창에서 템플릿은 ASP.NET 4.6 템플릿 항목 중에서 비어 있음(Empty)를 선택합니다. 또한, <다음에 대한 폴더 및 핵심 참조 추가>에서 <Web Forms> 체크박스를 체크하여 ASP.NET 웹 폼에 대한 주요 참조를 ASP.NET 프로젝트에 포함시킵니다. 추후 ASP.NET MVC에 대한 기능을 사용하려면 <MVC> 체크박스를 체크하면 됩니다. 그림 오른쪽 아래 Microsoft Azure의 <클라우드의 호스트> 항목은 체크를 해제합니다(Azure 배포는 이후 배포 장에서 별도로 설명한다). 다음과 같이 선택 후 <확인> 버튼을 클릭하면 ASP.NET 웹 프로젝트가 생성됩니다.

그림 2 7 새 ASP.NET 프로젝트 창

여기까지의 단계를 표로 정리하면 다음과 같습니다. 앞으로 새로운 프로젝트를 생성할 때는 다음과 같이 간단히 표로 표기하겠습니다.

이름 위치 ASP.NET 템플릿 선택 폴더 및 핵심 참조 추가 DevHelloWorld C:\ASP.NET ASP.NET 4.6 템플릿-Empty 웹 폼

표에서 위치란 앞서 미리 만들어 놓은 ASP.NET 폴더에 DevHelloWorld라는 이름으로 웹 프로젝트(웹 사이트)가 생성됨을 말합니다. 웹 프로젝트는 폴더 단위로 관리됩니다. ASP.NET 4.6 템플릿의 다른 항목은 각각의 기술에 대해 미리 지정된 형태의 템플릿 사이트를 제공해서 좀 더 빨리 해당 기술을 사용한 웹 사이트를 제작할 수 있게 가이드합니다. 그러나 이 책에서는 미리 만들어 놓은 가이드를 사용하지 않고 Empty를 선택하여 하나씩 하나씩 만들어가면서 ASP.NET의 주요 내용을 학습해 나갈 것입니다.

⑥ Visual Studio에서 새 웹 프로젝트를 생성하고 난 후의 결과 화면은 다음과 같습니다. 참고로 Visual Studio의 상단 메뉴는 추가적인 확장 기능이 설치됨에 따라서 다르게 보일 수 있습니다. 그림 2 8 새 웹 프로젝트 생성 결과

Visual Studio 기본 화면의 왼쪽에 도구 상자가 있고, 오른쪽 솔루션 탐색기에 DevHelloWorld라는 이름의 웹 프로젝트가 설정되어 있습니다. 가운데 빈 영역이 나중에 편집할 때 사용할 편집 영역입니다. 만약 도구 상자와 솔루션 탐색기가 없다면 다음과 같은 방법으로 Visual Studio IDE 화면에 추가합니다.

 도구 상자 열기: 보기 메뉴의 도구 상자 선택 또는 [Ctrl]+[Alt]+[X] 단축키 사용  솔루션 탐색기 열기: 보기 메뉴의 솔루션 탐색기 선택 또는 [Ctrl]+[Alt]+[L] 단축키(또는 [Ctrl]+[;](세미콜론) 단축키) 사용  속성 창 열기: 보기 메뉴에서 속성 창 또는 [F4] 단축키 사용  서버 탐색기 열기: 보기 메뉴의 서버 탐색기 선택 또는 [Ctrl]+[Alt]+[S] 단축키 사용

⑦ 웹 프로젝트가 생성되면 App_Data, Models 같은 폴더가 기본으로 생성됩니다. 이렇게 기본값으로 생성되는 폴더와 파일은 프로젝트를 생성할 때 설정한 옵션에 따라 달라진다. 생성된 프로젝트의 실제 경로로 이동하려면 솔루션 탐색기에서 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <파일 탐색기에서 폴더 열기> 메뉴를 선택하면 프로젝트가 생성된 실제 파일 및 폴더 목록을 볼 수 있습니다.

그림 2 9 파일 탐색기에서 폴더 열기

⑧ 웹 사이트가 생성된 물리적인 폴더인 C:\ASP.NET\DevHelloWorld\를 찾아가면 확인할 수 있습니다. 그림 2 10 웹 프로젝트의 실제 파일 및 폴더 목록

⑨ 다시 Visual Studio로 돌아와서 웹 페이지를 하나 만들어보겠습니다. 다음 그림과 같이 솔루션 탐색기에서 마우스로 웹프로젝트를 선택한 후 상단 메뉴에서 <프로젝트 > 새 항목 추가 메뉴>를 선택합니다. 그림 2 11 새 항목 추가

⑩ <새 항목 추가> 창이 나타나면 다음 그림과 같이 <Visual C# > 웹 > 웹 폼>을 선택하고 이름에 FrmHelloWorld.aspx를 입력한 후 추가 학습: 버튼을 눌러 웹 프로젝트에 하나의 웹 페이지인 웹 폼(aspx 파일)을 추가합니다. 또는 <새 항목 추가> 선택 창 오른쪽 상단에 <설치된 템플릿 검색>이라는 창이 있는데, 이 텍스트박스에서 직접 “웹 폼”을 검색하여 관련 항목을 찾을 수도 있습니다. 그림 2 12 웹 폼 추가

앞으로 <새 항목 추가> 화면에서 특정 항목을 찾아 추가하는 내용은 다음과 같이 표로 간단히 표기할 것입니다. 템플릿 이름 이름 웹 폼 FrmHelloWorld.aspx

<참고> 웹 폼 파일명 앞에 Frm 접두사를 붙이는 이유는 웹 폼 파일명 생성 시 내부적으로 코드 숨김 파일이라고 해서 같은 이름으로 C# 클래스가 만들어지는데 Page 클래스 학습 시 Page.aspx로 파일을 만들면 실제 Page 클래스와 클래스명이 충돌이 나기에 FrmPage 식으로 변경해서 사용하는 것입니다. 단, 데모용 예제에서만 사용하지 실제 현업 프로젝트에서는 Frm 접두사를 사용하지 않고 ShoppingCart.aspx와 같이 의미 있는 단어로 각각의 페이지를 생성합니다. </참고>

⑪ FrmHelloWorld.aspx 파일로 하나의 웹 페이지인 웹 폼이 추가되면 다음 그림과 같이 표시됩니다. 그림 2 13 FrmHelloWorld.aspx 페이지 생성

소스 편집 영역의 하단의 디자인, 나누기, 소스 버튼을 클릭할 때마다 조금씩 다른 화면이 나타난다. <디자인 보기>는 드래그 앤 드롭 방식으로 도구 상자에서 각각의 미리 만들어진 컨트롤을 사용해 좀 더 빨리 특정 요소를 만들어내는 영역이고, 소스 보기는 직접 태그를 소스로 타이핑하는 영역이며 이 두 가지 영역을 나눠서 사용하는 게 나누기 보기다. 이 책에서는 소스 보기 모드를 기본값으로 사용하고 특정한 경우에만 디자인 모드로 설명할 예정입니다. 왜냐하면, ASP.NET 웹 폼이 아닌 모든 웹 프로그래밍 언어는 모두 소스 보기로 모양을 꾸미기 때문입니다. 현업 개발자 대부분 <디자인 보기>를 거의 사용하지 않고 세밀한 작업은 HTML 태그를 직접 다루는 소스 보기에서 작업합니다. 따라서 이 책 역시 <디자인 보기>는 거의 사용하지 않는 방향으로 구성하였습니다.

⑫ 이후에는 소스 보기 모드를 많이 사용하겠지만, 처음이니 <디자인 보기> 모드를 한 번 사용해봅니다. 소스 편집 영역에서 <디자인 보기> 모드를 선택한 후 다음과 같이 실행합니다.

디자인 버튼을 클릭하여 디자인 뷰(<디자인 보기>)로 전환합니다.
도구 상자의 표준 범주에 있는 TextBox 컨트롤을 더블클릭하거나 끌어서 놓기(드래그 앤 드롭)로 디자인 뷰에 떨어뜨려 놓으면 디자인 뷰에 컨트롤이 등록됩니다.
도구 상자의 표준 범주에 있는 Button 컨트롤을 더블클릭하거나 끌어서 놓기로 디자인 뷰에 떨어뜨려 놓으면 디자인 뷰에 컨트롤이 등록됩니다.

그러면 다음과 같이 <디자인 보기>에서 텍스트박스와 버튼이 등록됩니다. 이러한 방식은 C# 프로그래밍을 학습할 때 윈도 폼(Windows Forms) 또는 WPF와 같은 윈도 응용 프로그램을 개발하는 것과 같은 수준으로 웹 프로그래밍을 진행할 수 있게 해줍니다. 기존 윈도 응용 프로그래밍 개발 기법을 그대로 웹으로 옮겨놓은 기술이 바로 ASP.NET 웹 폼 기술입니다. 그림 2 14 폼 디자인하기

⑬ 디자인 뷰(디자인 영역)에 두 개의 컨트롤(TextBox, Button)을 추가하면 기본적으로 TextBox1, Button1과 같이 해당 컨트롤의 이름(ID)이 매겨진다. 이를 다음 표와 같이 변경합니다. 기본 제공 이름보다는 의미가 있는(txtDisplay = 텍스트가 표시되는, btnClick = 클릭 버튼) 이름으로 변경해서 사용하는 것이 좋다. 컨트롤(Control) 속성(Attribute) 값(Value) TextBox ID txtDisplay Button ID btnClick Text 클릭

변경할 때는 먼저 TextBox를 마우스로 선택한 후 속성 창에서 위 표와 같이 ID 속성을 “TextBox1”에서 “txtDisplay”로 변경합니다. 혹 속성 창이 없는 경우는 보기 > 속성 창을 선택하거나 [F4] 단축키를 사용하여 속성 창을 실행합니다. 그림 2 15 텍스트박스 속성 변경하기

다음에는 Button을 마우스로 선택한 후 속성 창에서 ID 속성을 “Button1”에서 “btnClick”으로 변경하고, Text 속성을 “Button”에서 “클릭”으로 변경합니다.

그림 2 16 버튼 속성 변경하기

⑭ 컨트롤을 웹 폼에 등록하는 방식은 소스 보기 모드에서도 가능합니다. 소스 보기 모드의 특정한 태그 영역에 도구 상자에서 컨트롤을 드래그 앤 드롭으로 떨어뜨려 놓으면 컨트롤이 등록됩니다. 여기까지 작업한 내용을 소스 보기에서 보면 다음과 같습니다.

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="FrmHelloWorld.aspx.cs" Inherits="DevHelloWorld.FrmHelloWorld" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>

            <asp:TextBox ID="txtDisplay" runat="server"></asp:TextBox>
            <asp:Button ID="btnClick" runat="server" Text="클릭" />

        </div>
    </form>
</body>
</html>

⑮ 이제 “클릭” 버튼을 클릭하면 텍스트박스에 “안녕하세요.”라는 문자열이 출력되게 해보겠습니다. <디자인 보기>에서 웹 폼에 등록된 btnClick 버튼을 더블클릭하면 FrmHelloWorld.aspx.cs 파일에 동적으로 다음과 같은 코드 블록이 만들어진다. 이곳에 다음과 같이 한 줄을 타이핑합니다. <디자인 보기>에서 버튼을 클릭하면 자동으로 해당 컨트롤의 소스 보기에 OnClick 같은 이벤트 처리기 등록 코드가 만들어진다.

using System;

namespace DevHelloWorld
{
    public partial class FrmHelloWorld : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnClick_Click(object sender, EventArgs e)
        {
            txtDisplay.Text = "안녕하세요.";
        }
    }
}

FrmHelloWorld.aspx 파일의 소스 보기 모드에는 다음과 같이 OnClick=”btnClick_Click” 코드가 자동으로 추가된 것을 알 수 있습니다.

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="FrmHelloWorld.aspx.cs" Inherits="DevHelloWorld.FrmHelloWorld" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>

            <asp:TextBox ID="txtDisplay" runat="server"></asp:TextBox>
            <asp:Button ID="btnClick" runat="server" Text="클릭" 
                OnClick="btnClick_Click" />

        </div>
    </form>
</body>
</html>

16 지금까지 작성한 내용을 실행하여 결과를 웹 브라우저로 출력해보겠습니다. Visual Studio의 솔루션 탐색기에서 FrmHelloWorld.aspx 파일을 마우스로 선택한 다음 마우스 오른쪽 버튼을 누르면 나타나는 메뉴에서 <시작 페이지로 설정>을 클릭합니다. 그림 2 17 시작 페이지로 설정

<노트> 브라우저에서 보기 <시작 페이지로 설정> 단계를 거치지 않고 <브라우저에서 보기> 메뉴를 선택해서 바로 그 결과를 확인할 수도 있습니다. 여러 ASPX 파일 중 하나를 시작 페이지로 설정하고 [Ctrl]+[F5]를 눌러 실행하면 해당 페이지가 실행됩니다. C#, WPF, Windows Forms에서는 [Ctrl]+[F5]가 실행의 기준이기에 이를 메인으로 두고, 평상시에는 <브라우저에서 보기>를 사용하는 게 편리합니다. </노트>

17 시작 페이지로 선택된 파일을 실행하려면 <도구 > 디버깅하지 않고 시작 메뉴>를 선택하거나 단축키([Ctrl]+[F5])를 사용하여 실행합니다. 실행 결과는 다음과 같습니다. 그림 2 18 처음으로 작성한 웹 사이트 실행 결과

Visual Studio에서 작성한 웹 페이지를 실행시킬 때는 [F5] 단축키를 사용해도 됩니다. 다만, 좀 더 빠른 실행을 위해서 디버깅하지 않고 시작 메뉴를 사용하는 것뿐입니다. 물론, 전문적으로 디버깅할 때는 FrmHelloWorld.aspx 페이지 등에 마우스 오른쪽 버튼 클릭 후 시작 페이지로 설정 등의 메뉴로 시작페이지를 잡아 놓은 후 [F5]를 눌러서 실행한 후 디버깅을 진행합니다.

18 <클릭> 버튼을 누르면 텍스트박스 컨트롤에 예상한 문자열 “안녕하세요.”가 출력됩니다. 그림 2 19 웹 브라우저로 출력된 결과

첫 번째로 진행해 본 웹 페이지가 아직은 성에 차지 않을 것입니다. 이 책을 보는 독자들은 대부분 평소 보아오던 화려한 웹 페이지 덕분에 눈이 높아져 있습니다. 화려한 기능과 모양을 가진 웹 페이지를 작성하는 대부분 개발자와 디자이너도 지금처럼 화면에 “안녕하세요.”를 출력하는 것부터 시작했듯이 멀지 않아 멋진 웹 사이트를 완성할 날을 생각하면서 조금씩 실력을 쌓아가도록 합니다.

<참고> 웹 사이트 실행 시 자동으로 만들어지는 로컬 도메인과 포트 번호 Visual Studio는 localhost:5285와 같이 포트 번호를 동적으로 만들어내어 해당 웹 사이트를 실행합니다. 윈도 서버의 IIS와 같은 웹 서버를 사용할 수도 있으나 Visual Studio 자체 웹 서버를 사용해서 동적으로 해당 웹 사이트 폴더에 있는 ASP.NET 페이지를 실행합니다. 하지만 실제 서버에서 실행될 때는 가상 포트를 사용하지 않고 IIS와 같은 웹 서버에 올린 다음에 서비스되어야 하기에 로컬에서 개발할 때는 가상 포트를 사용하고 실제 서버에서 서비스될 때는 IIS와 같은 웹 서버를 사용해야 합니다. </참고>

2.2.3 마무리 이상으로 간단한 ASP.NET 프로그램을 작성해보았습니다. 실제 웹 사이트 프로그래밍에서도 같은 순서와 비슷한 방식이 사용되므로 위 실습을 여러 번 반복하여 웹 사이트 제작의 전체 흐름을 이해하기 바랍니다. 앞으로 배울 실습 역시 대부분 이 실습에서 학습한 순서대로 진행할 것입니다.

2.2.3.1 WPF FrmHelloWorld

2.3 책 또는 강의 데모 소스 소개 박용준 강사의 GitHub 경로는 다음과 같습니다. https://github.com/VisualAcademy 위 경로에서 이 책에서 사용되는 데모 소스는 3가지 카테고리에 분리되어 저장되어 있습니다.

MemoEngine: ASP.NET(Web Forms, MVC, Web API, SignalR)
DotNetNote: ASP.NET Core(MVC, Web API, SignalR, Angular 7.X)
Dul: .NET Standard 2.0 Dul.dll: NuGet 패키지 관리자 Dul.Models.dll 모델(Model) 리포지토리(Repository)

참고: Blazor Hello World 프로젝트

2.4.1 소개

이 포스트에서는 Blazor를 사용하여 애플리케이션을 구축하는 기본적인 방법들을 탐구합니다. 특히, 호스팅 모델 선택, 인증 및 권한 부여 활성화, 그리고 기본 Blazor 페이지 구성에 대해 자세히 다룰 예정입니다.

2.4.2 전제 조건

Visual Studio 2019
.NET Core 3.0
Blazor 템플릿

2.4.3 참고 자료

Blazor 학습을 위한 전체 솔루션은 GitHub 리포지토리에서 찾아볼 수 있습니다.

2.4.4 시작하기

Blazor 빈 솔루션 생성: Blazor 앱을 시작하기 위해 Visual Studio에서 "Blazor App"을 선택하고, 이 튜토리얼에서는 "Blazor Server App"을 개발할 것입니다.
CourseApp 프로젝트 생성: 인증 옵션을 선택하고, 로컬 사용자 계정 저장소를 활성화하여 인증을 설정합니다. HTTPS 설정은 프로젝트의 디버그 탭에서 비활성화할 수 있습니다.
프로젝트 실행: 인증이 설정된 상태에서 프로젝트를 실행하면, 초기 로그인 및 등록 화면이 표시됩니다.

2.4.5 프로젝트 구조 이해

Areas: AuthenticationStateProvider 클래스와 로그인, 로그아웃을 위한 HTML 파일을 포함합니다.
Data: Entity Framework를 사용한 인증 테이블, DbContext, 서비스 파일 등이 포함되어 있습니다.
Pages: Blazor의 컴포넌트 기반 구조를 활용한 Razor 파일들이 포함되어 있습니다. 이 구성 요소들은 재사용 가능하고 UI 논리에 기반한 동작을 특징으로 합니다.

2.4.6 인증 및 권한 부여 활성화

테이블 생성: Entity Framework의 "update-database" 명령을 실행하여 인증 관련 테이블을 생성합니다.
사용자 등록: "등록" UI를 통해 또는 "Startup.cs"에서 프로그래밍 방식으로 사용자 및 역할을 추가합니다.
기본 사용자 및 역할 설정: RoleManager와 UserManager를 사용하여 필요한 역할과 사용자를 시스템에 추가합니다.

2.4.7 권한 부여 구현

"AuthorizeView" 컴포넌트를 사용하여 권한이 있는 사용자만 특정 페이지 내용을 볼 수 있도록 설정합니다. 이를 통해 역할 또는 정책에 기반한 컨텐츠 접근 제어를 구현할 수 있습니다.

2.4.8 Blazor 페이지의 이해

"FetchData.razor"와 같은 Razor 컴포넌트를 분석하여 Blazor의 경로, 서비스 주입, 이벤트 처리 등의 기능을 이해합니다.

이 내용을 바탕으로 Blazor의 기본적인 프로젝트 설정과 구조, 인증 및 권한 부여 방법에 대해 상세히 알아보았습니다.

동영상 강의

02_03 2024년 DotNetSale 이름의 소스 저장소 및 ASP.NET Web Forms 프로젝트 생성 및 로컬 테스트

https://youtu.be/9SsQQhjfpTc

02_04 DotNetKorea.Public ASP.NET 4.8 웹폼과 MVC 5 관련 강의 소스 모음 GitHub 리포지토리 생성

https://youtu.be/OorGIOcAMG0

02_05 MVC 5 기반의 One ASP.NET 프로젝트 생성 및 DotNetKorea.Public 리포지토리에 업로드

https://youtu.be/XPIxnbOKkvs

추천 자료: .NET Blazor에 대해 알아보시겠어요? .NET Blazor 알아보기를 확인해보세요!