VS 2017은 IDE로써 사용자의 선택을 쉽게 해주지만 그 이전 버전의 경험이 썩 좋지 않은 터라 VS Code 를 사용해 Angular + ASP.NET Core 솔루션을 작성하려고 한다. 이 글에서는 가볍고 응답이 빠른 VS Code와 CLI (Command Line Interface) 도구로 개발환경을 구성하는 방법을 알아 볼 것이다. 내용이 맥 환경에 맞추어져 있으나 리눅스에서도 유사한 방법으로 설정이 가능하다.
개발 환경 구성하기
1. 닷넷 코어 SDK
ASP.NET Core 개발을 위해 맥에서 수행해야 할 작업이 공식문서에 잘 정리되어 있다.
SDK를 설치하기 전에 openssl을 먼저 설치하는 것이 눈에 띈다. brew라는 명령어를 사용하려면 Homebrew 라는 맥의 패키지 관리자를 먼저 설치하고 최신으로 업데이트한다. 그리고, openssl 패키지를 설치하는데 이 과정을 제대로 거치지 않으면 NuGet 패키지를 다운로드할 때 문제가 된다.
이후, 공식문서에 따라 닷넷 코어 SDK를 설치하고 닷넷 CLI(Command Line Interface)를 사용해 Hello World 앱을 만들고 실행해서 제대로 동작하는지 확인한다.
2. VS Code + Extensions
VS Code를 공식 사이트에서 다운로드해 설치하고, Angular와 C# 개발에 유용한 확장툴을 아래와 같이 설치한다. 각각의 익스텐션을 선택하여 그 설명을 읽어보면 그 용도를 쉽게 알 수 있다.
3. Yeoman 스캐폴딩
좋은 스캐폴딩 도구는 생산성에 큰 도움이 된다. Yeoman은 현대적인 웹 개발에 사용되는 다양한 종류의 템플릿을 제공한다. VS Code는 스캐폴딩 도구가 없기 때문에 터미널에서 아래 명령문을 통해 Yeoman의 SPA용 닷넷 코어 템플릿을 설치한다. npm은 Node 패키지 관리자이므로 Node가 먼저 설치되어 있어야 한다.
sudo npm install -g yo generator-aspnetcore-spa
4. SQL 서버
Windows에서는 SQL Experss를 사용할 수 있지만 맥과 리눅스에서는 Docker 이미지를 사용해야 한다. 먼저, docker.com에서 설치파일을 받아 Docker를 설치한다. Docker는 애플리케이션을 배포하는 컨테이너로써 그 안에 모든 종속성과 구성내용을 포함하기 때문에 배포되는 서버에 영향을 받지않고 애플리케이션을 일관되게 동작시킬 수 있다.
리눅스용 SQL 서버 이미지를 사용할텐데, SQL 서버의 운영환경이 최소 4GB 메모리를 필요로 하기 때문에 아래와 같이 Docker의 설정을 바꿔준다.
이제, 터미널에서 다음의 명령문을 통해 리눅스용 SQL 서버 이미지를 다운로드한다.
sudo docker pull microsoft/mssql-server-linux
이미지를 실행하기 위해 다음 명령문을 실행한다.
sudo docker run -e ‘ACCEPT_EULA=Y’ -e ‘SA_PASSWORD=SuperSecretPassword!234’ -p 1433:1433 -d microsoft/mssql-server-linux
-e 옵션으로 제공하는 두 개의 환경변수가 있다. EULA(End User License Agreement)에 동의하고 sa 계정의 비밀번호를 설정해야 한다. Docker 컨테이너와 호스팅 머신의 포트를 1433으로 동일하게 매핑해 주고 -d 옵션으로 백그라운드에서 동작하게 한다.
만약에 리눅스에서 작업한다면 -v 옵션을 사용할 수 있는데 컨테이너와 호스팅 머신의 볼륨(저장 장소)을 매핑해 주어 데이터베이스에 저장하는 내용을 컨테이너 재시작후에도 유지할 수 있다. 아쉽게도 맥에서는 지원되지 않아서 컨테이너를 재시작하면 데이터베이스가 사라진다(시스템을 재시작하면 Docker 역시 초기화된다). 따라서, 데이터베이스를 매번 생성하고, 개발 테스트를 위해 초기 데이터를 입력하도록 Entity Framework의 마이그레이션 기능을 활용하는 것을 추천한다.
5. SQL 서버 클라이언트
Windows 라면 데이터베이스의 내용을 확인하기 위해 SQL Server Management Studio를 사용할테지만 맥과 리눅스에서는 아쉽게도 사용할 수 없다. 그 대안으로 리눅스에서는 Connect to SQL Server on Linux and run Transact-SQL queries 문서의 내용대로 커맨드 라인 도구를 사용할 수 있지만 맥 환경에는 마땅한 무료 도구가 없는 것 같다.
macsqlclient.com에서 SSMS와 유사한 도구를 구입할 수 있다. 일주일간 무료체험할 수 있으니 사용 후 구입을 결정해도 된다.
새 프로젝트 생성과 실행
터미널에서 프로젝트를 생성할 디렉토리로 이동해서 yo aspnetcore-spa 명령문을 사용하면 새로운 프로젝트를 만들 수 있다. 아래 스냅샷처럼 tomato 라는 폴더를 생성하고 aspnetcore-spa 템플릿(boilerplate)을 사용하여 새로운 프로젝트를 만든다.
간단히 dotnet run 명령어로 터미널에서 애플리케이션을 실행한 후, localhost:5000으로 접속해 보면 다음 그림과 같은 Single Page Application을 만날 수 있다.
터미널에서 ^ C 키로 웹 서비스를 종료하고 code . 명령어로 프로젝트 코드를 VS Code 에서 열어보자. 만약 code 라는 명령어가 먹히지 않는다면 다음과 같이 문제를 해결한다.
VS Code 에서 shift + cmd + P 키로 VS Code 의 전체 명령어를 띄우고 “command”로 검색하여 첫번째 결과를 선택함으로써 code 명령어를 시스템 path에 추가한다. 새 터미널 창에서 프로젝트 폴더로 이동한 뒤 code . 명령어를 다시 실행하면 의도한 대로 프로젝트 코드가 VS Code에 로딩될 것이다.
VS Code는 자체 터미널을 내장하고 있다. “^ ` (back tick)” 단축키로 내장 터미널을 토글할 수 있는데 여기서 dotnet run 명령으로 애플리케이션을 실행시킬 수도 있다.
HMR (Hot Module Replacement)
아래 그림은 VS Code의 내장 터미널에서 dotnet run을 실행한 후 터미널에서 출력하고 있는 내용을 보여주고 있다.
localhost 의 5000번 포트를 통해 접속해야 한다는 정보와 함께 주목할 정보는 Hosting environment이다. 이 환경변수에 따라 개발자에게 유용한 기능이 활성화/비활성화될 수 있기 때문이다.
다음의 코드는 애플리케이션 시작시 수행되는 Startup 클래스의 Configure 메서드에 있는 코드의 일부다. 개발 환경일 경우에만 WebPack 미들웨어를 통해 HMR 기능이 동작한다는 것을 알 수 있다.
if (env.IsDevelopment())
{ app.UseDeveloperExceptionPage(); app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true });
}
else
{ app.UseExceptionHandler("/Home/Error");
}
별도 설정이 없으면 Production 모드로 동작하기 때문에 애플리케이션 시작전에 환경변수를 반드시 설정해야 한다. 맥에서 환경변수를 설정하기 위해서는 터미널에서 다음 명령을 실행한다.
export ASPNETCORE_ENVIRONMENT=Development
여기서 문제는 현재 터미널의 세션에서만 설정이 적용된다는 것이다. 차후에도 이 설정을 계속 유지하고자 한다면 사용자 홈 디렉토리(/Users/jake)에 .bash_profile 이라는 파일을 만들고 위 문장을 추가한다. Windows라면 시스템 고급 설정에서 환경 변수를 추가할 수 있다.
HMR은 프론트엔드의 코드가 변경되면 이를 탐지하여 자동으로 번들링하고 실시간으로 적용하는 기술이다. 소스 변경과 동시에 브라우저를 새로고침하지 않아도 수정 내용이 자동으로 반영되므로 개발 단계에 꼭 필요한 기능이다. 아래 그림은 크롬의 개발자 도구 화면이다. 첫 줄에서 HMR 이 준비되어 있는 것을 확인할 수 있고, 중간쯤에는 Updated modules: 이하의 로그에서 보는 것처럼 변경된 화면과 그 이후 일어나는 과정까지 확인이 가능하다.
그러나, 아쉽게도 서버단의 변경은 WebPack이 탐지할 수 있는 영역이 아니다. ^ C로 서비스를 종료하고 다시 dotnet run 명령을 실행해야만 서버 코드의 변경을 확인할 수 있다. 서버단의 C# 코드를 변경했을 때도 브라우저가 자동으로 갱신되면 얼마나 좋을까?
구글에서 dotnet watch를 검색해 보자. dotnet watch 는 파일 감시자로써 소스 코드의 변화를 주시하고 있다가 변경사항이 발견되면 애플리케이션을 재시작하는 개잘자 도구이다. 여기에 사용방법이 자세히 설명되어 있다.
문서에 설명된 대로 .csproj 파일에 다음의 문장을 추가한다.
<ItemGroup> <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="1.0.0" /> </ItemGroup>
그리고, 터미널에서 dotnet restore 명령문을 실행하면 설치된다. dotnet restore는 npm install 처럼 패키지를 다운로드하여 설치하는데 서버단 패키지를 설치할 때 사용한다.
이제 애플리케이션을 다음과 같이 watch 모드로 실행하면 서버 코드 변경시 재빌드하고 애플리케이션을 다시 시작한다.
dotnet watch run
코드 변경이 탐지되는지 테스트하기 위해 HomeController 의 index 액션에서 throw new Exception() 문장으로 에러를 만들었다. 그 결과, 애플리케이션이 다시 시작되는 모습을 아래 그림에서 확인할 수 있다. 애플리케이션은 재시작되었지만 브라우저는 자동으로 새로고침되지 않는것이 한가지 아쉬운 점이다.
디버깅
VS Code 에서 디버깅은 디버그 탭을 사용한다. 브레이크 포인트는 VS와 마찬가지로 F9 또는 마우스를 사용하여 지정할 수 있다. Step into, step over 등 동일한 디버깅 기능을 툴바에서 제공하고, 디버그 탭은 Watch, Call Stack 등 필요한 패널을 갖추고 있다.
Git
VS Code는 Git과 잘 통합되어 있다. 다음과 같이 Initialize Repository 버튼으로 저장소를 초기화 하고 메시지와 함께 쉽게 커밋을 만들수 있다. 또한, 내장 터미널에서 Git의 모든 명령문을 사용할 수 있어 Git 사용자에게는 화면 전환없이 편하게 소스를 관리할 수 있다.
Git 탭에서는 변경되거나 새로 추가된 파일을 볼 수 있는데 변경된 파일을 선택하면 어떤 부분이 변경되었는지 두 개의 창에서 비교해 보여주기 때문에 어떤 작업중이었는지 쉽게 확인할 수 있다.
마치며
개발 환경을 구성하기 위해 많은 작업을 거쳤지만 대부분의 과정은 한번만 필요한 작업이다. 이후 프로젝트에서는 환경이 이미 준비되어 있기 때문에 이와 같이 복잡한 과정을 거치지 않을 것이다.
“VS Code로 풀스택 개발이 가능할까?”
가능할 뿐만 아니라 추천하고 싶다. 프론트엔드와 백엔드에서의 코드 변경이 Hot Module Replace와 dotnet watch를 통해 개발자의 추가 노력없이 애플리케이션에 적용되므로 생산성을 높여준다. 터미널에서의 명령문 실행은 CLI(Command Line Interface) 덕에 가능한데, dotnet cli, angular cli 등에서 보듯이 개발 추세가 CLI 중심으로 가고 있다고 해도 과언이 아니다.
실제로 많은 시간을 할애하게될 코딩은 VS Code를 사용하면서 직접 경험해 보기를 권한다. VS Code가 자칫 경량화된 IDE라고 보여질 수도 있지만 최적화된 텍스트 에디터라고 보는 것이 맞을 것 같다. 파일간 이동이나, 젠 코딩등 개발 업무를 쉽고 빠르게 해주는 좋은 기능이 많이 있다. 무엇보다도 개발자 커뮤니티가 제공하는 무한대의 익스텐션을 기호에 맞게 사용할 수 있는 것은 큰 장점이다.
마지막으로 이 글은 VS 2017을 사용해 보지 않은 상태에서 작성한 글임을 참작해주시기 바란다. VS 2017에서는 새롭게 프론트엔드 디버깅을 지원하는등 풀스택 개발에 편리한 기능이 추가되었다고 들었다. 상황에 따른 적절한 개발환경을 구성하는 것이 중요할 것이다.
출처 : http://blog.jakeymvc.com/vscode/
