암살단이 에덴의 사과를 얻었으면 벌써 지구가 아작났을거라는 농담을 하고 있습니다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
프론트엔드 디버깅을 위해 소스 맵(Source Map)이 필요한 경우가 있습니다. 1. 소스 맵 확인하기 크롬 브라우저 기준으로 개발자 모드 > 소스 > webpack:// 소스 맵이 제대로 생성됐다면 여기에 원본 파일들을 볼 수 있습니다. (설정에 따라서 'webpack://'부분이 다를 수 있습니다.) 2. 웹팩에서 소스 맵 생성 설정 웹팩에서 소스 맵을 생성하려면 'webpack.config.js'에서 'devtool' 옵션을 소스 맵을 생성하는 옵션으로 지정합니다. (참고 : webpack.kr - Devtool ) 만약 'devtool' 옵션을 설정했는데도 소스 맵이 생성되지 않는다면 아래와 같이 플러그인을 추가해 줍니다. const webpack = require('webpack'); ... ..
스틱스의 뒷통수를 치고 곱게 갈리가 없죠. 더 털어먹을 것을 찾아봅시다~
백엔드와 프론트엔드를 같이 디버깅하려면 백엔드 따로 프론트엔드 따로 실행 해야 합니다. 이전 포스팅에서는 디버깅을 포기하고 자동화를 했었습니다. (참고 : [ASP.NET Core 6] 비주얼 스튜디오 + React 5 (1/3) - 개요 및 프로젝트 생성 ) 이번 포스팅에서는 - 'SpaProxy'를 이용하여 백엔드를 실행한 후 npm을 실행 시키고 - 비주얼 스튜디오의 디버거에 연결하고 - 자바스크립트(javascript)를 비롯한 'NPM' 프로젝트를 디버깅을 할 수 있도록 하겠습니다. 연관글 영역 0. 문제의 시작 이것저것 다 귀찮으면 프론트엔드 출력물만 가지고 'ASP.NET Core 6'에서 웹서버 돌려서 해도 되긴 합니다. 소스맵만 잘 구성과 크로스 도메인(Cross Domain, CORS ..