Visual Studio 로 Angular 5 개발 환경 만들기

** 이 글은 Angular 개발의 기본 개념을 알고 있는 사람을 대상으로 합니다만, 아무것도 몰라도 이대로 따라하면 Visual Studio를 사용해 기본 사이트를 실행할 수 있습니다. Angular 개발의 기본을 알고 싶으신 분들은 Angular 2 설치 및 Angular CLI로 프로젝트 실행 방법을 먼저 읽어주세요.

이전까지 저는 Atom Editor를 사용해 Angular 개발을 해왔는데, 최근 Visual Studio로 프로젝트를 할 일이 있어서 Visual Studio를 사용하게 되었습니다. 개인적으로 Angular는 Visual Studio를 사용하여 개발하는 것이 더 좋은 것 같아 소개드리려합니다.

우선 제가 생각한 장점들을 먼저 설명하고 개발 환경 구축을 해봅시다.

장점 1. Git과 연동

** Git이 무엇인지 모르시는 분들은 건너뛰셔도 좋고, 아니면 Git과 GitHub 글을 읽어주세요.

Atom Editor와 마찬가지로 이전 commit과 변경된 파일이 표시됩니다.


하일라이트된 파일을 보면 체크표시와 +표시가 있습니다. 체크표시는 이전 commit과 비교해서 변경된 부분이 있는 파일, +표시는 새로 생성된 파일을 나타냅니다.

이건 Atom과 비슷하죠. Visual Studio만의 장점은 아래 그림 처럼 commit간 파일의 비교를 표시해주는 것입니다.

정확히 어디가 어떻게 변경되었는지 확인하기 쉽습니다.

장점 2. 향상된 code 체크

위 그림을 보면, import할 경로를 실제 파일경로와 비교하여 자동완성을 보여줍니다. Visual Studio 나 Eclipse 같은 IDE를 사용한 적이 있으면 너무 당연한 것이지만, Atom은 IDE가 아니라 Text Editor이기 때문에 이 기능이 없습니다.

마찬가지로 없는 객체를 import하려고 하면 빨간 물결무늬로 뭔가 잘못되었음을 알려줍니다.

이렇게 객체단위로 코드를 체크해 주는 것이 Atom과 비교해서 가장 큰 차이점이자 생상성 향상에 큰 차이를 주게 됩니다.

장점 3. IIS를 통한 게재(Publish)가 쉬움

** IIS가 뭔지 모르시면 건너 뛰셔도 좋습니다.

이건 중요할 수도, 크게 중요하지 않을 수도 있는데, 사실 Angular 로 생성된 app은 어떤 서버에도 올릴 수 있습니다. Visual Studio말고 다른 방법으로 Angular 사이트를 만들어도 IIS에 쉽게 올릴 수 있습니다. 다만 'Visual Studio로 코드 사이트 제작 -> IIS로 게재'가 정형화 된 회사에서는 이 부분이 좀 익숙하게 느껴질 수도 있고, Angular 사용의 거부감을 줄여 줄 수도 있습니다. 개발자는 Angular를 쓰고 싶은데 IIS를 쓰는 회사에서 새로운 것에 대한 막연한 거부감이 있는 경우 설득하기 좋습니다.

개발 환경 만들기

본격적으로 컴퓨터에 Angular 5 개발 환경을 만들어 봅시다. 현재 컴퓨터에 윈도우즈만 깔려있고 인터넷이 되는 상태를 가정하여 설명합니다.

1. Node JS 설치

Node JS를 설치합시다.  저는 8.11.1 버전을 설치했습니다.

Node JS 다운로드 링크: http://nodejs.org

2. .Net Core SDK 2.1.3 설치

.Net Core는 Visual Studio에서 사용될 프레임워크입니다. 우리가 설치할 Visual Studio 2017은 .Net Core 2.0을 가지고 있는데요, .Net Core 2.1 프레임워크만 Angular 5 템플릿을 사용할 수 있습니다. 이걸 설치하지 않으면 .Net Core 2.0 프레임워크로 Angular 4 템플릿을 사용하게 됩니다. 참고로 Angular 4 템플릿은 Angular-CLI가 없고 webpack만 사용합니다. 

.Net Core SDK 2.1.3 preview 다운로드 링크: https://www.microsoft.com/net/download/dotnet-core/sdk-2.1.300-preview1

3. Visual Studio 2017 설치

Angular 5 템플릿을 사용하기 위해서는 Visual Studio 2017 의 버전이 15.7.0 보다 높아야 합니다. 이 글을 작성하고 있는 시점에서 2017의 최신버전은 15.6.7인데요, 2017 preview 버전을 설치하겠습니다. 만약 이 글을 읽고 있는 시점에서 2017 15.7.0 이상의 버전이 나와있다면 그냥 일반 버전을 설치하셔도 됩니다. 개인 개발자인 경우 community 버전을 다운 받으시면 무료로 사용할 수 있습니다.

잘 모르겠으면 그냥 Visual Studio Community 2017 preview 버전을 설치하도록 합시다.

참고로 2017 preview 버전은 2017과 별개의 프로그램으로 작동합니다. 2017이 설치되어 있다면 preview 버전으로 업데이트 되는 것이 아니라 따로 설치됩니다. 기존에 2017 버전을 가지고 게신 분들도 걱정없이 설치할 수 있습니다.

VS 다운로드 링크 : https://www.visualstudio.com/downloads/

VS preview 다운로드 링크: https://www.visualstudio.com/vs/preview/


다운 받은 파일을 실생한 후, 설치를 진행하다 보면 아래와 같은 화면이 나오는데, ASP.NET and web development를 선택하고 계속 진행합니다.


4. Angular 5 템플릿으로 프로젝트 생성


File -> New--> Project 를 눌러 새로운 프로젝트를 생성합시다.

왼쪽 사이드 메뉴에서 Installed -> Visual C# -> Web을 선택하고, ASP.Net Core Web Application을 선택합니다. Name과 location을 설정하고, 자동으로 Git 저장소를 만들려면 Create new Git repository 옵션도 선택해 줍니다.

.Net Core, ASP.Net Core 2.1 버전을 반드시 선택하시고 Angular를 선택해줍니다.

오른쪽 Solution Explorer에서 ClientApp폴더가 있는데, 이곳에 Angular Cli project 코드가 생성됩니다.

상단 가운데 부분의 IIS Express 버튼을 누르거나 키보드의 F5 를 눌러 기본 템플릿 사이트를 실행해 봅시다.


이제부터는 원래 Atom으로 하던것 처럼 Angular 사이트를 개발하면 됩니다.

댓글

댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP