빈 프로젝트로 세팅하는 이유 중에 하나가 'ASP.NET MVC'의 잡다한 코드가 설치되지 않게 하기 위해 서 입니다.
하지만 이제는 'WebAPI' 템플릿이 있어서 그냥 이거 써도 됩니다.
그래도 템플릿 없이 어떻게 구성해야 하는지 알아두면 좋겠죠?
[ASP.NET Core] 빈 프로젝트 세팅 (1) - 'index.html'을 시작페이지로 설정하기
[ASP.NET Core] 빈 프로젝트 세팅 (2) - WebAPI 설정
[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(1) - 기초
[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(2) - Ajax공통 기능, 데이터 바인드 처리
[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(3) - API 결과 공통 처리
[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(4) - 인증 기능 추가
[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(5) - 스웨거(Swagger) 설정
** 프로젝트 환경
Visual Studio 2019 Preview (16.1.0 Preview 3.0)
.NET Core 2.2
1. 프로젝트 생성
프로젝트를 'ASP.NET Core 웹 응용 프로그램'으로 생성합니다.
템플릿은 '비어있음(Empty)'으로 생성합니다.
2. 프로젝트 세팅
테스트를 위헤서 'WebAPI'와 관련 없는 것들을 몇 개 설정해야 합니다.
2-1. 폴더 생성
프로젝트에 'wwwroot'와 'Controllers'폴더를 생성합니다.
2-2. 파일 생성
이제 테스트로 사용할 'wwwroot/index.html'을 생성하고 아래 코드를 넣어 줍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- jquery 3.4.1 -->
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</head>
<body>
헬로 ASP.NET Core Empty Project 2
</body>
</html> |
cs |
테스트용 컨트롤러를 생성을 선택하고 'Controllers/TestController'를 만듭니다.
생성된 'Controllers/TestController'에 아래와 같이 코드를 작성합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
[Route("api/[controller]")]
[ApiController]
public class TestController : ControllerBase
{
[HttpGet]
[Route("Call")]
public ActionResult Call()
{
ObjectResult apiresult = new ObjectResult(200);
apiresult = StatusCode(200, "성공!");
return apiresult;
}
} |
cs |
2-3. 'html'파일 접근 설정
이 상태로는 'html'파일을 읽을 수 없습니다.
이전 글을 참고하여 'html'파일을 읽을 수 있도록 구성해 줍니다.
참고 : [ASP.NET Core] 빈 프로젝트 세팅 (1) - 'index.html'을 시작페이지로 설정하기
3. 'WebAPI' 세팅
이대로 위에서 생성한 API 접근하려고 하면 404 에러가 나게 됩니다.
'WebAPI'가 동작할 수 있도록 세팅을 해야 하죠.
'Startup.cs'을 열고 'ConfigureServices'함수에 아래 코드를 추가해 줍니다.
|
1 |
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2); |
cs |
'Configure'함수 마지막에 아래 코드를 추가해 줍니다.
|
1 |
app.UseMvc(); |
cs |
이렇게 수정한 'Startup.cs' 최종 코드는 아래와 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 |
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
//app.Run(async (context) =>
//{
// await context.Response.WriteAsync("Hello World!");
//});
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseMvc();
}
} |
cs |
4. 테스트
이제 프로젝트를 시작하면 아래와 같은 페이지를 볼 수 있습니다.
F12를 눌러 개발자 모드를 활성화해줍니다. (크롬, 파이어폭스, 익스 공통)
개발자 모드 콘솔(Console)에 아래 명령을 실행합니다.
|
1 |
$.get("/api/Test/Call"); |
cs |
결과가 나오면 제대로 따라오신 겁니다!!
마무리
이 포스팅까지 완료되었다면 이제 MVC를 쓸지 말지는 기획 문제가 되죠.
프론트엔드와 백엔드를 나눠서 관리할 수 있게 되는 겁니다!!
