ASP.NET Core MVC 웹 애플리케이션 개발 시작하기 🚀

안녕하세요, 열정 넘치는 개발자 여러분! 오늘은 흥미진진한 ASP.NET Core MVC 웹 애플리케이션 개발의 세계로 여러분을 초대하려고 합니다. 🎉 이 여정을 통해 여러분은 현대적이고 강력한 웹 애플리케이션을 만드는 방법을 배우게 될 거예요. 마치 레고 블록을 조립하듯이, 우리는 하나하나 차근차근 배워나갈 거예요!

여러분, 혹시 재능넷이라는 사이트를 들어보셨나요? 이 사이트는 다양한 재능을 거래하는 플랫폼인데요, 우리가 오늘 배울 ASP.NET Core MVC를 활용하면 이런 멋진 웹 애플리케이션을 만들 수 있답니다! 자, 그럼 이제 본격적으로 시작해볼까요? 😊

💡 Pro Tip: ASP.NET Core MVC는 처음에는 복잡해 보일 수 있지만, 기본 개념만 잘 이해하면 누구나 마스터할 수 있어요. 끈기를 가지고 차근차근 따라오세요!

1. ASP.NET Core MVC란 무엇인가요? 🤔

ASP.NET Core MVC는 마이크로소프트에서 개발한 웹 애플리케이션 프레임워크예요. 이 프레임워크는 Model-View-Controller (MVC) 아키텍처 패턴을 기반으로 하고 있죠. 음... 뭔가 어려워 보이나요? 걱정 마세요! 우리 함께 하나씩 뜯어볼게요.

Model (모델): 데이터와 비즈니스 로직을 담당해요. 쉽게 말해, 우리 애플리케이션의 '두뇌' 역할을 한다고 볼 수 있죠.
View (뷰): 사용자에게 보여지는 UI를 담당해요. 우리 애플리케이션의 '얼굴'이라고 생각하면 됩니다.
Controller (컨트롤러): 사용자의 입력을 받아 모델과 뷰를 연결하는 역할을 해요. 우리 애플리케이션의 '조정자' 역할이죠.

이 세 가지 요소가 서로 협력하여 웹 애플리케이션을 구성하는 거예요. 마치 오케스트라에서 각 악기가 조화롭게 연주되는 것처럼 말이죠! 🎵

이 다이어그램을 보면 MVC의 각 구성 요소가 어떻게 상호작용하는지 한눈에 볼 수 있죠? 컨트롤러가 모델과 뷰 사이에서 중재자 역할을 하는 것을 볼 수 있어요. 마치 교통경찰관이 차들의 흐름을 조절하는 것처럼 말이에요! 🚦

ASP.NET Core MVC는 이전 버전의 ASP.NET MVC에 비해 많은 장점을 가지고 있어요:

크로스 플랫폼 지원 (Windows, macOS, Linux)
높은 성능
의존성 주입 기본 지원
가볍고 모듈화된 구조
클라우드 친화적인 환경 구성

이런 특징들 덕분에 ASP.NET Core MVC는 현대적이고 확장 가능한 웹 애플리케이션을 개발하는 데 아주 적합한 프레임워크랍니다. 마치 스위스 군용 칼처럼 다재다능하고 강력하죠! 🔧

🌟 재미있는 사실: ASP.NET Core MVC는 오픈 소스예요! 이는 전 세계의 개발자들이 이 프레임워크의 발전에 기여할 수 있다는 뜻이에요. 마치 전 세계 요리사들이 함께 레시피를 개선하는 것과 같죠. 맛있는 코드가 탄생할 수밖에 없겠죠? 😋

자, 이제 ASP.NET Core MVC가 무엇인지 대략적으로 이해하셨나요? 그렇다면 이제 본격적으로 개발 환경을 설정하고 첫 번째 프로젝트를 만들어볼 차례예요. 흥미진진한 여정이 기다리고 있답니다! 🚀

2. 개발 환경 설정하기 🛠️

ASP.NET Core MVC 개발을 시작하기 전에, 우리는 먼저 필요한 도구들을 준비해야 해요. 마치 요리를 시작하기 전에 주방 도구를 준비하는 것처럼 말이죠! 자, 그럼 어떤 도구들이 필요한지 살펴볼까요?

2.1 .NET SDK 설치하기

가장 먼저 필요한 것은 .NET SDK (Software Development Kit)예요. 이것은 우리가 ASP.NET Core 애플리케이션을 개발하고 실행하는 데 필요한 모든 도구를 포함하고 있어요.

먼저, 마이크로소프트 공식 다운로드 페이지에 접속해주세요.
여러분의 운영 체제에 맞는 .NET SDK를 다운로드하세요.
다운로드한 설치 파일을 실행하고, 안내에 따라 설치를 완료하세요.

설치가 완료되면, 명령 프롬프트(윈도우) 또는 터미널(맥, 리눅스)에서 다음 명령어를 입력해 설치가 제대로 되었는지 확인해보세요:

dotnet --version

이 명령어를 실행하면 설치된 .NET SDK의 버전이 출력될 거예요. 마치 새로 산 자전거의 성능을 확인하는 것처럼, 우리의 개발 도구가 제대로 작동하는지 확인하는 과정이죠! 🚴‍♂️

2.2 Visual Studio 또는 Visual Studio Code 설치하기

다음으로 필요한 것은 통합 개발 환경(IDE)이에요. 우리는 두 가지 선택지가 있답니다:

Visual Studio: 윈도우와 맥에서 사용할 수 있는 풀 기능 IDE
Visual Studio Code: 윈도우, 맥, 리눅스에서 사용할 수 있는 가벼운 코드 에디터

둘 다 훌륭한 도구이지만, 이 튜토리얼에서는 Visual Studio를 사용할 거예요. Visual Studio는 ASP.NET Core 개발을 위한 많은 기능을 기본적으로 제공하기 때문이죠.

Visual Studio 다운로드 페이지에 접속하세요.
Community 버전을 다운로드하세요 (무료예요!).
설치 프로그램을 실행하고, 워크로드 선택 화면에서 "ASP.NET 및 웹 개발"을 선택하세요.
설치를 완료하세요.

💡 Pro Tip: Visual Studio를 설치할 때 다른 워크로드도 함께 설치할 수 있어요. 하지만 처음에는 필요한 것만 설치하고, 나중에 필요할 때 추가로 설치하는 것이 좋아요. 마치 옷장을 정리할 때 꼭 필요한 옷만 남기는 것처럼 말이죠!

2.3 Git 설치하기 (선택사항)

Git은 버전 관리 시스템으로, 코드의 변경 사항을 추적하고 관리하는 데 사용돼요. 필수는 아니지만, 프로젝트를 효과적으로 관리하는 데 매우 유용하답니다.

Git 공식 다운로드 페이지에 접속하세요.
여러분의 운영 체제에 맞는 버전을 다운로드하고 설치하세요.

설치가 완료되면, 다음 명령어로 Git이 제대로 설치되었는지 확인해보세요:

git --version

이렇게 하면 설치된 Git의 버전이 출력될 거예요. Git을 사용하면 마치 타임머신을 타고 코드의 과거로 돌아갈 수 있어요. 실수로 뭔가를 잘못 고쳤다고요? 걱정 마세요, Git이 있으면 언제든 이전 버전으로 돌아갈 수 있답니다! ⏰

이 다이어그램은 우리가 지금까지 설정한 개발 환경을 보여줘요. .NET SDK, Visual Studio, 그리고 Git(선택사항)이 모여 우리의 완벽한 개발 환경을 만들어냈죠. 마치 퍼즐 조각들이 맞춰져 하나의 그림을 완성하는 것처럼 말이에요! 🧩

자, 이제 우리의 주방... 아니, 개발 환경이 완벽하게 준비되었어요! 이제 우리는 ASP.NET Core MVC 애플리케이션을 만들 준비가 되었답니다. 다음 섹션에서는 우리의 첫 번째 프로젝트를 만들어볼 거예요. 흥미진진한 코딩의 세계로 함께 떠나볼까요? 🚀

🌈 상상의 나래를 펼쳐봐요: 여러분이 방금 설정한 이 개발 환경은 마치 화가의 작업실과 같아요. .NET SDK는 여러분의 물감이고, Visual Studio는 여러분의 캔버스이며, Git은 여러분의 스케치북이에요. 이제 여러분은 이 도구들을 사용해 웹이라는 캔버스 위에 여러분만의 독특한 애플리케이션이라는 작품을 그려나갈 거예요. 어떤 멋진 작품이 탄생할지 정말 기대되지 않나요? 🎨

3. 첫 번째 ASP.NET Core MVC 프로젝트 만들기 🎨

자, 이제 우리의 개발 환경이 완벽하게 준비되었으니 드디어 첫 번째 ASP.NET Core MVC 프로젝트를 만들어볼 시간이에요! 마치 처음으로 자전거를 타는 것처럼 설레고 흥분되지 않나요? 그럼 시작해볼까요? 🚴‍♀️

3.1 Visual Studio에서 새 프로젝트 만들기

Visual Studio를 실행하세요.
'새 프로젝트 만들기'를 클릭하세요.
검색 창에 'ASP.NET Core 웹 애플리케이션'을 입력하고 선택하세요.
'다음'을 클릭하세요.
프로젝트 이름을 입력하세요. 예를 들어, 'MyFirstMVCApp'이라고 지어볼까요?
프로젝트를 저장할 위치를 선택하세요.
'만들기'를 클릭하세요.
다음 화면에서 'ASP.NET Core 5.0' (또는 최신 버전)을 선택하고, 'Web Application (Model-View-Controller)'를 선택하세요.
'만들기'를 다시 클릭하세요.

와우! 🎉 방금 여러분은 첫 번째 ASP.NET Core MVC 프로젝트를 만들었어요. 마치 처음으로 자전거 페달을 밟은 것처럼 짜릿하지 않나요?

3.2 프로젝트 구조 살펴보기

이제 Visual Studio의 솔루션 탐색기를 보면, 다음과 같은 폴더 구조가 보일 거예요:

Connected Services: 클라우드 또는 다른 서비스와의 연결을 관리해요.
Dependencies: 프로젝트의 의존성(라이브러리 등)을 관리해요.
Properties: 프로젝트의 속성과 설정을 포함해요.
wwwroot: 정적 파일(CSS, JavaScript, 이미지 등)을 저장해요.
Controllers: MVC의 컨트롤러들이 위치해요.
Models: 데이터 모델들이 위치해요.
Views: 사용자에게 보여질 뷰 템플릿들이 위치해요.

이 구조는 마치 잘 정리된 서랍장 같아요. 각각의 폴더는 특정한 목적을 가진 서랍이고, 우리는 필요할 때마다 적절한 서랍을 열어 원하는 것을 찾을 수 있죠. 😊

이 다이어그램은 우리가 방금 만든 ASP.NET Core MVC 프로젝트의 구조를 보여줘요. 각각의 폴더와 파일이 어떤 역할을 하는지 이해하는 것이 중요해요. 마치 새로운 도시의 지도를 익히는 것처럼, 이 구조에 익숙해지면 프로젝트 내에서 길을 잃지 않을 수 있답니다! 🗺️

3.3 기본 생성된 코드 살펴보기

프로젝트를 만들면 Visual Studio가 자동으로 몇 가지 기본 파일들을 생성해요. 이 파일들을 살펴보면서 ASP.NET Core MVC의 기본 구조를 이해해봐요.

3.3.1 Program.cs

이 파일은 애플리케이션의 진입점이에요. 여기서 웹 호스트를 구성하고 애플리케이션을 시작해요.


public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStartup<startup>();
            });
}
</startup>

이 코드는 마치 레스토랑을 여는 것과 같아요. Main 메서드는 레스토랑의 문을 여는 것이고, CreateHostBuilder는 레스토랑의 기본 설정을 하는 거죠.

3.3.2 Startup.cs

이 파일은 애플리케이션의 서비스를 구성하고 HTTP 요청 파이프라인을 정의해요.


public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllersWithViews();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseRouting();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");
        });
    }
}

Startup 클래스는 우리 웹 애플리케이션의 '요리사'와 같아요. ConfigureServices 메서드는 필요한 재료들(서비스들)을 준비하고, Configure 메서드는 실제로 요리를 만드는(애플리케이션을 구성하는) 과정이에요. 🍳

3.3.3 Controllers/HomeController.cs

이 파일은 기본 홈 컨트롤러예요. 사용자의 요청을 처리하고 적절한 응답을 반환해요.


public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    public IActionResult Privacy()
    {
        return View();
    }

    [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
    public IActionResult Error()
    {
        return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
    }
}

컨트롤러는 레스토랑의 웨이터와 같아요. 손님(사용자)의 주문(요청)을 받아 주방(모델)에 전달하고, 완성된 요리(데이터)를 손님에게 제공(뷰를 통해 표시)하죠. 🍽️

3.3.4 Views/Home/Index.cshtml

이 파일은 홈 페이지의 뷰 템플릿이에요. 사용자에게 실제로 보여질 HTML을 정의해요.


@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

뷰는 레스토랑의 플레이팅과 같아요. 요리(데이터)를 어떻게 예쁘게 담아서 손님(사용자)에게 제공할지 결정하는 거죠. 🍽️✨

3.4 애플리케이션 실행하기

자, 이제 우리의 첫 번째 ASP.NET Core MVC 애플리케이션을 실행해볼 시간이에요!

Visual Studio의 상단 메뉴에서 '디버그' > '디버깅하지 않고 시작'을 선택하세요. (또는 Ctrl+F5를 누르세요)
잠시 기다리면 기본 웹 브라우저가 열리면서 우리의 애플리케이션이 실행될 거예요.

축하합니다! 🎉 방금 여러분은 첫 번째 ASP.NET Core MVC 웹 애플리케이션을 성공적으로 만들고 실행했어요. 이제 여러분은 웹 개발의 세계에 첫 발을 내딛은 거예요!

💡 Pro Tip: 처음에는 이 모든 것이 복잡해 보일 수 있어요. 하지만 걱정하지 마세요! 시간이 지나면서 각 부분의 역할과 상호작용을 더 잘 이해하게 될 거예요. 마치 퍼즐을 맞추는 것처럼, 조금씩 전체 그림을 볼 수 있게 될 거랍니다. 🧩

이제 우리는 ASP.NET Core MVC의 기본 구조와 작동 방식을 알게 되었어요. 다음 단계에서는 이 기본 애플리케이션을 조금씩 수정하고 확장해나가면서, 실제로 동작하는 웹 애플리케이션을 만들어볼 거예요. 준비되셨나요? 더 흥미진진한 여정이 우리를 기다리고 있답니다! 🚀

4. 모델 만들기 📊

이제 우리의 애플리케이션에 실제 데이터를 추가해볼 시간이에요. ASP.NET Core MVC에서 모델은 애플리케이션의 데이터와 비즈니스 로직을 나타내요. 마치 레스토랑의 메뉴와 요리 레시피를 정의하는 것과 같죠. 🍽️

4.1 간단한 모델 클래스 만들기

우리의 첫 번째 모델로 간단한 '할 일' 항목을 만들어볼게요.

솔루션 탐색기에서 'Models' 폴더를 우클릭하고 '추가' > '클래스'를 선택하세요.
새 클래스의 이름을 'TodoItem.cs'로 지정하고 '추가'를 클릭하세요.
다음과 같이 코드를 작성하세요:


public class TodoItem
{
    public int Id { get; set; }
    public string Title { get; set; }
    public bool IsDone { get; set; }
}

이 간단한 모델은 각 할 일 항목의 ID, 제목, 완료 여부를 나타내요. 마치 요리 레시피의 재료 목록과 같죠! 🥗

4.2 데이터 컨텍스트 만들기

이제 우리의 모델을 데이터베이스와 연결할 데이터 컨텍스트를 만들어볼게요. 이는 Entity Framework Core를 사용하여 데이터베이스 작업을 수행할 수 있게 해줘요.

'Models' 폴더에 새로운 클래스를 만들고 이름을 'ApplicationDbContext.cs'로 지정하세요.
다음과 같이 코드를 작성하세요:


using Microsoft.EntityFrameworkCore;

public class ApplicationDbContext : DbContext
{
    public ApplicationDbContext(DbContextOptions<applicationdbcontext> options)
        : base(options)
    {
    }

    public DbSet<todoitem> TodoItems { get; set; }
}
</todoitem></applicationdbcontext>

이 데이터 컨텍스트는 우리의 '주방'이에요. 여기서 모든 요리(데이터)가 준비되고 저장되죠. 🍳

4.3 의존성 주입 설정

이제 우리의 애플리케이션에 데이터 컨텍스트를 등록해야 해요. 이를 위해 'Startup.cs' 파일을 수정할 거예요.

'Startup.cs' 파일을 열고 'ConfigureServices' 메서드를 다음과 같이 수정하세요:


public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<applicationdbcontext>(options =>
        options.UseInMemoryDatabase("TodoList"));
    services.AddControllersWithViews();
}
</applicationdbcontext>

여기서 우리는 메모리 내 데이터베이스를 사용하도록 설정했어요. 이는 실제 데이터베이스를 설정하지 않고도 우리의 애플리케이션을 테스트할 수 있게 해주죠. 마치 실제 주방을 차리기 전에 임시 주방에서 요리를 연습하는 것과 같아요! 🏠

4.4 컨트롤러 수정하기

이제 우리의 모델을 사용하도록 HomeController를 수정해볼게요.

'Controllers/HomeController.cs' 파일을 열고 다음과 같이 수정하세요:


public class HomeController : Controller
{
    private readonly ApplicationDbContext _context;

    public HomeController(ApplicationDbContext context)
    {
        _context = context;
    }

    public IActionResult Index()
    {
        var todoItems = _context.TodoItems.ToList();
        return View(todoItems);
    }

    // 다른 액션 메서드들...
}

이제 우리의 컨트롤러는 데이터베이스에서 모든 할 일 항목을 가져와 뷰에 전달해요. 마치 웨이터가 주방에서 요리를 가져와 손님에게 제공하는 것과 같죠! 🍽️

4.5 뷰 수정하기

마지막으로, 우리의 모델 데이터를 표시하도록 뷰를 수정해볼게요.

'Views/Home/Index.cshtml' 파일을 열고 다음과 같이 수정하세요:


@model List<todoitem>

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Here are your todo items:</p>
    <ul>
        @foreach (var item in Model)
        {
            <li>@item.Title - @(item.IsDone ? "Done" : "Not Done")</li>
        }
    </ul>
</div>
</todoitem>

이제 우리의 뷰는 컨트롤러에서 전달받은 할 일 항목들을 목록으로 표시해요. 마치 레스토랑의 메뉴판을 손님에게 보여주는 것과 같죠! 📜

이 다이어그램은 우리가 방금 구현한 MVC 패턴에서의 데이터 흐름을 보여줘요. 모델(TodoItem)이 데이터를 제공하고, 컨트롤러가 이를 처리하여 뷰에 전달하며, 뷰는 이를 사용자에게 표시하죠. 사용자의 상호작용은 다시 컨트롤러로 전달되어 새로운 사이클을 시작해요. 마치 레스토랑에서 주방, 웨이터, 손님 사이의 상호작용과 비슷하죠! 🍽️👨‍🍳👩‍🍳

💡 Pro Tip: 실제 애플리케이션에서는 보통 데이터베이스를 사용해요. 메모리 내 데이터베이스는 테스트나 프로토타이핑에 유용하지만, 실제 운영 환경에서는 SQL Server나 PostgreSQL 같은 실제 데이터베이스를 사용하는 것이 좋아요. 마치 연습용 주방에서 실제 레스토랑 주방으로 업그레이드하는 것과 같죠! 🏠 → 🏢

축하합니다! 🎉 여러분은 이제 ASP.NET Core MVC에서 모델을 만들고, 데이터베이스와 연결하고, 컨트롤러와 뷰를 통해 데이터를 표시하는 방법을 배웠어요. 이는 웹 애플리케이션 개발의 핵심적인 부분이에요. 앞으로 이를 바탕으로 더 복잡하고 흥미로운 기능들을 추가해나갈 수 있을 거예요. 계속해서 탐험하고 학습해나가세요! 🚀📚

5. CRUD 기능 구현하기 🛠️

이제 우리의 Todo 리스트 애플리케이션에 CRUD(Create, Read, Update, Delete) 기능을 추가해볼 거예요. 이는 거의 모든 웹 애플리케이션의 기본이 되는 기능들이에요. 마치 요리의 기본 기술인 '굽기', '삶기', '볶기', '튀기기'와 같죠! 👨‍🍳

5.1 Create (생성) 기능 추가하기

먼저 새로운 Todo 항목을 추가하는 기능을 만들어볼게요.

HomeController에 다음 액션 메서드들을 추가하세요:


[HttpGet]
public IActionResult Create()
{
    return View();
}

[HttpPost]
public IActionResult Create(TodoItem todoItem)
{
    if (ModelState.IsValid)
    {
        _context.TodoItems.Add(todoItem);
        _context.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(todoItem);
}

이 코드는 새로운 Todo 항목을 생성하는 폼을 표시하고, 폼이 제출되면 새 항목을 데이터베이스에 저장해요. 마치 새로운 메뉴 항목을 레스토랑 메뉴에 추가하는 것과 같죠! 🍽️

'Views/Home' 폴더에 'Create.cshtml' 파일을 만들고 다음 내용을 추가하세요:


@model TodoItem

<h2>Create New Todo Item</h2>

@using (Html.BeginForm())
{
    <div>
        @Html.LabelFor(m => m.Title)
        @Html.TextBoxFor(m => m.Title)
    </div>
    <div>
        @Html.LabelFor(m => m.IsDone)
        @Html.CheckBoxFor(m => m.IsDone)
    </div>
    <button type="submit">Create</button>
}

5.2 Read (읽기) 기능 개선하기

우리는 이미 기본적인 읽기 기능을 구현했지만, 개별 항목의 상세 정보를 볼 수 있게 개선해볼게요.

HomeController에 다음 액션 메서드를 추가하세요:


public IActionResult Details(int id)
{
    var todoItem = _context.TodoItems.FirstOrDefault(i => i.Id == id);
    if (todoItem == null)
    {
        return NotFound();
    }
    return View(todoItem);
}

'Views/Home' 폴더에 'Details.cshtml' 파일을 만들고 다음 내용을 추가하세요:


@model TodoItem

<h2>Todo Item Details</h2>

<div>
    <h4>Title: @Model.Title</h4>
    <p>Status: @(Model.IsDone ? "Done" : "Not Done")</p>
</div>

@Html.ActionLink("Back to List", "Index")

5.3 Update (수정) 기능 추가하기

이제 기존 Todo 항목을 수정하는 기능을 추가해볼게요.

HomeController에 다음 액션 메서드들을 추가하세요:


[HttpGet]
public IActionResult Edit(int id)
{
    var todoItem = _context.TodoItems.Find(id);
    if (todoItem == null)
    {
        return NotFound();
    }
    return View(todoItem);
}

[HttpPost]
public IActionResult Edit(int id, TodoItem todoItem)
{
    if (id != todoItem.Id)
    {
        return NotFound();
    }

    if (ModelState.IsValid)
    {
        _context.Update(todoItem);
        _context.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(todoItem);
}

'Views/Home' 폴더에 'Edit.cshtml' 파일을 만들고 다음 내용을 추가하세요:


@model TodoItem

<h2>Edit Todo Item</h2>

@using (Html.BeginForm())
{
    @Html.HiddenFor(m => m.Id)
    <div>
        @Html.LabelFor(m => m.Title)
        @Html.TextBoxFor(m => m.Title)
    </div>
    <div>
        @Html.LabelFor(m => m.IsDone)
        @Html.CheckBoxFor(m => m.IsDone)
    </div>
    <button type="submit">Save</button>
}

5.4 Delete (삭제) 기능 추가하기

마지막으로, Todo 항목을 삭제하는 기능을 추가해볼게요.

HomeController에 다음 액션 메서드들을 추가하세요:


[HttpGet]
public IActionResult Delete(int id)
{
    var todoItem = _context.TodoItems.Find(id);
    if (todoItem == null)
    {
        return NotFound();
    }
    return View(todoItem);
}

[HttpPost, ActionName("Delete")]
public IActionResult DeleteConfirmed(int id)
{
    var todoItem = _context.TodoItems.Find(id);
    _context.TodoItems.Remove(todoItem);
    _context.SaveChanges();
    return RedirectToAction("Index");
}

'Views/Home' 폴더에 'Delete.cshtml' 파일을 만들고 다음 내용을 추가하세요:


@model TodoItem

<h2>Delete Todo Item</h2>

<h3>Are you sure you want to delete this?</h3>
<div>
    <h4>@Model.Title</h4>
    <p>Status: @(Model.IsDone ? "Done" : "Not Done")</p>
    
    @using (Html.BeginForm())
    {
        <input type="submit" value="Delete">
    }
</div>

@Html.ActionLink("Back to List", "Index")

5.5 Index 뷰 업데이트하기

마지막으로, 모든 CRUD 작업에 대한 링크를 포함하도록 Index 뷰를 업데이트해볼게요.

'Views/Home/Index.cshtml' 파일을 다음과 같이 수정하세요:


@model List<todoitem>

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Here are your todo items:</p>
    <table class="table">
        <thead>
            <tr>
                <th>Title</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@item.Title</td>
                    <td>@(item.IsDone ? "Done" : "Not Done")</td>
                    <td>
                        @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                        @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                        @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
</div>
</todoitem>

축하합니다! 🎉 여러분은 이제 완전한 CRUD 기능을 갖춘 Todo 리스트 애플리케이션을 만들었어요. 이는 마치 레스토랑에서 메뉴를 추가하고, 조회하고, 수정하고, 삭제할 수 있게 된 것과 같아요. 이제 여러분의 '디지털 레스토랑'이 완전히 운영될 준비가 된 거죠! 🍽️👨‍🍳👩‍🍳

이 다이어그램은 우리가 구현한 CRUD 작업을 시각적으로 보여줘요. 각 작업은 Todo 리스트 애플리케이션의 핵심 기능을 나타내며, 이들이 함께 작동하여 완전한 데이터 관리 시스템을 형성하죠. 마치 레스토랑의 주방에서 요리를 만들고, 서빙하고, 메뉴를 수정하고, 더 이상 필요 없는 메뉴를 제거하는 과정과 비슷해요! 🍳🍽️

💡 Pro Tip: CRUD 작업을 구현할 때는 항상 사용자 입력을 검증하고, 적절한 오류 처리를 해주는 것이 중요해요. 이는 애플리케이션의 안정성과 보안을 높이는 데 큰 도움이 됩니다. 마치 레스토랑에서 식재료의 품질을 체크하고, 위생 관리를 철저히 하는 것과 같죠! 🧼🔍