ASP.NET Core 프로젝트를 진행하다 보면 누구나 마주하는 문제가 있다. 바로 `Program.cs` 비대화다. .NET 6 이후 `Startup.cs`가 통합되면서 초기 세팅은 간편해졌지만, 사이트 규모가 커지고 의존성 주입(DI) 코드가 계속 쌓이다 보면 `Program.cs` 하나가 수백 줄을 훌쩍 넘겨버린다. 확장 메서드를 만들어서 영역을 분리하는 정석적인 방법론에 매몰되어 있었는데, 결국 새 클래스를 만들 때마다 일일이 수동 등록을 해줘야 하는 건 마찬가지라 생각보다 귀찮더라. 자바 스프링 부트(Spring Boot)의 `@Service` 같은 어노테이션 방식이 있나 찾아보았더니 Nuget 패키지로 이미 개발되어 있어 컨버전을 진행 하였다 A. DI(의존성 주입)를 처음 접하면 가장 먼..

기존 Part1, Part2와 다른 방식의 예제이며많이 사용할 만한 내용을 모아 보았다.아래의 웹 사이트에서 E-BOOK 과 소스코드 랜더링 내용을 살펴보면 된다. 1. EBOOK (샘플 소스코드에 대한 설명)https://hslab-ebook.netlify.app/bible.html Vue + jQuery 하이브리드 실무 치트시트💡 0. Vue 완전 기초 다지기 (여기부터 읽으세요) 뷰(Vue)를 한 번도 안 써봤다면, 나머지 탭을 보기 전에 이 탭 하나만 먼저 이해하고 가세요. 딱 5가지만 알면 나머지는 다 응용입니다. ① "반응성(hslab-ebook.netlify.app2. 샘플 소스코드 랜더링 https://hslab-ebook.netlify.app/index2 Hybrid Dashboard ..

기존 Part1- https://iyak.tistory.com/entry/Nodejs-%EC%97%86%EC%9D%B4-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%A0%88%EA%B1%B0%EC%8B%9C-Vuejs-jQuery내용을 조금 더 꼬았다.즉 기본기의 Part1의 예제가 너무 단순했기 때문에 Part2는 기존 설명은 생략하고 진행한다.1) 레거시 제이쿼리와 뷰의 완벽한 공존이다. 기존 제이쿼리 코드를 무리하게 뷰로 전부 변환할 필요가 없다. 데이터 바인딩과 반복문 처리는 뷰가 전담하고, 모달 팝업을 띄우거나 전역 권한을 제어하는 시각적/구조적 역할은 제이쿼리가 그대로 수행하는 가장 현실적인 하이브리드 타협점을 보여준다.2) computed와 watch의 명확한 역..

뷰(Vue.js)는 리액트(React)와 함께 화면을 만드는 대표적인 도구로 잘 알려져 있다. 리액트에 비해 배우기 쉽다는 장점이 있지만, 처음 접할 때는 문법이 다소 낯설 수 있다. 이 글의 목적은 전통적인 서버 중심 화면 방식(JSP, PHP, CSHTML 등)과 제이쿼리(jQuery)가 결합된 환경에서, 뷰의 일부 기능만 가볍게 얹어 쓰는 방법을 소개하는 것이다. 이를 통해 데이터 통신(Ajax) 이후 발생하던 지독한 'HTML 문자열 조작 지옥'을 깔끔하게 해결할 수 있다. 즉, 오래된 레거시 코드를 구원할 가장 확실한 방법이다. 다운로드 (이 파일만 받으면 되는데 이 부분이 잘 알려지지 않아 Vue는 Node.js 계열에서만 사용한다는 오해가 있다) - https://app.unpkg.com/v..

업무 하면서 HTML 테이블을 쓸 때마다 늘 디자인이 마음에 들지 않았다.특히 부트스트랩 템플릿이나 흔히 굴러다니는 어드민 테마 내부에 있는 테이블들은 대부분 만족도가 낮았다.여백은 너무 휑하거나 답답했고, 한국어 폰트의 베이스라인은 미묘하게 어긋났으며, 조금만 커스텀하려고하면 레거시 CSS와 전쟁이었다. 난 웹 퍼블리셔가 아니기 때문이다.결국 백엔드 개발이나 인프라 관제 대시보드를 세팅할 때마다 프런트엔드 디자인을 다듬는 데불필요한 시간과 낭비하고 있었기에 하나 잘 만들어 돌려쓰는 형태가 되었으면 하는것이 목적이다.이 프로그램 역시 같은 고통을 사람들에게 도움이 되었으면 하는 것이 바람이다.아래 배포 압축파일과 동일한 DEMOhttps://hslab-table.netlify.app/ 배포파일1. "hs..

hslab-button.css (혹은 hslab-button-min.css) 하나만 임포트 하면 애니메이션 효과가 적용된 버튼을 가져다 사용할 수 있다.사용법에 대해 학습 같은 것을 할 필요가 없다.압축파일 내 html 이나 아래 Demo 사이트를 방문해 보면 버튼 생성기가 있는데버튼 생성 후 이미지 처럼 생성된 버튼 태그를 가져다 사용하기만 하면 된다.순수 클린한 html과 css라 필요하면 수정하거나 분석해 보면 된다.여러 가지 (23가지 형태)의 버튼과 버튼별 색상테마 그리고 5개의 사이즈로 버튼을 만들 수 있는 것이 핵심이다.일반적인 Admin 환경이면 "shimmer" 또는 "glow" 버튼을 색상이나 크기에 맞게 변경하여 사용하면 좋을것으로 생각된다주의: IE브라우저 사용불가DEMO : h..

시작전 3줄요약- 개발할 땐 리액트 프록시와 .NET 포트(13000)만 일치시켜 주면 로컬 연동 세팅이 끝납니다. - 배포할 땐 리액트 빌드본이 .NET의 `wwwroot`로 직행하므로, 운영 서버에 Node.js를 깔 필요 없이 .NET 프로젝트 하나만 게시하면 끝납니다. - 하나의 도메인(dog.com) 아래에서 한 몸으로 돌기 때문에 복잡한 CORS 설정이나 JWT 보안 쿠키 이슈가 원천 차단됩니다.요즘 웹앱은 프론트엔드 특유의 강점과 화면이 착착 붙는 쫀쫀함 때문에 리액트가 대세다. 원래 리액트와 .NET을 같이 쓰려면 노드 서버와 백엔드 서버를 따로 띄워야 하는 번거로움이 있었는데, .NET Core의 wwwroot 정적 호스팅을 활용하면 이 둘을 아주 깔끔하게 하나로 통합할 수 있다. 이 구..

레거시 파일 업로드는 그대로 서버사이드 코드를 통해 그대로 저장된다.이중 치명적인 게 이미지다. 사용자 프로필, 썸네일등을 ai 이미지로 제작되면 6MB-10MB짜리로 만들어주는 케이스가 그대로 있다.이를 클라이언트에서 압축을 하여 서버부담을 최소화하는 소스코드를 작성하였다.위 프로그램은 JQuery 와 Compressor.js (https://github.com/fengyuanchen/compressorjs) 의 의존성을 가지고 있다.이를 소스코드 압축파일에 첨부하였지만, 필요하면 직접 다운로드하여 사용하면 된다.input type="file" 에 onchange에 아래 예시 설명대로 함수를 연결하면 끝이다.기존 레거시 코드 사용자를 위한 것이 주 목적이다.1. 사용법 설명 클라이언트 사이드 이미지 압..