각각은 있어도 이렇게 조합된 걸 찾지 못한 데다가 간단한 채팅 샘플이 있었으면 해서 만들었습니다. 완성된 프로젝트 : 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 { //..

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

비주얼 스튜디오에서는 자바스크립트(javascript)를 비롯한 타입스크립트(typescript) 같은 프론트엔드 소스 파일들도 중단점(breakpoint)과 같은 디버깅 기능을 이용하여 디버깅할 수 있습니다. 1. 문제의 시작 문제는 웹팩(webpack)과 같은 빌더(혹은 번들러)를 사용하면 디버깅이 안되는 경우가 있다는 겁니다. 비주얼 스튜디오의 고질적인 오류인 중단점이 적중하지 않는 문제와 뒤섞인 것지 아닌지도 알 수가 없죠. 보통은 소스 맵이 생성되지 않아서 그러는 경우가 많은데.... 확인해보면 소스 맵도 정상적으로 생성돼있는데 이런 현상이 발생합니다. (참고 : [Webpack] 소스 맵(Source Map)이 제대로 생성된 건지 확인하는 방법 ) 이 포스팅에서는 웹팩을 사용하면 디버깅이 안되..

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

백엔드를 'ASP.NET Core 6', 프론트 엔드를 리액트로 구성하려는데 대부분의 예제가 각각 구성하는 방식이거나 'VS Code'로 구현하는 방식이었습니다. 그래서 저는 한번에 구성하여 관리하는 프로젝트를 만들려고 이렇게 했습니다. 비주얼 스튜디오라고 적어놨지만 'VS Code'와 협업하도록 구성하는 것이 목적이라 'VS Code'에서도 사용할 수 있습니다. 하나의 포스팅으로 썼더니 너무 길어서 분할합니다. 연관글 영역 1. 구성 개요 완성된 프로젝트 : github - dang-gun/DotNetSamples/ReactTest/ 이 포스팅에서는 가급적 '복사 + 붙여넣기' 만해서 사용하도록 작성하였습니다. 이 프로젝트는 "React.js를 사용한 ASP.NET Core" 템플릿 사용하지 않는 프로..

다른 포스팅을 하기에 앞서서 'ASP.NET Core'에서 프론트 엔드 개발(Front-end)을 어떻게 하는지 설명하고 가고자 합니다. 연관글 영역 1. 기존 방식 기존에는 자바스크립트와 html로 날 코딩을 했습니다. 'ASP.NET Core'에서 디버깅하면 로컬 웹서버가 자동으로 동작하니 출력 폴더(기본값 'wwwroot')에서 직접 파일을 수정하고 새로고침하면서 작업을 했습니다. 2. 프론트 엔드도 빌드해야한다. 프론트엔드가 날로 복잡해지면서 빌드의 필요성이 생겼고, 거기에 부흥하여 각종 빌드환경이 생겨났습니다. 그래서 빠른 테스트를 위해서 프론트 엔드도 자신만의 로컬서버가 필요해졌습니다. 이러면서 생긴 문제는 프론트 엔드 빌드환경과 기존 개발환경을 어떻게 통합하느냐입니다. 3. 'ASP.NET ..

이전 포스팅에서 ASP.NET Core 프로젝트에 NPM을 올리는 작업을 했습니다. 이 프로젝트에서 이것을 제대로 쓰려면 결국 js파일과 css(여기서는 sass)를 빌드(혹은 미니마이징)해서 웹페이지에서 사용해야 합니다. 이 포스팅은 webpack와 sass를 이용하여 js,css파일을 출력하고 MVC를 통해 이 파일을 사용하도록 하겠습니다. [ASP.NET Core 6] ASP.NET에 NPM 세팅하기 (feat. Task Runner) [ASP.NET Core 6] ASP.NET MVC + NPM (feat. webpack, sass) 1. 프로젝트 생성 ASP.NET Core MVC로 프로젝트를 생성한 후 이전 포스팅에서처럼 npm을 설정합니다. package.json 설정은 다음과 같습니다. 1..

기본템플릿에는 'startup.cs'가 없습니다. 모든 기능이 'Program.cs'하나로 작동할 수 있도록 구성되어 있습니다. 왜 없어졌는가? 덕지덕지 연결된 구성을 간단하게 코드 몇 줄로 구성할 수 있도록 한 것입니다. (참고 : Andrew Lock | .NET Escapades - Comparing WebApplicationBuilder to the Generic Host ) 'Program.cs'에서 'Startup.cs'로 진입하는 구조는 왜 저런 구조가 되었는지를 이해하지 않으면 쓸데없이 파일만 2개로 나눈 듯한 느낌을 받게 되죠. 이렇게 기존 구조가 제거된 구문을 '최 상위문(top-level statements)'이라고 합니다. (참고 : MS Learn - 자습서: 배우는 동안 최상위 ..

이 포스팅에서는 응용프로그램(WinForm, WPF...)에서 ASP.NET를 포함한 웹 서비스를 제공하는 방법을 다룹니다. 퍼블리싱된 파일을 서비스하는 것이 아닙니다. 웹서버를 구현한다고도 볼 수 있는데..... IIS나 Kestrel처럼 퍼블리싱된 파일을 읽어서 서비스하는 방식은 아닙니다. (그렇다고 구현방식이 다른 건 아닙니다 ㅎㅎㅎㅎ) 1. 프로젝트 생성 프로젝트는 ".Net 5 WinForm 애플리케이션"으로 생성합니다. 여기서는 "웹 응용 프로그램 MVC (모델-뷰-컨트롤러)"로 생성합니다. 'Form1'의 이름을 'MainForm'으로 바꿉니다. 폼을 다음과 같이 구성합니다. 버튼을 누르면 브라우저가 열리도록 코드를 넣습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ..