로슬린의 인생잡담

2026년 현재 React(SPA) 시작하기

1, 먼저 Typescript 기반으로 설치npm create vite@latest my-modern-react -- --template react-ts- 실행시 곧바로 http://localhost:5173 수행화면을 확인할 수 있다. 2. Tailwindcss 설치npm install tailwindcss @tailwindcss/vite 3. Tailwindcss 설정import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'import tailwindcss from '@tailwindcss/vite'import path from 'path'export default defineConfig({ plugins: [ rea..

2026년 프론트엔드 엔지니어링 시장의 패러다임 전환과 아키텍처 진화에 관한 심층 연구 보고서

2026년 프론트엔드 엔지니어링 시장의 패러다임 전환과 아키텍처 진화에 관한 심층 연구 보고서전 세계 프론트엔드 개발 생태계는 2026년에 이르러 이른바 ‘피크 프레임워크(Peak Framework)’ 시대로 명명되는 성숙기에 진입했다.1 과거 새로운 라이브러리가 매달 등장하며 개발자들의 피로도를 높였던 혼란기는 종식되었으며, 이제 시장은 리액트(React)와 뷰(Vue), 앵귤러(Angular)라는 3대 거대 프레임워크를 중심으로 고착화된 안정성을 보이고 있다.1 이러한 안정성 이면에는 단순히 라이브러리의 선택을 넘어, 이를 어떤 메타 프레임워크 및 콘텐츠 인프라와 결합할 것인지가 기술 결정의 핵심 차별화 요소로 부상했다.1 본 보고서는 과거 리액트와 뷰를 경험했던 개발자가 현대의 시장에 다시 진입할 ..

1. 프로젝트를 생성합니다.npx create-next-app@latest 2. 다음과 같이 설정합니다.What is your project named? my-appWould you like to use TypeScript? YesWould you like to use ESLint? YesWould you like to use Tailwind CSS? YesWould you like to use `src/` directory? YesWould you like to use App Router? (recommended) YesWould you like to customize the default import alias (@/*)? Yes 3. 기본 라이브러리를 설치해 줍니다.npm i 4. 실행하여 ..

먼저 Cmd에서 다음 명령어로 프로젝트를 생성합니다. dotnet new worker --name 그런 다음 WIndowsServices 라이브러리를 설치해 줍니다. dotnet add package Microsoft.Extensions.Hosting.WindowsServices 이제 프로젝트 기본으로 주어지는 Worker.cs 파일을 WindowsBackgroundService.cs 파일로 교체합니다. namespace App.WindowsService; public sealed class WindowsBackgroundService( WorkService workService, ILogger logger) : BackgroundService { protected override async Task E..

닷넷의 발전 속도는 감히 따라가기 힘들 만큼 빠르게 변화하고 있습니다. 클린 아키텍처에 대한 이야기야 이전에도 많이 나왔지만, 닷넷은 아직 어려움을 겪고 있는 이들에게 좀 더 명확한 방향성을 제시해 주고 있습니다. 본 포스트에서 작성된 텍스트는 모두 다음 영상을 기초로 작성되었습니다. 영상에서는 클린 아키텍처에 대해 그 의존성을 도메인 중심으로 구성함으로써 전통적으로 데이터베이스를 중심으로 소프트웨어를 설계하는 것보다 도메인 중심으로 설계하는 것이 더 유리하다는 점을 강조하고 있습니다. 이를 통해 인프라 의존성을 최소화하고 소프트웨어를 테스트하거나 의존성을 변경하는 것이 쉬워집니다. 클린 아키텍처는 도메인 주도 설계를 따르고, 비즈니스 로직이 복잡한 경우에 적합하다고 이야기 하고 있습니다. 영상에서 이야..

깜빡하고 Branch를 안만들고 방금 작업을 그냥 Commit을 해버렸다면! (1) 먼저 새로운 Branch를 생성해 줍니다. git branch (2) 해당 Branch로 변경합니다. git checkout (3) 방금전 한 Commit 내용이 있는지 확인해 봅니다. 만약 Commit한 내용이 없다면 가장 최근 커밋을 가져옵니다. git cherrypick HEAD (4) 이제 다시 원래 브런치로 돌아옵니다. git checkout (5) 마지막 커밋을 삭제합니다. git reset --hard HEAD~1 (6) 새로운 브런치로 이동하여 작업을 시작합니다. git checkout

Identity서버를 연결하기 위해 가장 기본인 oidc-client를 이용한 접속을 시도해 보겠습니다. (1) 먼저 Next.js 프로젝트를 생성해 주세요. npx create-next-app testapp (2) oidc-client 를 설치해 줍니다. npm install oidc-client (3) root에 위치한 page.tsx 에 내용을 다음과 같이 작성해 줍니다. "use client" import { OidcClient,UserManager } from "oidc-client"; export default function Home() { var config = { authority: "https://localhost:5100", client_id: "RoslynDevJS", redirec..

Next.js 프로젝트를 셋팅하기 위해서는 기본적으로 Node.js, NPM 등이 설치되어 있어야 합니다. (1) create-next-app의 최신 버전을 설치해 줍니다. npm install create-next-app@latest -g (2) npx를 이용해 create-next-app를 실행합니다. (앱폴더가 자동으로 생성됩니다.) npx create-next-app testapp (3) 실행하면 설치에 관련된 요소들에 대해 질문하며, 적절히 답변하면 Next.js가 생성됩니다. (4) 이제 code . 으로 생성된 프로젝트를 vs code에서 확인할 수 있습니다. code .

이번에 새롭게 합류하게된 회사에 프로젝트를 받아 실행하는 과정에서 다음과 같은 오류를 마주하게 되었습니다. CloudHospital.IdentityServer.STS.Identity 프로젝트의 IIS Express를 구성하려고 할 때 다음과 같은 오류가 발생했습니다. 파일 이름: redirection.config 오류 : 구성파일을 읽을 수 없습니다. 이와 관련된 문제해결을 위해 IIS Express를 검색하면, 대부분 환경설정 파일을 삭제하라고 나오는데, 프로젝트 실행시 프로필 지정을 잘못해도 위와 같은 오류가 발생할 수 있습니다. 물론 정확히 말해서, 기본값으로 설정된 IIS Express에 commandLineArgs 값 때문에 발생한 오류로 유추되기 때문에, 프로필 지정을 잘못했다고 나온 오류는 ..

본문 글은 원문(https://docs.duendesoftware.com/identityserver/v7/quickstarts/js_clients/js_without_backend/)을 참고하여 작성되었습니다. (1) 먼저 사용할 프로젝트를 생성해 줍니다. (예시에서는 SPA) dotnet new web -n SPA (2) 해당 프로젝트를 솔루션에 추가해 줍니다. dotnet sln add ./{프로젝트경로} (3) wwwroot 디렉토리를 만들어 주고, package.json 파일을 생성해 줍니다. npm init (4) oidc-client 라이브러리를 설치해 줍니다. (시작파일은 app.js로 지정) npm i oidc-client (5) 설치된 라이브러리에 있는 js 파일을 wwwroot 로 복사..