[ToDoList 앱 개발] ASP.NET Core MVC - 1편 프로젝트를 생성하자

튜토리얼 version 0.1.1

 

오늘부터 현재 카테고리에 Tutorial이라는 카테고리가 생겼다. 거기에는 앞으로 내가 만들어 나가는 앱들에 대해서 나만의 방식으로 C#을 사용한 ASP.NET Core / Windows Form / WPF 등에 대한 튜토리얼을 연재할 것이다. Youtube로 하면 안되냐? 지금 글쓰는 것도 귀찮다... Youtube 영상 편집에 올리고 뭐하기 귀찮다.

1. 프로젝트 생성

Visual Studio를 실행하면 아래와 같은 창이 나온다. 상세하게 적을 테니 잘 따라오자!

Create a new project를 클릭

수 많은 프로젝트 생성 템플릿 중에 ASP.NET Core Web App(Model-View-Controller) 선택

 

Next를 누르면 Project명과 프로젝트 경로를 설정할 수 있다. 아래 내용으로 프로젝트를 생성하자

 

Project Name: ToDoList

Location: 본인이 원하는 경로에 프로젝트 생성

 

다음으로 넘어가면 Framwork 설정과 기타 설정이 있다.

여기서 우리는 Framework Version만 .NET 8.0 (Long Term Support)로 변경하고 Create 버튼을 클릭하자!

 

*참고: 현재 .NET version은 9.0까지 출시가 되어있는 상태다.

 

프로젝트를 생성하면 아래와 같이 보인다.

ASP.NET Core 좌측에 NAv/ 가운데 {}이런 표시가 있는 곳은 우리가 앞으로 코드를 작성할 창이 뜨는 곳이다.

우측 상단 그룹은 Solution 폴더와 Project 구조가 표시되어 있고. Properties에는 앞으로 우리가 사용하는 것들의 속성이 뜬다. 일단은 이렇게 알고 다음으로 넘어가자

 

여기서부터는 설명을 아래 하겠다.

 

위 사진을 보면 Solution Explorer라고 뜬다. 이것은 현재 우리가 만든 Project를 포함하고 있는 Solution의 구조를 보여주는 것이다. Solution 'ToDoList'에는 1개 이상의 프로젝트가 생성이 될 수 있다. 즉 10개든 20개든 추가적으로 프로젝트를 만들 수 있다는 것이다.

 

ToDoList는 우리가 만든 프로젝트의 최상위 경로다. 여기에는 wwwroot, Properties, Controller, Views와 Models라는 폴더들이 있다. 이에 대해서 설명하고 넘어가겠다

 

wwwroot 폴더

여기에는 우리가 앞으로 만드는 CSS, JS 등의 파일들이 모두 포함될 것이다. 기본적으로 Bootstrap과 Jquery가 설치되어 있다.

 

Controller 폴더

여기에는 우리가 만드는 프로젝트의 Controller 즉 명령을 실행하는 코드들이 작성될 곳이다. (일단 이렇게 알고 넘어가자, MVC는 뒤에서 설명하겠다)

 

Models 폴더

이 프로젝트에서 생성되는 모든 데이터 모델이 여기에 포함될 것이다.

 

Views 폴더

여기는 우리가 화면에 보여줄 View를 만드는 곳이다. 일반 웹 개발에서 말하는 HTML 파일이 여기에 포함된다고 보면 된다. Views 폴더 안에는 shared라는 폴더가 있는데, 여기에는 공유되는 header, footer 등이 여기에 포함될 것이다.

 

appsetting.json과 program.cs

json 파일은 db Connection 스트링과 같은 것을 포함하고 program.cs에서는 db연결 등에 작업을 수행할 것이다. 이 외에도 기능이 다양하게 있으니 검색해보자

 

이번 프로젝트에서 중요하게 알고 넘어가야할 점

SQL Server Local DB를 사용

Razor Pages 를 사용

ASP.NET Core MVC를 사용할 것이다.

ASP.NET Core에서 MVC란?

1. Model

• 애플리케이션의 데이터와 관련된 논리를 처리합니다.
• 데이터베이스와 상호작용하거나 비즈니스 로직을 포함합니다.
• 예: 데이터베이스에서 제품 정보를 가져와 View에 전달.

2. View

• 사용자 인터페이스(UI)를 담당합니다.
• Model에서 제공된 데이터를 기반으로 화면을 렌더링합니다.
• HTML, CSS, JavaScript 등의 프론트엔드 코드로 구성됩니다.
• 예: 사용자가 보는 상품 목록 페이지.

3. Controller

• 사용자 요청(HTTP 요청)을 처리하고, 그에 따라 Model과 View를 연결합니다.
• 비즈니스 로직을 실행하고 필요한 데이터를 Model에서 가져오거나 저장하며, 적절한 View를 반환합니다.
• 예: 사용자가 상품 검색 요청을 보낼 때 해당 데이터를 검색해 View로 전달.

위 사항을 알아두고 이제 본격적인 프로그래밍 세계로 가보자!