프론트엔드를 리액트로 만들다 보면 어느 순간 인증 처리를 어디까지 맡겨야 하는지 고민하게 됩니다. 화면을 그리는 일은 리액트가 잘합니다. 상태를 다루고, 컴포넌트를 나누고, 사용자와 빠르게 상호작용하는 것도 리액트의 장점입니다. 하지만 인증은 조금 다릅니다. 토큰을 어디에 저장할지, 쿠키는 어떻게 다룰지, API 호출 권한은 어디서 확인할지, 새로고침 후 세션은 어떻게 유지할지 같은 문제들이 따라옵니다. 처음에는 단순해 보이지만, 실제 서비스를 운영하려고 하면 생각보다 신경 쓸 부분이 많아집니다. 그래서 요즘 다시 관심을 두고 있는 구조가 BFF입니다. Backend for Frontend의 줄임말인데, 이름 그대로 프론트엔드를 위한 백엔드 계층을 하나 두는 방식입니다. 저는 이 구조를 “서버사이드가 프..

React로 화면을 만들다 보면 생각보다 많은 시간이 API 데이터를 다루는 데 쓰입니다. 데이터를 불러오고, 로딩 상태를 표시하고, 실패했을 때의 처리를 만들고, 다시 새로고침해야 하는 시점을 고민합니다. 처음에는 단순한 fetch 코드로 충분해 보이지만, 화면이 늘어나면 이 흐름이 금방 복잡해집니다. TanStack Query, 예전 이름으로 React Query는 이 문제를 꽤 잘 정리해주는 도구입니다. React 애플리케이션에서 비동기 데이터, 특히 서버에서 가져오는 데이터를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 일을 도와줍니다. 클라이언트 상태와 서버 상태는 다릅니다 React에서 상태라고 하면 보통 useState나 Zustand 같은 상태 관리 도구를 떠올립니다. 하지만 서버에서 가..

프론트엔드 기술을 고를 때마다 React와 Vue는 자주 비교 대상에 올라옵니다. 둘 다 오래 사용되어 왔고, 생태계도 충분히 성숙했습니다. 그래서 이제는 어느 쪽이 더 뛰어난지보다, 지금 만들고 있는 서비스의 성격에 어느 쪽이 더 잘 맞는지를 보는 편이 더 현실적이라고 느낍니다. 2026년 6월 기준으로 React는 19.2 계열, Vue는 3.5 계열을 기준으로 보면 됩니다. 버전 숫자만 보면 둘 다 이미 안정적인 단계에 들어와 있습니다. 새로운 프로젝트에서 선택할 때는 최신 기능 자체보다, 팀이나 개인이 얼마나 오래 유지보수할 수 있는지가 더 중요해졌습니다. React는 생태계와 유연성이 강점입니다 React는 라이브러리에 가깝습니다. 화면을 구성하는 핵심 방식은 제공하지만, 라우팅, 상태 관리, ..

메리톡톡을 리팩토링하면서, 예전에 많이 썼던 아토믹 디자인 패턴이 떠올랐습니다. 한때는 React 컴포넌트를 atom, molecule, organism으로 나누는 것이 무척 체계적으로 느껴졌는데, 지금은 이 패턴에 대해 더 이상 이야기하는 사람을 만나기 어렵습니다. 왜 그럴까 하는 생각이 들어, 이번 기회에 정리해보기로 했습니다. 유행하던 시절 아토믹 디자인은 UI를 가장 작은 단위(atom)로 쪼개고, 이를 조합해 molecule, organism, template, page 순으로 구성하는 방법론입니다. 재사용성을 높이고, 디자인 시스템과 개발 컴포넌트를 일치시키는 데 강점이 있었습니다. 한동안 React 생태계에서 널리 참고되었고, 저도 몇몇 프로젝트에 적용해보면서 그 장점을 체감했습니다. 실무에..

저는 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. 실행하여 ..

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..