ASP.NET Core MVC 시작

작성자: Rick Anderson

이 자습서에서는 컨트롤러와 보기를 사용하여 ASP.NET Core MVC 웹 배포에 대해 설명합니다. ASP.NET Core 웹 개발이 처음인 경우 이 자습서의 Razor Pages 버전을 통해 좀 더 쉽게 시작할 수 있습니다. Razor Pages, MVC 및 Blazor에서 UI 개발을 비교하는 ASP.NET Core UI 선택을 참조하세요.

이 자습서는 컨트롤러와 뷰를 사용한 ASP.NET Core MVC 웹 개발을 설명하는 시리즈의 첫 번째 자습서입니다.

시리즈가 끝나면 영화 데이터를 관리하고 표시하는 앱이 생성됩니다. 다음 방법에 대해 설명합니다.

• 웹앱 만들기
• 모델 추가 및 스캐폴드
• 데이터베이스 작업
• 검색 및 유효성 검사 추가

예제 코드 살펴보기 및 다운로드 (다운로드 방법). 다운로드 예제는 영역을 테스트하기 위한 기초적인 앱을 제공합니다.

필수 조건

Visual Studio

• ASP.NET 및 웹 개발 워크로드가 있는 Visual Studio 2022

  

Visual Studio Code

• Visual Studio Code
• Visual Studio Code용 C#(최신 버전)
• .NET 8.0 SDK

Visual Studio Code 지침은 .NET CLI를 사용하여 프로젝트 작성과 같은 ASP.NET Core 개발 기능을 사용합니다. macOS, Linux 또는 Windows와 모든 코드 편집기에서 이러한 지침을 따를 수 있습니다. Visual Studio Code 이외의 항목을 사용하는 경우 사소한 변경이 필요할 수 있습니다.

Mac용 Visual Studio

• Mac용 Visual Studio 2022(최신 버전)

  Important

  Microsoft는 Mac용 Visual Studio의 사용 중지를 발표했습니다. Mac용 Visual Studio는 2024년 8월 31일부터 더 이상 지원되지 않습니다. 대안은 다음과 같습니다.

  • C# 개발 키트 및 관련 확장(예: .NET MAUIUnity)이 있는 Visual Studio Code.
  • Mac의 VM에서 Windows에서 실행되는 Visual Studio IDE입니다.
  • 클라우드의 VM에서 Windows에서 실행되는 Visual Studio IDE입니다.

  자세한 내용은 Mac용 Visual Studio 사용 중지 공지를 참조하세요.

웹앱 만들기

Visual Studio

• Visual Studio를 시작하고 새 프로젝트 만들기를 선택합니다.
• 새 프로젝트 만들기 대화 상자에서 ASP.NET Core 웹앱(Model-View-Controller)>다음을 선택합니다.
• 새 프로젝트 구성 대화 상자에서 프로젝트 이름으로 MvcMovie를 입력합니다. 프로젝트 이름을 MvcMovie로 지정해야 합니다. 코드를 복사할 때 대문자 표시가 각 namespace와 일치해야 합니다.
• 다음을 선택합니다.
• 추가 정보 대화 상자에서:
  • .NET 8.0(장기 지원)을 선택합니다.
  • 최상위 문을 사용하지 않음이 선택 취소되어 있는지 확인합니다.
• 만들기를 실행합니다.

프로젝트를 만드는 다른 방법을 비롯한 자세한 내용은 Visual Studio에서 새 프로젝트 만들기를 참조하세요.

Visual Studio에서는 생성된 MVC 프로젝트에 기본 프로젝트 템플릿을 사용합니다. 생성된 프로젝트는 다음과 같습니다.

• 작동하는 앱입니다.
• 기본 시작 프로젝트입니다.

Visual Studio Code

이 자습서에서는 VS Code를 잘 알고 있다고 가정합니다. 자세한 내용은 VS Code 시작 및 Visual Studio Code 도움말을 참조하세요.

• 터미널 메뉴에서 새 터미널을 선택하여 통합 터미널을 엽니다.

• 프로젝트가 포함될 디렉터리(cd)로 변경합니다.

• 다음 명령을 실행합니다.

  dotnet new mvc -o MvcMovie
  code -r MvcMovie
  

  이 dotnet new 명령은 MvcMovie 폴더에 새 ASP.NET Core MVC 프로젝트를 만듭니다.

  이 code 명령은 Visual Studio Code의 현재 인스턴스에서 MvcMovie 프로젝트 폴더를 엽니다.

Visual Studio Code에서 다음을 묻는 대화 상자를 표시할 수 있습니다. 이 폴더에 있는 파일의 작성자를 신뢰합니까?

• 부모 폴더의 모든 파일을 신뢰하는 경우 부모 폴더에 있는 모든 파일의 작성자 트러스트를 선택합니다.
• 예, 프로젝트 폴더에 .NET에서 생성된 파일이 있으므로 작성 자를 신뢰합니다.
• Visual Studio Code에서 프로젝트를 빌드하고 디버그할 자산을 추가하도록 요청하면 예를 선택합니다. Visual Studio Code에서 빌드 및 디버그 자산을 추가하도록 제공하지 않는 경우 명령 팔레트 보기를>선택하고 검색 상자에 ".NET"를 입력합니다. 명령 목록에서 명령을 선택합니다 .NET: Generate Assets for Build and Debug .

Visual Studio Code는 .vscode 생성된 파일과 tasks.json 파일이 있는 폴더를 launch.json 추가합니다.

Mac용 Visual Studio

• 파일>새 프로젝트...를 선택합니다.
• 웹 및 콘솔>앱>웹 애플리케이션(Model-View-Controller)>을 선택합니다.
• 새 웹 애플리케이션 구성(Model-View-Controller) 대화 상자에서 다음을 수행합니다.
  • 대상 프레임워크에 대해 .NET 8.0을 선택합니다.
  • 최상위 문을 사용하지 않음이 선택 취소되어 있는지 확인합니다.
• 계속을 선택합니다.
• Project name에 MvcMovie를 입력합니다. 프로젝트 이름을 MvcMovie로 지정해야 합니다. 코드를 복사할 때 대문자 표시가 각 namespace와 일치해야 합니다.
• 만들기를 실행합니다.

앱 실행

Visual Studio

• Ctrl+F5 키를 눌러 디버거 없이 앱을 실행합니다.

  프로젝트가 SSL을 사용하도록 아직 구성되지 않은 경우 Visual Studio에 다음 대화 상자가 표시됩니다.

  

  IIS Express SSL 인증서를 신뢰하는 경우 예를 선택합니다.

  다음 대화 상자가 표시됩니다.

  

  개발 인증서를 신뢰하는 데 동의하는 경우 예를 선택합니다.

  Firefox 브라우저를 신뢰하는 방법에 대한 자세한 내용은 Firefox SEC_ERROR_INADEQUATE_KEY_USAGE 인증서 오류를 참조하세요.

Visual Studio에서는 앱을 실행하고 기본 브라우저를 엽니다.

주소 표시줄에 localhost:<port#>이 표시되고 example.com 등은 표시되지 않습니다. 로컬 컴퓨터의 표준 호스트 이름은 localhost입니다. Visual Studio가 웹 프로젝트를 만들면 임의의 포트가 웹 서버에 사용됩니다.

Ctrl+F5 키를 눌러 디버깅하지 않고 앱을 시작하면 다음을 수행할 수 있습니다.

• 코드를 변경합니다.
• 파일을 저장합니다.
• 브라우저를 빠르게 새로 고치고 코드 변경 내용을 확인합니다.

디버그 메뉴에서 앱을 디버그 또는 비 디버그 모드로 시작할 수 있습니다.

도구 모음에서 https 단추를 선택하면 앱을 디버그할 수 있습니다.

다음 이미지는 앱을 보여줍니다.

• 브라우저 창을 닫습니다. Visual Studio에서 애플리케이션을 중지합니다.

Visual Studio Code

• 다음 명령을 실행하여 HTTPS 개발 인증서를 신뢰합니다.

  dotnet dev-certs https --trust
  

  앞의 명령은 Linux에서 작동하지 않습니다. 인증서 신뢰에 대해서는 Linux 배포 설명서를 참조하세요.

  위의 명령은 이전에 인증서를 신뢰할 수 없었던 경우 다음 대화 상자를 표시합니다.

  

• 개발 인증서를 신뢰하는 데 동의하는 경우 예를 선택합니다.

  자세한 내용은 ASP.NET Core HTTPS 개발 인증서 신뢰를 참조하세요.

Firefox 브라우저를 신뢰하는 방법에 대한 자세한 내용은 Firefox SEC_ERROR_INADEQUATE_KEY_USAGE 인증서 오류를 참조하세요.

• Visual Studio Code에서 Ctrl+F5(Windows)/^+F5(macOS)를 눌러 디버깅하지 않고 앱을 실행합니다.

  Visual Studio Code:

  • Kestrel 시작
  • 브라우저를 시작합니다.
  • https://localhost:<port#>로 이동합니다.

  주소 표시줄에 localhost:<port#>이 표시되고 example.com 등은 표시되지 않습니다. 로컬 컴퓨터의 표준 호스트 이름은 localhost입니다. Localhost는 로컬 컴퓨터의 웹 요청만 지원합니다.

Ctrl+F5를 선택하여 디버깅 없이 앱을 시작하면 다음을 수행할 수 있습니다.

• 코드를 변경합니다.

• 파일을 저장합니다.

• 브라우저를 빠르게 새로 고치고 코드 변경 내용을 확인합니다.

  

• 브라우저 창을 닫습니다.

• Visual Studio Code의 실행 메뉴에서 디버깅 중지를 선택하거나 Shift+F5 키를 눌러 앱을 중지합니다.

Mac용 Visual Studio

• 옵션+Command+Return을 선택하여 디버거 없이 앱을 실행합니다.

  Mac용 Visual Studio:

  • Kestrel 서버를 시작합니다.
  • 브라우저를 시작합니다.
  • http://localhost:portVisual Studio에서 웹 프로젝트를 만들 때 설정된 임의로 선택된 포트 번호인 포트로 이동합니다.

  Mac용 Visual Studio에 다음 팝업이 표시됩니다.

  

  • 개발 인증서를 신뢰하는 경우 설치 및 신뢰를 선택합니다.

  다음 대화 상자가 표시됩니다.

  

  • 암호를 입력하고 설정 업데이트를 선택합니다.

  자세한 내용은 ASP.NET Core HTTPS 개발 인증서 신뢰를 참조하세요.

  주소 표시줄에 localhost:<port#>이 표시되고 example.com 등은 표시되지 않습니다. 로컬 컴퓨터의 표준 호스트 이름은 localhost입니다. Localhost는 로컬 컴퓨터의 웹 요청만 지원합니다.

디버그 메뉴에서 디버그 또는 비 디버그 모드로 앱을 시작할 수 있습니다.

다음 이미지는 앱을 보여줍니다.

• 브라우저 창을 닫습니다. Mac용 Visual Studio 애플리케이션을 중지합니다.

Visual Studio

Visual Studio 도움말

• Visual Studio를 사용하여 C# 코드를 디버그하는 방법 알아보기
• Visual Studio IDE 소개

Visual Studio Code

Visual Studio Code 도움말

• 시작

• 디버깅

• 통합 터미널

• 바로 가기 키

  • macOS 바로 가기 키
  • Linux 바로 가기 키
  • Windows 바로 가기 키

Mac용 Visual Studio

Visual Studio for Mac 도움말

• Visual Studio for Mac 둘러보기
• Mac용 Visual Studio 소개

이 시리즈의 다음 자습서에서는 MVC에 대해 알아보고 코드 작성을 시작합니다.

다음: 컨트롤러 추가