이전 포스팅에서는 세팅만 했으니 이제 간단하게 '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/AspDotNetSamples/ReactTest/ 이 포스팅에서는 가급적 '복사 + 붙여넣기' 만해서 사용하도록 작성하였습니다. 이 프로젝트는 "React.js를 사용한 ASP.NET Core" 템플릿 사용하지 않는..

다른 포스팅에서도 언급했습니다만..... '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 ..

작업을 하다 보면 여러 가지 테스트 환경에 대응하려고 웹 루트 폴더를 여러 개 두거나 웹 루트 안에 여러 폴더로 분리하거나 하는 필요성이 있습니다. 1. 웹 루트(Web Root) 변경하기 'ASP.NET Core'에서 웹 루트 기본값은 'wwwroot'입니다. 이것을 바꾸려면 'Program.cs'에서 빌더를 다음과 같이 생성합니다. var builder = WebApplication.CreateBuilder( new WebApplicationOptions { WebRootPath = "wwwroot2" }); 여기서 조심해야 할 것이 'wwwroot' 폴더가 있으면 이 설정은 무시됩니다. 참고 : github - dotnet/aspnetcore Issues : WebApplicationOptions...

'VS Code(Visual Studio Code)'에서도 약간의 설정만 하면 'ASP.NET Core 6'를 빌드할 수 있습니다. 0. 준비 'VS Code'를 열기 전에 '.NET 6 SDK'가 설치해야 합니다. Microsoft Dawnload : .NET 6.0 SDK 'VS Code'를 열고 확장에서 'C#'을 검색하여 설치합니다. marketplace - C# 1. 프로젝트 열기 비주얼 스튜디오에서 생성한 'ASP.NET Core 6' 프로젝트의 루트 폴더를 지정하여 프로젝트를 열어 줍니다. 2. 디버깅을 하기 위한 'launch.json' 파일 생성 원래 "빌드 및 디버그 자산이 없습니다" 같은 메시지가 나왔었는데... 어느 순간 사라졌습니다. 이제는 '실행 및 디버그'창에서 'launch...

이전 포스팅에서 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 - 자습서: 배우는 동안 최상위 ..

이전 포스팅에서 JWT(JSON Web Token)를 발급하고 인증하기 위한 처리를 했습니다. 이 포스팅에서는 이전 포스팅에서 만든 인증 처리를 연결하는 작업을 합니다. 연관글 영역 이 시리즈는 'ASP.NET Core 6'에서는 인증 처리를 이런 식으로 하는구나~~~ 라는 걸 알려주기 위한 목적이라 설계가 난잡합니다. 0. 구조 이 프로젝트에서는 'SQLite + Entity Framework'를 사용합니다. 이렇게 구성하면 DB를 사용하지 않을 때는 'InMemory'를 사용하여 메모리DB를 사용할 수 있어 이식성이 좋아서입니다. 연결정보를 받으면 코드 퍼스트(Code First) 방식으로 DB에 연결하여 테이블을 생성하고 데이터를 관리하게 됩니다. 누겟에서 Microsoft.EntityFramewo..