[.net] React 페이지 만들기 1

Model 생성

• 프로젝트 최상위 디렉터리에 Models 디렉터리를 생성
• Models 디렉터리에 ItemModel.cs 파일 생성

namespace RankingApp.Models
{
    public class ItemModel
    {
        public int Id{get; set;}
        public string Title{get; set;}
        public int ImageId{get; set;}
        public int Ranking{get; set;}
        public int ItemType{get; set;}
    }
}

• ItemModel 클래스는 필드로 위 값을 가지게 된다.
  • 이때 필드 값이 getter와 setter를 가지도록 설정한다.

Controller 생성

• 프로젝트 최상위 디렉터리에 존재하는 Controllers 디렉터리에 ItemController.cs 파일 생성

using Microsoft.AspNetCore.Mvc;
using RankingApp.Models;

namespace RankingApp.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class ItemController : ControllerBase{
        private static readonly IEnumerable<ItemModel> Items= new[]
        {
            new ItemModel{Id =1, Title = "The Godfather", ImageId=1, Ranking=0,ItemType=1 },
            new ItemModel{Id =2, Title = "Highlander", ImageId=2, Ranking=0,ItemType=1 },
            new ItemModel{Id =3, Title = "Highlander II", ImageId=3, Ranking=0,ItemType=1 },
            new ItemModel{Id =4, Title = "The Last of the Mohicans", ImageId=4, Ranking=0,ItemType=1 },
            new ItemModel{Id =5, Title = "Police Academy 6", ImageId=5, Ranking=0,ItemType=1 },
            new ItemModel{Id =6, Title = "Rear Window", ImageId=6, Ranking=0,ItemType=1 },
            new ItemModel{Id =7, Title = "Road House", ImageId=7, Ranking=0,ItemType=1 },
            new ItemModel{Id =8, Title = "The Shawshank Redemption", ImageId=8, Ranking=0,ItemType=1 },
            new ItemModel{Id =9, Title = "Star Treck IV", ImageId=9, Ranking=0,ItemType=1 },
            new ItemModel{Id =10, Title = "Superman 4", ImageId=10, Ranking=0,ItemType=1 },
            new ItemModel{Id = 11, Title = "Abbey Road", ImageId=11, Ranking=0,ItemType=2 },
            new ItemModel{Id = 12, Title = "Adrenalize", ImageId=12, Ranking=0,ItemType=2 },
            new ItemModel{Id = 13, Title = "Back in Black", ImageId=13, Ranking=0,ItemType=2 },
            new ItemModel{Id = 14, Title = "Enjoy the Silence", ImageId=14, Ranking=0,ItemType=2 },
            new ItemModel{Id = 15, Title = "Parachutes", ImageId=15, Ranking=0,ItemType=2 },
            new ItemModel{Id = 16, Title = "Ride the Lightning", ImageId=16, Ranking=0,ItemType=2 },
            new ItemModel{Id = 17, Title = "Rock or Bust", ImageId=17, Ranking=0,ItemType=2 },
            new ItemModel{Id = 18, Title = "Rust in Peace", ImageId=18, Ranking=0,ItemType=2 },
            new ItemModel{Id = 19, Title = "St. Anger", ImageId=19, Ranking=0,ItemType=2 },
            new ItemModel{Id = 20, Title = "The Final Countdown", ImageId=20, Ranking=0,ItemType=2 }

        };
        [HttpGet("{itemType:int}")]
        public ItemModel[] Get(int itemType)
        {
            ItemModel[] items = Items.Where(i => i.ItemType == itemType).ToArray();
            return items;
        }
    }
}

• MVC 컨트롤러에 대한 기본 클래스인 ControllerBase를 사용해야함
  • using Microsoft.AspNetCore.Mvc
  • 초기 제공해주는 WeatherForecastController.cs를 살펴보면 ControllerBase를 상속받는 것을 알 수 있음
  • ItemController가 ControllerBase를 상속받도록 지정
• ControllerBase class는 Route 어트리뷰트에 의해 Routing경로가 api/[controller] 로 되어 있음
  • [controller]는 생성된 Controller클래스의 이름에 해당
  • 실제 Routing경로는 api/value
  • 다른 경로로 Routing 되기를 희망한다면 api/abc와 같이 고정적인 경로를 줄 수 도 있고 api/abc/def처럼 서브 경로를 포함시켜 지정해 줄 수 있다.
• ItemController는 Get함수를 통해 클라이언트의 Get요청을 처리함
  • HttpGet("{사용자가 추가한 매개변수"})에 의해 Get함수에 사용자가 추가한 매개변수를 전달

 

 

 

 

 

출처

https://github.com/GavinLonDigital/RankingApp/tree/main

GitHub - GavinLonDigital/RankingApp: This repository is part of a video course on React and .NET Web API

https://www.youtube.com/watch?v=4RKuyp_bOhY

https://lab.cliel.com/entry/ASPNET-Core-Web-API-Web-API-%EA%B8%B0%EB%B3%B8

[ASP.NET Core Web API] 프로젝트및 Controller 생성

https://lab.cliel.com/entry/ASPNET-Core-Web-API-Action

[ASP.NET Core Web API] Action Method - 요청