지식과 경험을 기록하고 공유합니다

세션에서 OAuth·OIDC·PKCE·BFF까지, 토큰의 수신자와 자격 증명의 위치를 따라 웹 인증 구조를 설명합니다.

컬럼 추가는 즉시 끝나지만 마이그레이션은 끝나지 않습니다. INSTANT DDL과 백필의 시차, NOT NULL DEFAULT가 만드는 과거 조작, expand-contract로 전환기를 설계하는 방법.

같아 보이는 글자가 다른 값인 이유, 글자 수를 세는 네 가지 단위, 그리고 입력이 아직 끝나지 않았을 가능성을 정리합니다.

요청과 응답의 짝은 HTTP 스택이 대신 맞춰줍니다. SSE, WebSocket, postMessage처럼 채널 하나에 메시지가 여러 개 흐르면 그 장치가 사라집니다. 상관키 대신 동시성을 1로 낮출 때 무엇이 부채로 남는지 실행 예제로 확인합니다.

웹뷰 퍼널에서 뒤로가기가 두 칸씩 가던 원인을 추적하고, 네이티브 back과 웹 back 중 누가 히스토리를 소유할지 계약으로 정하는 법을 정리합니다.

세션 히스토리 엔트리와 순회, push·replace를 바탕으로 브라우저와 SPA 라우터가 뒤로가기를 복원하는 원리를 정리합니다.

처리되지 않은 예외와 Promise 거부가 도착하는 곳부터 AbortController의 취소를 정상 흐름과 실제 장애로 분류하는 기준까지 정리합니다.

React에서 최신 값 참조, 파생 상태, Effect 사슬을 구분하고 실제로 저장해야 할 상태만 남기는 판단 기준을 정리합니다.

API 시간 필드를 절대시각·로컬 날짜·지역 기준의 미래 약속으로 구분하고, DB 타입과 Temporal로 그 의미를 보존하는 법을 정리합니다.

JavaScript Date의 파싱·출력·산술 함정을 짚고, Intl을 이용한 타임존 처리와 SSR 하이드레이션 문제까지 정리합니다.

절대시각·벽시계시각·기간을 구분하고, UTC·오프셋·타임존·IANA tzdb가 서로 어떤 역할을 하는지 정리합니다.

태그 유니온·브랜디드 타입·Parse, don't validate로 잘못된 상태를 줄이고 도메인 불변식을 타입에 담는 법을 설명합니다.

DBMS·RDBMS부터 테이블·키·제약조건, SQL, 관계와 정규화, 트랜잭션과 ACID, 인덱스, 그리고 NoSQL·복제·샤딩까지, 데이터베이스를 처음 배우는 사람이 알아야 할 기본 개념과 용어를 한자리에 정리한 레퍼런스입니다.

빈과 컨테이너, DI·IoC, AOP, 웹 요청 처리, JPA·트랜잭션, 테스트, 스프링 부트까지, 스프링의 핵심을 React·TypeScript 같은 익숙한 개념에 대응시켜 정리합니다.

ktlint는 Prettier, detekt는 ESLint, Gradle 멀티모듈은 pnpm workspace. 백엔드 온보딩에서 만난 도구들을 FE 대응물로 정리하고, 대응물이 없는 도구는 왜 없는지까지 짚습니다. FE→BE 온보딩 시리즈의 마지막 글입니다.

프론트엔드에는 대응물이 없는 문제, 살아 있는 데이터 위에서 스키마를 바꾸는 일입니다. 마이그레이션 도구의 changelog(커밋 히스토리)와 baseline(스쿼시 스냅샷), 그리고 변경 이력을 자동으로 남기는 audit 테이블까지 정리합니다.

"컬럼 추가는 비싸다"는 이제 옛말입니다. 현대 DB에서 개별 컬럼과 JSON 컬럼을 가르는 진짜 판단 기준 세 가지를 정리합니다. DB가 그 필드를 알아야 하는가, 노출을 묶음으로 통제할 값인가, 백필 비용은 어느 쪽이 싼가.

부분 수정 API에서 null 필드는 오래된 모호함을 남깁니다. JSON Merge Patch·JSON Patch·필드 마스크를 비교하고, 바꿀 필드를 명시하는 permit 계약과 필드 단위 검증 패턴을 정리합니다.

API 응답을 도메인 모델에 맞출 것인가, 독립적으로 설계할 것인가. 규칙이 아니라 트레이드오프입니다. 경계마다 옷을 갈아입는 DTO 레이어링과, 필드 전파를 컴파일러에게 맡기는 인터페이스 구현 강제까지 다룹니다.

같은 도메인의 API라도 호출자가 누구냐에 따라 퍼블릭·오퍼레이션·인터널로 나뉩니다. 인터널 API의 경계는 왜 네트워크가 아니라 도메인 사이에 그어지는지, 종류마다 권한을 어떻게 다르게 설계하는지를 다룹니다.

검증 로직 하나를 두고 모델·서비스·컨트롤러 사이에서 고민해 본 경험으로 풀어보는 로직의 자리. rich/anemic 도메인 모델의 스펙트럼, 도메인 서비스와 애플리케이션 서비스의 구분, 그리고 권한이 사는 곳.

인바운드/아웃바운드 어댑터를 가르는 기준은 데이터의 방향이 아니라 호출의 방향입니다. 이벤트 리스너와 fetch, props 콜백에 대응시켜 의존성 규칙과 의존성 역전(DIP)까지 풀어봅니다.

헥사고날 아키텍처가 모델을 중심에 놓는 이유를 프론트엔드 개발자의 언어로 풀어봅니다. React 코어와 렌더러의 관계로 이해하는 포트와 어댑터, 그리고 요청 하나가 레이어를 지나가는 길.

SOP·CORS·XSS·CSP·CSRF·postMessage를 신뢰 경계라는 관점으로 연결하고, 데이터와 권한이 넘어가는 지점을 검토합니다.

TanStack Query의 캐시는 결국 Map<string, Query> 하나입니다. 쿼리 키가 해시 문자열이 되는 과정과 구조적 공유·dehydrate/hydrate 경로를 소스 코드로 따라갑니다.

정적 사이트 생성기로 만든 블로그를 반년 넘게 운영하며 검색 노출을 챙긴 과정입니다. 메타데이터와 Open Graph, 구조화 데이터, 사이트맵과 크롤 예산, 후행 슬래시가 부른 리디렉트까지 짚습니다.

VS Code Extension 인터페이스에서 로컬 AI 서버 API와 통신하는 예제를 따라하며 Ollama, VS Code Extension API에 대해 간단히 배워보세요.

Tailwind CSS v4.0은 성능과 유연성을 극대화한 새로운 버전으로, 최신 웹 표준과 개발 흐름에 맞춘 다양한 기능과 개선 사항을 제공합니다. 이 글에서는 업데이트된 주요 내용을 살펴봅니다.

이 글에서는 Bearer 토큰이 왜 현대 웹 인증에서 표준처럼 자리 잡았는지, 그리고 이를 활용하는 방법에 대해 다룹니다.

npm 설치 시 발생하는 의존성 충돌 문제를 해결하기 위해 사용하는 --force와 --legacy-peer-deps 옵션의 차이점과 사용 목적에 대해 알아봅니다. 이 글에서는 이러한 옵션들이 필요한 이유와 주의할 점을 자세히 설명합니다.

SVG(Scalable Vector Graphic)에 대한 전반적인 내용을 다룹니다. SVG의 정의와 특징, 그리고 왜 웹 환경에서 널리 사용되는지에 대한 이유와 최적화 방안 등.

shadcn/ui의 핵심 개념과 아키텍처를 요약합니다. Headless UI 기반 컴포넌트 구조, Tailwind CSS 스타일링 방식, 그리고 디자인 시스템을 직접 소유하는 철학까지 살펴봅니다.

이번 글에서는 TypeScript가 JSX를 처리하는 방식과 React 17에서 도입된 새로운 JSX Transform의 이점을 설명합니다.

Next.js 기반의 서버 사이드 라우팅 최적화와 유저 행동 분석을 통해 웹 퍼포먼스를 개선하고 전환율을 높인 사례를 소개합니다. 트래픽 분기 최적화, Heatmap & Scrollmap 분석을 활용한 UI 개선 과정을 다룹니다.

정적 자원을 assetPrefix 옵션을 사용해서 별도의 CDN에 업로드해서 배포 개정이 이루어져도 자원을 찾지 못하는 문제를 인프라 구조를 개선해서 해결한 내용입니다.

개인 창작 과정의 경험이 조직의 생산성 및 워크플로우 최적화에 미치는 영향을 분석하며, 효과적인 협업 환경 구축 방안을 제시합니다.

Next.js 페이지에서 메타 정보를 효율적으로 관리하기 위해 직접 제작한 라이브러리를 소개하고 활용 방법을 안내합니다.

응집도와 결합도의 개념을 이해하고, 프론트엔드 개발에서 이를 최적화하는 방법을 탐구합니다.

WAI-ARIA의 개념과 실무 적용 방법을 설명하고, 접근성을 고려한 UI 구현 전략을 다룹니다.

GA·Meta Pixel 같은 서드파티 스크립트의 초기화 지연으로 이벤트가 유실되는 문제를, 스크립트 로드/실행 우선순위부터 FIFO 이벤트 큐, 청크 분리와 캐싱, next/script 전략, 웹 워커까지 네 가지 대안으로 정리합니다.

매일 아침 노션 페이지 템플릿 복붙하기 귀찮아서 스케줄링 이벤트로 노션 API 호출 람다 함수 만든 썰

Canvas API와 Broadcast Channel API를 활용하여 자필 서명 모듈을 개발한 경험과 구현 과정을 다룹니다.

이 문서는 행렬의 기본 개념과 주요 연산에 대해 설명합니다.

JavaScript에서 Map과 Object를 비교하고, 어떤 상황에서 Map을 사용하는 것이 더 유리한지 벤치마크 테스트와 함께 알아봅니다.

Web Worker와 Service Worker의 차이점과 활용 사례를 통해 브라우저에서 멀티스레딩과 백그라운드 작업의 개념을 이해합니다.

Docker를 활용하여 React 애플리케이션을 개발하고 배포하는 방법을 소개합니다. 초보자도 쉽게 따라할 수 있는 단계별 가이드.

정규표현식(Regex)에서 반복(Repetition) 패턴을 다루는 방법을 배워보고, 다양한 활용 사례를 살펴봅니다.

정규표현식(Regex)의 기본 개념과 패턴 매칭 방법을 학습하고, 실전에서 활용할 수 있는 예제와 함께 이해합니다.

JavaScript의 DocumentFragment 객체의 개념과 활용 방법, 그리고 성능 최적화를 위한 이유를 살펴봅니다.

Node.js와 Jest를 사용해서 로컬에서 코딩 테스트를 위한 환경을 만들어봅니다.

HEIC 이미지를 JPEG, PNG 등으로 변환하는 방법을 알아봅니다. HEIC 변환이 필요한 이유와 효율적인 변환 툴을 소개합니다.

Vuex를 활용한 효율적인 전역 상태 관리 방법을 배워보세요. Vue 애플리케이션의 상태 관리 패턴과 모범 사례를 소개합니다.

JavaScript Promise 체인을 활용하여 좌표를 기반으로 국가 정보를 가져오는 API 요청을 구현하는 방법을 배웁니다.

ES6 모듈 시스템에서 Named Export와 Default Export의 차이를 비교하고, 각각의 장점과 활용 사례를 알아봅니다.

자바스크립트에서 비동기 처리란 무엇이며, AJAX와 API 요청이 어떻게 동작하는지 설명합니다. 콜백, 프로미스, async/await 개념까지 다룹니다.

JavaScript와 CSS를 활용하여 마우스를 올리면 이미지가 확대되는 효과를 구현하는 방법을 설명합니다. 사용자 경험 향상을 고려한 인터랙티브 이미지 줌 기능을 다룹니다.

프론트엔드 개발자가 알아야 할 필수적인 32가지 UI 요소를 정리한 가이드. 실무에서 바로 활용 가능한 핵심 정보를 제공합니다.

누구든지 10초 안에 무난한 블로그 아티클 썸네일을 만들 수 있습니다. 당신은 개발과 글쓰기에만 집중하세요. 나의 첫 토이 프로젝트 개발기