Angular2 + ASP.Net Core 기반 SPA 개발하기 (macOS)

이글은 아래 영문 블로그를 보고 맥에서 구현해 본 내용입니다.

https://www.hanselman.com/blog/dotnetNewAngularAndDotnetNewReact.aspx

 

안녕하세요. 김승진입니다.

 

오늘은 Angular2 +ASP.Net Core를 이용하여 Single Page Apps(SPA)를 만들어 보도록 하겠습니다.

의미를 부여하기 위해 윈도우가 아닌 맥에서 진행하도록 하겠습니다.

 

먼저 준비물입니다.

 

 - 맥북 또는 macOS가 설치된 PC

 - .Net Core 최신 버전 :  https://www.microsoft.com/net/core#macos

 - NodeJS 최신 버전 : https://nodejs.org/en

 - Angular CLI : npm 이용 다운로드

 - Visual Studio Code : https://code.visualstudio.com/?wt.mc_id=DX_841432&utm_source=vscom&utm_medium=ms%20web&utm_campaign=VSCOM%20Home

 

1. .Net Core 최신 버전 설치

오늘 날짜 기준으로 최신 버전은 1.1.1 입니다.

맥버전 dotnet-1.1.1-sdk-osx-x64.pkg 파일을 다운로드 받아 설치를 진행 할 수 있습니다.

 

 

2. Node.js 최신 버전 설치

오늘 날짜 기준 최신 버전은 6.10.0 입니다.

Node.js 를 설치하면 npm 도 함께 설치가 됩니다.

 

 

설치가 모두 완료 되었다면 설치 버전을 확인해 본다.

 

 

간단하게 위 터미널 실행하고

 

node --version

npm --version

 

을 입력하면 Node와 npm 버전을 확인 할 수 있습니다.

 

여기서 잠깐 npm은 Node Package Manager를 의미합니다.

 

3. Angular2 CLI 설치

사실 오늘은 Microsoft NuGet에서 Angular2 템플릿을 다운로드 받을 예정이기 때문에 Angular2 CLI가 필요한 것은 아닙니다.

하지만 일반적으로 Angular를 다룰 때 Command line interface가 필요로 하기에 설치하는 것입니다.

(3번 단계를 건너서 4번 단계로 가셔도 됩니다.)

 

 

npm install -g @angular/cli

ng new Angular2-Test04

 

npm 을 이용하여 Angular CLI를 설치한다. 설치가 완료 되면

ng new 명령어를 이용하여 Angular2-Test04 프로젝트 폴더를 생성한다.

 

 

이제 기본적인 Angular 폴더가 생성이 되었고 실행을 한번 해보겠습니다.

 

ng serve

 

위 명령어를 입력하면 Anugular 자체 웹 서버가 실행됩니다. 아래 그림 처럼 http://localhost:4200 을 브라우져에 입력하시면 됩니다.

 

 

 

4. Nuget을 이용한 Angular2 SPA 템플릿 설치하기

 

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

 

 

위 명령어를 입력하면 NuGet 에서 SPA관련 여러 템플릿을 다운로드 합니다.

Angular도 보이고 Aurelia, Knockout.js, React.js, Vue.js 등이 보입니다.

 

 

 

이제 준비가 모두 되었습니다.

 

5. Angular2 + ASP.Net Core  프로젝트 생성하기

 

 

 

mkdir Angular2-Test05

cd Angular2-Test05

dotnet new angular

 

새로운 폴더 Angular2-Test05를 생성하고 해당 폴더로 이동합니다.

그리고 4번 단계 내려 받은 템플릿을 이용하여 Angular 프로젝트를 생성합니다.

 

6. 프로젝트 실행하기

 

이제 드디어 프로젝트를 실행해 보겠습니다.

무심코 dotnet run 명령어를 입력하신다면 아래와 같은 오류를 만나실 수도 있습니다.

 

 

먼저 아래 명령어를 통해 package.json 에 정의된 패키지들을 다운로드 받아야 합니다. 그리고 실행합니다.

 

dotnet restore

dotnet run

 

 

 

 

dotnet run 을 실행하면 .Net Core 내부에 포함된 Kestrel 라는 웹서버가 구동되며 해당 웹 프로젝트를 실행합니다.

 

 

kestrel 웹서버에 대한 자세한 설명은 아래 링크를 확인해 보세요.

 

https://docs.microsoft.com/en-us/aspnet/core/fundamentals/servers/kestrel

 

아래 처럼 브라우져로 확인 할 수 있습니다. 템플릿이 친절하게도 사이트 메뉴와 간단한 예시 몇가지도 포함하고 있습니다.

 

 

감사합니다.