Visual Studio 2019로 React 개발/디버깅 #2

 

>> 참조: Visual Studio 2019로 React 개발/디버깅 #1

 

앞의 글에서는 Visual Studio 2019를 이용하여 조금 더 간편하게(?) React 앱 개발 및 디버깅하는 방법을 알아봤다.

(사실 React 앱만 개발하려고 한다면 Visual Studio Code를 설치해서 하는 것이 더 간편한 방법일 수도 있다. 추가 설치 없이 기존에 사용 중이던 Visual Studio 2019만으로 React 앱을 개발/디버깅하기 위한 방법을 찾는 것이 목적이므로... 보는 관점에 따라 다르겠다.)

 

이번에는 Visual Studio로 React 앱만이 아닌 서버 측 프로젝트, 즉 기존에 사용하고 있던 ASP.NET Core 웹 프로젝트에 React 앱을 추가하는 방법을 알아보도록 하겠다. ASP.NET Core에서 프론트 엔드 UI를 Razor에서 React로 바꾸는 상황이라고 생각하면 되겠다.

 

 

 

우선, React 공식 사이트에서는 아래 방법을 추천하고 있다.

 

>> 참고: ko.reactjs.org/docs/add-react-to-a-website.html#add-react-in-one-minute

웹사이트에 React 추가 – React

그런데... 엄청 불편하다! 뭔가 이건 아닌데 싶은 생각이 막! 막!! 막!!! 들 정도.

이렇게는 따라하지 않는 것이 좋겠다...

 

 

다음으로는 내가 좋아하는 코드 프로젝트 사이트에 올라와 있는 내용인데...

 

>> 참고: www.codeproject.com/Articles/5248030/Using-Create-React-App-and-NET-Core-3-0-to-Build-a

Using Create-React-App and .NET Core 3.0 to Build a React Client (Global Weather) - Part 1

역시 절차가 복잡하고 어렵다. typescript를 쓰는 걸 기반으로 하고 있어서 좀 안 맞기도 하고.

(내 주장이긴 하지만, typescript는 빨리 세상에서 도태되어 없어져야 하는 시대착오적인 언어다. babel 및 ES6, ES7로 넘어가기 이전의 과도기 언어로, 가급적이면 안 쓰는 것이 맞고, 쳐다도 안 보는 것이 좋다...고 늘 주장하지만 그리 쉽게 없어지진 않겠지...)

 

그래도 이 코드 프로젝트 게시물에서 하나 배울 만한 내용은, Microsoft.AspNetCore.SpaServices NuGet 패키지를 추가하면 .NET Core와 React를 자연스럽게 통합할 수 있도록 만들 수 있다는 것 정도... (역시 이 세상에서 필요한 건 대부분 이미 만들어져 있다. 있어도 관심이 없거나 존재를 모르고 있을 뿐.)

 

 

 

정말로 쓸 만한, 실제 적용할 만한 내용으로 요약/정리해 보자면,

전체적인 절차는 아래와 같다.

 

1. 새 프로젝트 만들기
2. ASP.NET Core 웹 애플리케이션 프로젝트 선택
3. 프로젝트 템플릿 중에서 React.js 선택

여기까지가 ASP.NET Core + React 프로젝트 생성하는 가장 간단한 절차이다.

이상의 내용까지는 아래 사이트에 상세하게 나와 있다. 우선, 일단, 그대로 따라 한다.

 

>> 참조: www.c-sharpcorner.com/article/learn-about-react-app-with-visual-studio-2019/

Build React App Using Visual Studio 2019

 

여기에서 핵심은, 생성된 ClientApp 폴더 아래의 package.json 파일을 복사해 두는 것이 되겠다.

 

4. 기존 프로젝트 루트 폴더에서 명령 프롬프트 열고 create-react-app으로 React 앱 생성
   

   D:\project\coreweb1> npx create-react-app myapp
   D:\project\coreweb1> cd myapp
   D:\project\coreweb1\myapp>

5. 위에서 준비해 둔 package.json 파일을 덮어쓰기로 붙여넣고 앱 이름, 버전 정보 수정
6. npm install 실행

이상이 전부다.

 

엉? 너무 간단한데?

 

그렇다. 뭐 더 덧붙일 내용도 없다.

 

 

 

참고로, 굳이 package.json 파일을 복사해 넣는 이유는 bootstrap, jquery, cross-env 등 Visual Studio 환경과 통합된 기능 또는 더 편리한 개발을 위해 최적화된 기능이 들어있어 그걸 활용하기 위함이다. 굳이 필요없는 패키지들은 빼도 된다.

 

여기서 bootstrap은 css를 통한 UI 기능 개발에 거의 필수라고 할 만큼 광범위하게(특히 디자인/퍼블리싱 회사에서) 사용되고 있는 프레임워크로, 프론트엔드 개발자라면 한번쯤은 꼭 찾아서 공부해 둘 만 하다.

 

>> 참조: getbootstrap.com/docs/4.5/getting-started/introduction/

Introduction

 

 

아무튼,

이렇게 프로젝트를 통합 생성해 놓으면, F5 키를 눌러 디버깅도 .NET Core 코드와 React.js 코드를 동시에 함께 할 수 있고, 게시/배포도 GUI를 통해 간단하게 할 수 있다. 완벽한 개발환경!

 

 

끝.