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

웹팩 개발서버에 로컬 인증서(SSL) 설정하는 방법을 몰라서 한참 고생을.... 정확하게는 로컬 인증서를 자동으로 생성하는 방법을 몰라서 고생한거긴 합니다. 문서를 좀더 잘읽었으면 삽질이 좀 줄긴 했을거 같은데 말이죠 ㅎㅎㅎㅎ 연관글 영역 1. 로컬 인증서 생성 'ASP.NET Core'의 'React'템플릿에 보면 다음과 같이 2개의 파일이 있습니다. (참고 : github - dang-gun/AspDotNetSamples/WebpackSslTest/ClientApp/OriginalFils/ ) aspnetcore-https.js : 로컬 인증서를 생성해 주는 파일 aspnetcore-react.js : 생성된 경로를 '.env.development.local'에 넣어주는 파일 이 파일들을 실행하면 로..

1. 문제의 시작 웹팩 개발 서버(webpack dev server)를 'ngrok'로 외부에 노출 시켜서 접속했더니 'Invalid Host header' 에러가 납니다. 2. 'Invalid Host header'의 원인 웹팩 개발 서버에서는 호스트 검사를 해서 외부 접속을 차단하기 때문에 발생한다고 합니다. 3. 해결 방법 외부 접속도 허용하면 됩니다. 웹팩 개발 서버 설정에 다음을 추가합니다. allowedHosts: "all" 예전 버전(3 이전 버전)의 경우 disableHostCheck: true 를 추가해야 합니다. 이제 잘 접속됩니다. 마무리 웹팩 개발 서버로 운영하는 경우는 거의 없을 거 같은데 설정 하다보면 '그냥 운영해도 되지 않을까?' 라는 생각이 들게 합니다 ㅎㅎㅎ

프로젝트가 크지 않으면 웹팩 컨피그(webpack.config.js)를 분리할 이유가 별로 없습니다. 저도 계속 'if'문으로 분리해서 쓰고 있었는데요..... 프로젝트에 이것저것 설정할 게 많아지니 개발(development) 모드와 프로덕션(production) 모드 간의 차이가 많아져서 변수로 관리하는 것이 힘들어졌습니다. 1. 컨피그(webpack.config.js) 분리하기 이럴 때 필요한 것이 컨피그를 분리하는 것입니다. 구조는 다음과 같습니다. 1) 공통으로 사용할 공통 컨피그(webpack.common.js) 파일을 만들고 공통으로 사용할 설정을 넣어줍니다. 2) 개발 모드에 사용할 컨피그(webpack.dev.js)를 만들고 개발 모드에서만 사용할 설정을 넣어줍니다. 3) 배포 모드에 사..

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

프론트엔드 디버깅을 위해 소스 맵(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 ..

'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!../../..