각각은 있어도 이렇게 조합된 걸 찾지 못한 데다가 간단한 채팅 샘플이 있었으면 해서 만들었습니다. 완성된 프로젝트 : github - dang-gun/AspDotNetSamples/SignalRWebpack/ 0. 프로젝트 생성 프로젝트 구성은 다음과 같습니다 ASP.NET Core 6.0 Webpack 5.76 TypeScript 4.9.5 'ASP.NET Core 6.0 웹 API' 프로젝트를 생성합니다. 프론트 엔드는 'ClientApp'폴더에 넣었습니다. 1. 백엔드 구현 따로 참조를 추가할 건 없습니다. 1-1. 유저 모델 및 유저 리스트 클라이언트를 관리하기 위한 목적의 유저리스트를 만들기 위한 모델입니다. 유저 모델 /// /// 유저 /// public class UserModel { //..

원인이 다양한 에러 중의 하나가 500.30 에러입니다. 500에러가 대부분 그렇지만 일단 '이벤트 뷰어'로 상세한 정보가 있는지 확인해야 합니다. 이 포스팅은 다른 원인을 발견할 때마다 추가하고 있습니다. 1. 디렉터리 없음 루트 디렉터리를 찾지 못해 발생하는 오류입니다. exception code = '0xe0434352'. System.IO.DirectoryNotFoundException ASP.NET의 경우 'wwwroot'가 기본 폴더인데 이게 없을 때 주로 발생합니다. (만약 루트 디렉터리를 변경했다면 변경한 디렉터리가 없으면 에러가 납니다.) 위 스크린샷의 경우 루트디렉터리가 'wwwroot\production-home'인데 이것을 안 만들어서 이 에러가 발생했습니다. 2. SQL 서버 연결..

'ASP.NET' 에서 라우팅이라고 하면 엔드포인트 라우팅을 말합니다. 엔드포인트 라우팅은 끝점이 컨트롤러로 끝나는 것을 의미하죠. (참고 : MS Learn - ASP.NET Core에서 라우팅 : 엔드포인트) 그런데 'ASP.NET MVC'를 안 쓴다면 프론트 엔드(View-Controller)의 라우팅을 제어할 필요성이 생깁니다. 이럴 때는 엔드 포인트를 이용할 수 없기때문입니다. 이 문제를 해결하려면 URL 재작성(URL Rewrite)이 필요합니다. 연관글 영역 0. 테스트 환경 구성 'wwwroot' 폴더를 다음과 같이 구성합니다. (루트 폴더) index.html Admin1 └ index.html Home1 └ index.html Log1 └ index.html 스크린 샷은 리액트 라우터(..

해시 라우터를 사용할 때는 발생하지 않는 문제지만 브라우저 라우터를 사용하면 발생하는 문제입니다. 연관글 영역 1. 문제의 발견 SPA(Single Page Application)에서 라우팅을 할 때 1) 새로고침을 하거나 2) SPA의 'APP'가 있는 URL에 진입하지 않고 다른 주소부터 진입하려고 하면 404 에러가 나게 됩니다. 해시(#) 라우팅을 쓸 때야 결국 지정된 파일을 읽은 후 해시 라우터를 사용하므로 문제가 되지 않지만 브라우저 라우터를 쓸 때는 진입 파일이 없으니 어쩔 수가 없죠. 2. 해결 방법 이 문제를 해결하려면 해석할 수 없는 주소가 왔을 때 폴백(Fallback)하도록 구성해야 합니다. (참고 : Rick Strahl's Weblog - Handling SPA Fallback ..

컨트롤러에서 다른 컨트롤러 호출 시 리퀘스트(Request)나 리스폰스(Response) 처리 안 되는 문제가 있습니다. (리퀘스트는 이런 문제가 적은데 리스폰스는 무조건 발생합니다.) 이런 문제 때문에 인증도 되지 않습니다. 1. 문제의 발견 이것은 당연한 것이 외부에서 웹서버를 통해 API(컨트롤러)를 호출할 때는 1) 헤더에 이것저것 정보들이 들어가고 2) 웹서버는 정보를 처리하고 하는 과정에서 'HttpContext'정보가 입력됩니다. 하지만 컨트롤러를 직접 생성하면 'HttpContext'가 null이 됩니다. 그러니 A컨트롤러에서 B컨트롤러를 호출하게 되면 'HttpContext'가 null되는 것이죠. 아래 코드를 따라 해 봅시다. 요청을 받는 쪽 컨트롤러(B 컨트롤러)에서 이렇게 하고 [H..

이전 포스팅에서 미리 구성된 프론트엔드 템플릿(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)이 제대로 생성된 건지 확인하는 방법 ) 이 포스팅에서는 웹팩을 사용하면 디버깅이 안되..

백엔드와 프론트엔드를 같이 디버깅하려면 백엔드 따로 프론트엔드 따로 실행 해야 합니다. 이전 포스팅에서는 디버깅을 포기하고 자동화를 했었습니다. (참고 : [ASP.NET Core 6] 비주얼 스튜디오 + React 5 (1/3) - 개요 및 프로젝트 생성 ) 이번 포스팅에서는 - 'SpaProxy'를 이용하여 백엔드를 실행한 후 npm을 실행 시키고 - 비주얼 스튜디오의 디버거에 연결하고 - 자바스크립트(javascript)를 비롯한 'NPM' 프로젝트를 디버깅을 할 수 있도록 하겠습니다. 연관글 영역 0. 문제의 시작 이것저것 다 귀찮으면 프론트엔드 출력물만 가지고 'ASP.NET Core 6'에서 웹서버 돌려서 해도 되긴 합니다. 소스맵만 잘 구성과 크로스 도메인(Cross Domain, CORS ..

이전 포스팅에서는 세팅만 했으니 이제 간단하게 '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..