저는 21년째 닷넷 개발자로 일하고 있습니다. 오래 전에 Next.js를 사용하다가 문득 최근의 Next.js는 어떻게 변했을지 궁금해졌습니다. 공식 문서가 워낙 잘 되어 있지만, 오래전에 접하고 잊고 있었던 제 눈에는 생소한 부분이 많았습니다. 이 글은 그냥 시작해보고 정리한 기록입니다. 완벽한 튜토리얼이 아니라, 개발자가 React 생태계의 최신 도구를 접했을 때 느낀 점과 선택한 방식을 공유하려고 합니다. 왜 지금 Next.js인가 제가 손놓기 직전 Next.js는 App Router를 기본으로 채택하면서 구조가 크게 바뀌었습니다. Pages Router에서 App Router로의 전환은 단순한 업데이트가 아니라, 파일 시스템 기반 라우팅과 서버 컴포넌트를 기본으로 삼는 패러다임 변화였습니다. 저는..

React / TypeScript 프로젝트 코딩 규칙 가이드 본 문서는 프로젝트의 일관된 아키텍처와 유지보수성 향상을 위한 작업 규칙 정의서입니다. 새로운 기능을 추가할 때는 아래 구조와 규칙을 반드시 준수하며, 기존 파일의 지역 관례를 최우선으로 적용합니다. 1. 프로젝트 구조 (Directory Architecture) 역할 중심의 디렉터리 분리를 통해 스파게티 코드를 방지하고, 특정 도메인 로직과 UI 컴포넌트의 결합도를 낮춥니다. 경로 (Path) 역할 및 준수 사항 src/main.tsx 애플리케이션의 진입점입니다. 전역 CSS, i18n, 인증 Provider, React Query Provider 등 시스템 전역에 영향을 주는 컨텍스트 및 환경 설정만 배치합니다. src/App.tsx 전체 ..

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년에 이르러 이른바 ‘피크 프레임워크(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 .