이전 포스팅에서는 세팅만 했으니 이제 간단하게 '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 ..
작업을 하다 보면 여러 가지 테스트 환경에 대응하려고 웹 루트 폴더를 여러 개 두거나 웹 루트 안에 여러 폴더로 분리하거나 하는 필요성이 있습니다. 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...
리액트(react) 공부하려고 'create-react-app'로 프로젝트 생성하고 돌리는데.... npm WARN deprecated topo@2.0.2: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial). npm WARN ..
티스토리 가이드에 보면 '' 치환자는 필수라는 내용이 나옵니다. 참고 : 티스토리 스킨 가이드 - 공통 치환자 다른 포스트에서도 언급했었지만 ''와 같은 치환자는 티스토리 전용 기능을 위해 이것저것 잔뜩 불러온다는 문제가 있습니다. (참고 : [티스토리 스킨] 티스토리의 치환자는 자체 스크립트도 불러온다. ) 이런 기능들을 사용하지 않는다면 사이트 속도만 느려지게 만들죠. * 주의 * 이 치환자를 제거한 이후에 나오는 에러들은 상당한 자바스크립트(javascript) 지식이 있어야 해결할 수 있는 문제입니다. 자신이 없다면 제거하지 마시길 바랍니다. 제거로 인한 책임은 모두 자신에게 있음을 명심하세요. 기초적인 자바스크립트에 관한 질문은 받지 않습니다. 1. 제거해보기 일단'' 을 제거하고 블로그로 들어..
