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

React나 React Native 개발은 보통 Mac OS에서 하는 경우가 많다.

node.js나 npm이 Windows 환경과 그닥 썩 잘 어울린다고 할 수는 없기 때문에 그런 경향은 어느 정도 일리가 있긴 하다.

 

그래도, Windows를 쓰고 있다면 굳이 React 개발을 위해(React Native 말고) Mac 장비를 다시 구할 필요는 없다.

게다가 이미 Visual Studio 2019를 쓰고 있다면 React 개발을 위해 Visual Studio Code를 추가로 설치할 필요도 없다.

Visual Studio 2019 자체적으로 React 개발 및 디버깅을 지원한다. 그것도 잘!

(React말고, React Native로 iOS 앱을 개발하려면 꼭 Mac 장비가 필요하긴 하지만... 그건 딴 얘기고.)

 

 

그런데... 아래 Microsoft 공식 사이트 글을 보면...

 

>> 참조: docs.microsoft.com/en-us/visualstudio/javascript/tutorial-nodejs-with-react-and-jsx?view=vs-2019

Create a Node.js and React app - Visual Studio

뭔가 좀 이상하고 갸우뚱? 하게 된다.

 

React앱을 만들려고 하는데 굳이 Node.js 서버까지 따로 기동하고 webpack에 typescript까지 따로 설치/설정하는 등 뭔가 사전 작업이 많고 복잡하다. ㄷㄷ

 

다 필요 없다. 간단한 방법을 소개한다.

(기존 프로젝트에 일부 페이지만 React로 개발하려고 할 때는 여기를 참조. 이 글은 create-react-app 방식으로 단일 페이지 앱(SPA)을 만들려고 하는 상황에 대한 방법이다. 서버 기능이 포함된 React앱을 만드는 경우는 다음에 다시 다루어 보도록 하겠다.)

 

 

 

1.

 

우선 Node.js부터 설치한다.

 

Node.js 최신 버전은 15.x대이지만 14.x 이하와 호환이 되지 않는 문제가 좀 있다. 새로 만드는 경우야 상관없겠지만 기존에 쓰던 프로젝트를 재사용하는 경우라면 잘 돌아가는 적합한 버전으로 설치해 줄 필요가 있다.

 

>> 참조: nodejs.org/ko/download/

다운로드 | Node.js

 

 

2.

 

위 Microsoft 공식 사이트의 Prerequisites 부분을 진행한다. 즉, Visual Studio 2019 메뉴의 [도구]-[도구 및 기능 가져오기...]를 선택한 뒤 "Node.js development"를 체크해 주면 끝.

(Visual Studio 업데이트가 있으면 함께 설치해 준다. 오래 걸리고... 용량이 크고... 재부팅도 해야 하겠지만.)

 

 

 

3.

 

그 다음 아래에 있는 npm이니 webpack이니 typescript니 하는 길고 복잡한 절차는 따라할 필요 없다. 대신, react 공식 사이트에 나와 있는 대로 react 프로젝트를 명령줄 도구로 한방에 생성하는 것이 훨씬 간편하니까!

 

>> 참조: ko.reactjs.org/tutorial/tutorial.html

자습서: React 시작하기 – React

 

즉, 아래 명령어를 실행하면 끝이다.

D:\react\test> npx create-react-app my-app

여기까지 하면 이후 npm start 명령으로 react 앱이 그냥 아주 자연스럽게 실행되는 것을 볼 수 있다.

 

문제는, 이렇게 생성된 프로젝트는 Visual Studio 2019와 따로 놀기 때문에 Visual Studio 2019를 통해 소스코드를 관리하고 디버깅하기 위한 약간의 특별한 방법이 필요하다.

 

 

 

4.

 

Visual Studio 2019를 시작하고 새 프로젝트 만들기를 선택한 다음, "Javascript" 언어를 선택하면 Node.js 프로젝트 템플릿들이 주루룩 나온다. 여기서 새 프로젝트를 만들면 대략 낭패. 꼭! "기존 Node.js 코드에서"를 선택해서 방금 위 3번 단계에서 만든 react 프로젝트 폴더를 지정하면 된다. 중간 절차가 몇 단계 있지만, 평범한 내용들이므로 생략.

 

그렇게 하면 기존 다른 C# 프로젝트들처럼 일단 잘 열린다.

 

그런데, 실행하거나 디버깅을 해 보려고 하면 할 수가 없다... 에러도 많이 나고.

 

다 무시한다. Visual Studio에서는 Node.js 프로젝트의 경우 typescript를 통한 디버깅만 지원하기 때문에 나타나는 오류로, 아무 의미없다. 무시하고 진행해도 된다. (오류가 발생하는 관련 node module들을 추가 설치해 주면 된다고도 하는데... 굳이... 게다가 잘 안 된다.)

 

 

 

5.

 

여기서 다시 위 처음의 Microsoft 공식 사이트 문서에 있는 중간 아랫 부분, "Set and hit a breakpoint in the client-side React code" 부분부터는 참조할 필요가 있다.

 

간략히 설명하자면,

1. 먼저 npm start로 react 앱을 실행시킨 후 웹 브라우저가 뜨면 종료하고 콘솔 창만 실행시켜 둔다.
2. Visual Studio 메뉴의 "브라우저 선택..."에서 새 브라우저를 추가하는데, 브라우저 실행 시 원격 디버깅 옵션(--remote-debugging-port=9222) 설정을 하고,
3. 프로젝트 속성에서 포트 번호를 create-react-app 기본 포트인 3000번으로 맞추고,
4. Ctrl+F5 키를 눌러 [디버깅하지 않고 시작] 방식으로 react 앱을 위 선택된 브라우저로 실행시킨 다음,
5. [디버그]-[프로세스에 연결...] 방식으로 디버깅할 수 있다.

F5 키만 누르면 바로 디버깅이 되는 쉬운 디버깅 방식은 안타깝게도 지원되지 않는다.

그래도 어딘가? 별도의 허접한 개발도구들을 설치하지 않고 Visual Studio 2019의 강력한 편집기/디버깅 도구를 쓸 수 있다는 것 자체가 이미 넘사벽이다! 사소한 귀찮음은 충분히 감수할 가치가 있다.

 

게다가 이 방식에 익숙해 지면 여러모로 편리하기도 하다. 여기저기 웹 사이트들의 Javascript 디버깅할 때도 똑같이 할 수 있기 때문이다.

 

이렇게 만든 react 앱을 빌드/게시해서 배포하려고 할 때는, 역시 당연히 Visual Studio 2019로는 안된다.

npm build 또는 yarn build로 빌드해서 배포해야 한다.

 

 

[다음 글에서는 Visual Studio 2019에서 ASP.NET Core 3.1 웹 프로젝트(서버)와 React 앱(클라이언트)을 함께 개발/디버깅 할 수 있는 방법을 정리해서 올려 보도록 하겠다.]

 

 

끝.