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

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

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

rich/anemic 도메인 모델의 스펙트럼, 도메인 서비스와 애플리케이션 서비스의 구분, 그리고 권한이 사는 곳 — 로직의 자리를 정하는 백엔드의 오래된 어휘들을 정리합니다.

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

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

부분 수정 API에서 null 필드의 오래된 모호함 — JSON Merge Patch, JSON Patch, 필드 마스크까지 업계의 해법들을 비교하고, 바꿀 필드를 명시하는 계약과 필드 단위 검증 패턴을 다룹니다.

"컬럼 추가는 비싸다"는 이제 옛말입니다. 현대 DB에서 개별 컬럼과 JSON 컬럼을 가르는 진짜 판단 기준 세 가지를 정리합니다.

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

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

상시 위험 관리 차원에서 웹 보안을 점검·강화하며 정리한, 많이들 막연하게만 아는 핵심 개념들. XSS, 컨텍스트 이스케이프, CSP, CSRF, postMessage를 '신뢰 경계'라는 한 축으로 풀어 설명합니다.

이 글에서는 shadcn/ui의 핵심 개념과 아키텍처를 요약합니다. Headless UI 기반의 컴포넌트 구조, Tailwind CSS 스타일링 방식 등을 살펴보세요.

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

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

Next.js 기반의 서버 사이드 라우팅 최적화와 유저 행동 분석을 통해 웹 퍼포먼스를 개선하고 전환율을 높인 사례를 소개합니다.

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

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

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

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

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

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

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

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

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

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

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

누구든지 10초 안에 무난한 벨로그 썸네일을 만들 수 있습니다. 어도비, 오피스 없어도 됩니다. 당신은 개발과 글쓰기에만 집중하세요. 나의 첫 토이 프로젝트 개발기

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

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