백엔드와 프론트엔드를 같이 디버깅하려면 백엔드 따로 프론트엔드 따로 실행 해야 합니다. 이전 포스팅에서는 디버깅을 포기하고 자동화를 했었습니다. (참고 : [ASP.NET Core 6] 비주얼 스튜디오 + React 5 (1/3) - 개요 및 프로젝트 생성 ) 이번 포스팅에서는 - 'SpaProxy'를 이용하여 백엔드를 실행한 후 npm을 실행 시키고 - 비주얼 스튜디오의 디버거에 연결하고 - 자바스크립트(javascript)를 비롯한 'NPM' 프로젝트를 디버깅을 할 수 있도록 하겠습니다. 연관글 영역 0. 문제의 시작 이것저것 다 귀찮으면 프론트엔드 출력물만 가지고 'ASP.NET Core 6'에서 웹서버 돌려서 해도 되긴 합니다. 소스맵만 잘 구성과 크로스 도메인(Cross Domain, CORS ..
닷넷에서 응용프로그램을 종료할 때 사용하는 명령은 크게 3가지입니다. Application.Exit() Environment.Exit(0) System.Diagnostics.Process.GetCurrentProcess().Kill(); 이 포스팅에서는 이 3가지의 차이점을 알아봅니다. 샘플을 실행해보고 보면서 확인하면 더 이해하기 쉽습니다. 샘플 : github - dang-gun/DotNetSamples/ExitTest/ 연관글 영역 1. Application.Exit() 내부에 종료를 알리고 모든 메소드가 끝나면 종료됩니다. 참고 : MS Docs - Application.Exit 메서드 설명이 복잡하지만..... 간단하게 말하면 애플리케이션에 정상종료를 요청한다는 의미입니다. 그래서 모든 종료 관..
'throw'로 예외처를 할 때 'throw'와 'throw ex'가 있습니다. 특수한 경우가 아니라면 'throw ex'를 쓸 일이 없으므로 크게 중요한 내용은 아니지만, 알아두면 좋지 않겠습니까? ㅎㅎㅎ 1. 'throw' 와 'throw ex'의 차이 이 두 개의 차이는 'try~catch'가 중첩 되었을 때 즉, 에러처리를 중첩했을때 표시되는 위치가 차이 납니다. 'throw'는 여러 개가 중첩되더라고 실제 에러 난 위치부터 표시되고 'throw ex'는 'throw ex'를 호출한 위치부터 표시가 됩니다. 2. 테스트해 보기 다양한 테스트 코드가 인터넷에 많습니다. 제가 사용한 코드는 아래와 같습니다. 참고 : stackoberflow - Is there a difference between "..
'npm'을 사용하면서 경고에 신경 쓰는 게 웃기기 합니다만.... 그래도 중간중간 확인하면서 경고도 제거하는 것이 미래의 문제를 미연에 방지할 수 있습니다. 1. 문제의 발견 'postcss-loader'와 'mini-css-extract-plugin'를 사용하는 프로젝트에서 웹팩 빌드하면 다음과 같은 경고가 나오는 경우가 있습니다. WARNING in ./src/sass/index.scss 22:17-24 export 'default' (imported as 'content') was not found in '!!../../node_modules/mini-css-extract-plugin/dist/loader.js!../../node_modules/css-loader/dist/cjs.js!../../..
이전 포스팅에서는 세팅만 했으니 이제 간단하게 'React'와 'SCSS', 'ASP.NET Core 6'의 코드를 만들어 넣어 테스트를 하고, 배포용 빌드로 디버깅은 어떻게 하는지 알아봅시다. "React.js를 사용한 ASP.NET Core" 템플릿 처럼 리액트 디버거도 연결할 계획이였는데..... .NET 6으로 오면서 프론트엔드와 연결방법이 바뀠습니다. 그래서 자료가 너무 없어서 일단 이것까지는 보류합니다. 나중에라도 찾으면 업데이트 하겠습니다. 하나의 포스팅으로 썼더니 너무 길어서 분할합니다. 연관글 영역 1. 백엔드 만들기(ASP.NET Core 6) 백엔드 기능을 할 Controllers > TestController.cs 를 생성하고 아래와 같이 작성합니다. [Route("api/[cont..
[ASP.NET Core 6] 비주얼 스튜디오 + React 5 + Webpack + Babel + Sass + minimizer (개발, 배포 폴더) 'ASP.NET Core 6'기준으로 작업하긴 했지만 'React 5' 부분만 때서 다른 프로젝트에 그대로 사용할 수 있습니다. 하나의 포스팅으로 썼더니 너무 길어서 분할합니다. 연관글 영역 1. 'package.json' 작성 프로젝트에 'package.json'파일을 생성하고 내용을 아래와 같이 넣습니다. { "name": "react-test", "version": "0.1.0", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-serve..
2
백엔드를 'ASP.NET Core 6', 프론트 엔드를 리액트로 구성하려는데 대부분의 예제가 각각 구성하는 방식이거나 'VS Code'로 구현하는 방식이었습니다. 그래서 저는 한번에 구성하여 관리하는 프로젝트를 만들려고 이렇게 했습니다. 비주얼 스튜디오라고 적어놨지만 'VS Code'와 협업하도록 구성하는 것이 목적이라 'VS Code'에서도 사용할 수 있습니다. 하나의 포스팅으로 썼더니 너무 길어서 분할합니다. 연관글 영역 1. 구성 개요 완성된 프로젝트 : github - dang-gun/AspDotNetSamples/ReactTest/ 이 포스팅에서는 가급적 '복사 + 붙여넣기' 만해서 사용하도록 작성하였습니다. 이 프로젝트는 "React.js를 사용한 ASP.NET Core" 템플릿 사용하지 않는..
리액트에서 html을 리액트 개체로 바꾸려면 'html-react-parser'라는 패키지를 사용하면 됩니다. 이렇게 간단하면 포스팅을 할 리가 없겠죠? 이 패키지는 단순히 html을 리액트 개체를 바꾸는 기능만 있어서 html(혹은 문자열)에 포함된 변수는 변환하지 않습니다. 이벤트의 경우 XSS 공격위험때문에 변환을 해주지 않는다고 합니다. 1. 리터럴(Template literals) 처리 리터럴도 섞어 써도 됩니다. (참고 : Mdn Docs - Template literals) 그러려면 순서가 리터럴 처리 -> 리액트 변수 처리 -> 이벤트 처리 로 해야 합니다. 자바스크립트 안에서 단순 문자열을 선언하는 경우라면 그레이브(`)를 사용해도 됩니다. 하지만 'html-react-parser'쓸 정..
다른 포스팅에서도 언급했습니다만..... 'NPM Task Runner'는 하위 폴더의 'package.json'을 읽을 수 없습니다. 1. 이슈 확인하기 이것에 대한 이슈가 있는데. github - madskristensen/NpmTaskRunner Issues : Allow to run this extension when package.json is in subfolder instead of the root folder of the project. #37 몇 가지 방법이 제시되어있습니다. 저는'NPM Task Runner'를 수정해서 사용하라는 'alfr3c0d3'님의 방법을 사용합니다. ( 참고 : https://github.com/madskristensen/NpmTaskRunner/issues/3..
다른 포스팅을 하기에 앞서서 'ASP.NET Core'에서 프론트 엔드 개발(Front-end)을 어떻게 하는지 설명하고 가고자 합니다. 연관글 영역 1. 기존 방식 기존에는 자바스크립트와 html로 날 코딩을 했습니다. 'ASP.NET Core'에서 디버깅하면 로컬 웹서버가 자동으로 동작하니 출력 폴더(기본값 'wwwroot')에서 직접 파일을 수정하고 새로고침하면서 작업을 했습니다. 2. 프론트 엔드도 빌드해야한다. 프론트엔드가 날로 복잡해지면서 빌드의 필요성이 생겼고, 거기에 부흥하여 각종 빌드환경이 생겨났습니다. 그래서 빠른 테스트를 위해서 프론트 엔드도 자신만의 로컬서버가 필요해졌습니다. 이러면서 생긴 문제는 프론트 엔드 빌드환경과 기존 개발환경을 어떻게 통합하느냐입니다. 3. 'ASP.NET ..
