팀플게임에서 잡혀가는 아군 안구하는 경우가 종종있는데..... 이 게임은 금방 부활하니 구하는데 부담이 덜한건 사실입니다.
이전 포스팅에서 미리 구성된 프론트엔드 템플릿(create react app)을 이용하여 비주얼 스튜디오의 디버거에 연결하는 작업을 했습니다. 이제 직접 웹팩을 구성하여 비주얼 스튜디오의 디버거에 연결하는 작업을 해보겠습니다. 연관글 영역 1. 'SpaProxy' 설치 및 설정 이 부분은 이전 포스팅의 '1. 'SpaProxy' 설치 및 설정'의 부분과 동일합니다. 참고 : [ASP.NET Core 6] 비주얼 스튜디오에서 'NPM' 프로젝트 디버깅 - 프론트 엔드(Front-end) 템플릿 사용 2. 웹팩 구성하기 모든 파일을 수작업으로 작성합니다. 인터넷에서 구할 수 있는 간단한 샘플을 만들어 넣을 예정입니다. (참고 : 웹팩 핸드북 - 웹팩 데브 서버) 2-1. 'node'용 폴더 생성 프로젝트 루..
비주얼 스튜디오에서는 자바스크립트(javascript)를 비롯한 타입스크립트(typescript) 같은 프론트엔드 소스 파일들도 중단점(breakpoint)과 같은 디버깅 기능을 이용하여 디버깅할 수 있습니다. 1. 문제의 시작 문제는 웹팩(webpack)과 같은 빌더(혹은 번들러)를 사용하면 디버깅이 안되는 경우가 있다는 겁니다. 비주얼 스튜디오의 고질적인 오류인 중단점이 적중하지 않는 문제와 뒤섞인 것지 아닌지도 알 수가 없죠. 보통은 소스 맵이 생성되지 않아서 그러는 경우가 많은데.... 확인해보면 소스 맵도 정상적으로 생성돼있는데 이런 현상이 발생합니다. (참고 : [Webpack] 소스 맵(Source Map)이 제대로 생성된 건지 확인하는 방법 ) 이 포스팅에서는 웹팩을 사용하면 디버깅이 안되..