[VSCode] .NET Core 에서 SPA(React/Angular) 개발시 Server와 Client 양쪽 디버깅하기

.NET Core로 리액트기반 SPA(Single Page Application)를 개발해보고자 dotnet 명령어로 react 프로젝트를 생성하였다.생성 후 VS Code로 연 뒤, 아무 .cs 파일이나 열어주고 디버깅하면 알아서 디버그 관련 파일(launch.json, tasks.json)이 자동생성되니 서버 사이드 쪽 디버깅은 쉬웠다.

 

문제는 클라이언트 부분이었다.

 

죽어있는(?) 브레이크포인트

별의별 방법으로 검색하던 중 Github에서 근접한 해결방법을 찾게 되었다.

 

https://github.com/wavejs/javascript-style-guide/wiki/VSCode%EC%97%90%EC%84%9C-React-app-%EB%94%94%EB%B2%84%EA%B9%85%ED%95%98%EA%B8%B0

wavejs/javascript-style-guide

한 개의 VSCode 내에서 디버깅할 생각을 버리고, 클라이언트용 VSCode를 띄우면 되겠구나! 지금껏 혼자 개발하는 풀스택인생이다보니 클라이언트 개발자, 서버 개발자가 따로 존재한다는 개발환경을 망각하고 있었다.(는 핑계고 사실 SPA 개발을 처음 다뤄봐서 잘 모른다. 헿)

 

해결방법은 아래와 같다.

 

1. Debugger for Chrome 설치

확장탭에서 Debugger for Chrome을 찾아 설치한다.

2. 클라이언트용 VSCode 열기

프로젝트 폴더 내 ClientApp 폴더를 별도의 VSCode로 연다.

 

3. 클라이언트 디버깅 환경 설정

클라이언트 사이드 소스(.js)를 선택한 뒤, F5키를 눌러 디버깅 환경을 선택한다. Chrome으로 선택해야 한다.

 

4. 클라이언트 launch.json 편집

자동생성된 launch.json 에서 "url" 항목과 "webRoot" 항목을 아래와 같이 편집한다.

"url": "https://localhost:5001",
"webRoot": "${workspaceFolder}/src"

* 만약 서버쪽 환경의 개발포트가 5001이 아닌, 다른 포트를 사용한다면, 해당 포트번호로 변경해줘야 한다.

* Angular의 경우는 webRoot 편집없이 "${workspaceFolder}" 그대로 둔다.

 

5. 서버 디버깅

서버쪽 VSCode에서 디버깅을 실행한다. 별도의 편집을 수행하지 않았다면 사이트가 열리게 되는데, 해당 사이트는 종료시킨다. (사이트를 닫았다고해서 서버 디버깅이 꺼지는 것은 아니다.)

6. 클라이언트 디버깅

서버 디버깅이 켜진 상태에서 클라이언트 VSCode를 디버깅을 켠다.

7. 양측 브레이크 포인트 설정 후 테스트

서버사이드 코드와 클라이언트 사이드 코드에 각각 브레이크 포인트를 설정한 뒤 정상동작하는지 확인한다.

클라이언트사이드 브레이크포인트가 잡힌 모습

서버사이드 브레이크포인트가 잡힌 모습

8. 완료

감탄(?)하면서 본격적인 개발을 진행한다.