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

허용 지연과 통신 방향에 따라 폴링·SSE·WebSocket을 선택하고, 재연결과 상태 복구를 설계하는 방법을 설명합니다. 브라우저 백그라운드 실행의 한계도 다룹니다.

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

MySQL INSTANT DDL이 빠르게 끝나도 데이터 백필과 애플리케이션 전환은 남습니다. DEFAULT의 의미와 구·신 버전이 공존하는 expand-contract 마이그레이션을 설명합니다.

유니코드 정규화로 문자열을 비교하고, 바이트·코드 유닛·코드 포인트·자소 클러스터로 길이를 세는 차이를 설명합니다. IME 조합 중인 입력을 처리할 때의 주의점도 다룹니다.

SSE·WebSocket·postMessage에서 요청과 응답을 상관키로 연결하는 방법을 설명합니다. 요청을 하나씩 처리하는 큐의 한계와 타임아웃·지연 응답 문제를 실행 예제로 확인합니다.

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

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

브라우저와 Node.js에서 처리되지 않은 예외·Promise 거부가 보고되는 경로를 설명합니다. AbortController의 취소를 정상 흐름과 실제 장애로 구분하는 기준도 정리합니다.

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

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

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

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

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

DBMS와 테이블·키·제약조건에서 시작해 SQL, 정규화, 트랜잭션과 ACID, 인덱스를 정리합니다. NoSQL·복제·샤딩까지 이어지는 데이터베이스 입문 용어집입니다.

스프링의 빈·DI·IoC·AOP를 React·TypeScript의 익숙한 개념과 비교합니다. 웹 요청 처리부터 JPA·트랜잭션·테스트·스프링 부트까지 연결해 설명합니다.

Gradle·ktlint·detekt를 프론트엔드의 빌드 도구·포매터·린터와 비교합니다. 테스트, DB 마이그레이션, 코드 생성 도구의 역할과 FE 도구에 비유할 때의 차이도 짚습니다.

Liquibase·Flyway로 스키마 변경 이력을 관리하고 기존 DB에 기준선을 잡는 방법을 설명합니다. 스키마 마이그레이션과 데이터 변경 이력을 남기는 audit 테이블의 역할도 구분합니다.

개별 컬럼과 JSON 컬럼을 쿼리·제약조건, 데이터 노출 범위, 백필 비용으로 비교합니다. 컬럼 추가의 DDL 비용만으로 저장 구조를 결정하기 어려운 이유를 설명합니다.

부분 수정 API에서 필드 생략과 null을 어떻게 해석할지 정리합니다. JSON Merge Patch·JSON Patch·필드 마스크를 비교하고, 수정할 필드를 명시하는 permit 계약과 검증 예제를 다룹니다.

API 응답과 도메인 모델을 분리할 때 얻는 이점과 매핑 비용을 비교합니다. 계층별 DTO 구성, 응답의 중첩 구조, 인터페이스로 필드 누락을 줄이는 방법을 다룹니다.

호출자에 따라 API를 퍼블릭·오퍼레이션·인터널로 구분하는 설계 사례를 살펴봅니다. 각 API의 권한 처리와 도메인 간 호출에서 책임을 나누는 기준을 설명합니다.

검증과 권한 로직을 모델·서비스·컨트롤러 중 어디에 둘지 살펴봅니다. rich·anemic 도메인 모델을 비교하고, 도메인 서비스와 애플리케이션 서비스의 책임을 구분합니다.

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

헥사고날 아키텍처에서 도메인 모델을 DB와 프레임워크로부터 분리하는 이유를 설명합니다. React 코어와 렌더러를 비유로 포트·어댑터를 살펴보고, 요청 처리와 모듈 의존성의 방향을 구분합니다.

입력이 코드가 되는 XSS의 원인에서 출발해 CSP의 지시어, nonce·hash, Report-Only 도입을 설명합니다. CORS·CSRF와의 차이와 코드 리뷰 기준도 정리합니다.

TanStack Query가 쿼리 키를 해시로 바꾸고 캐시를 조회하는 과정을 소스 코드로 따라갑니다. 부분 매칭·구조적 공유·하이드레이션에서 값이 달라지는 조건도 살펴봅니다.

Docusaurus 블로그에서 URL 불일치와 색인 정책을 정리한 과정입니다. 메타데이터·구조화 데이터의 역할과 Search Console 점검 방법을 다룹니다.

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

Tailwind CSS 4.0의 CSS 기반 설정, 자동 콘텐츠 감지, Vite 통합을 살펴봅니다. 테마 변수와 동적 유틸리티, 컨테이너 쿼리 등 새 기능을 코드 예제로 정리합니다.

Authorization 헤더의 Bearer가 뜻하는 인증 방식과 JWT라는 토큰 형식의 차이를 설명합니다. Basic·Digest와 비교하고, Bearer 토큰 유출 시 생기는 위험을 짚습니다.

npm의 peer dependency 충돌에서 --force와 --legacy-peer-deps가 각각 무엇을 허용하거나 무시하는지 비교합니다. 설치 성공이 실제 호환성을 보장하지 않는 이유도 설명합니다.

SVG를 img·object·인라인으로 사용하는 방식과 차이를 비교합니다. SVGO로 파일을 최적화하고, SVGR로 React 컴포넌트를 만들며 아이콘 자산을 관리하는 방법을 정리합니다.

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

tsconfig의 다섯 가지 jsx 옵션과 각각의 변환 결과를 비교합니다. React.createElement를 호출하는 방식과 React 17에서 도입된 자동 JSX 런타임의 차이를 설명합니다.

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

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

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

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

응집도와 결합도의 종류를 구분하고, 프론트엔드 컴포넌트와 모듈 설계에 적용해봅니다. 상태 관리·의존성 주입·이벤트 버스가 코드 간 의존 관계에 미치는 영향을 예제로 살펴봅니다.

WAI-ARIA의 역할·상태·속성을 폼, 모달, 아코디언, 탭 예제로 설명합니다. 네이티브 HTML을 우선하고, ARIA 속성과 실제 키보드 동작을 함께 구현해야 하는 이유를 다룹니다.

GA·Meta Pixel의 초기화가 늦어 이벤트가 유실되는 원인을 설명합니다. 스크립트 실행 시점을 짚고, FIFO 큐·청크 분리와 캐싱·next/script·Web Worker의 적용 조건을 비교합니다.

Notion API를 호출하는 Lambda 함수를 만들고, EventBridge 예약 규칙으로 매일 실행한 과정을 기록합니다. 페이지 템플릿 구성과 Terraform으로 AWS 자원을 배포하는 예제를 다룹니다.

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

행렬의 종류와 전치, 덧셈·뺄셈·곱셈의 규칙을 정리합니다. 행렬 곱셈이 가능한 조건을 확인하고, JavaScript로 코딩 테스트 문제를 풀어봅니다.

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

Web Worker로 무거운 연산을 옮기고 작업과 취소를 관리하는 방법을 설명합니다. 탭 간 통신, Service Worker의 생명 주기, 캐시와 업데이트 설계도 함께 다룹니다.

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

정규표현식의 수량자 *, +, ?, {n,m}으로 반복 횟수를 지정하는 방법을 설명합니다. 탐욕적 매칭과 지연 매칭의 차이, 빈 문자열 매칭 시 주의점도 예제로 살펴봅니다.

JavaScript에서 정규표현식을 만들고 test·exec·match 등으로 사용하는 방법을 설명합니다. 메타 문자, 이스케이프, 문자 집합의 기본 문법을 예제로 익힙니다.

DocumentFragment로 여러 DOM 노드를 조립하고 문서에 삽입하는 방법을 설명합니다. 일반 요소를 사용하는 방식과 비교하고, 성능 측정 결과를 해석할 때의 주의점도 짚습니다.

LeetCode의 JavaScript 풀이를 로컬에서 실행할 수 있도록 Node.js와 Jest를 설정합니다. 문제별 테스트 파일을 만들고, 코드가 바뀔 때 테스트를 다시 실행하는 방법을 다룹니다.

Node.js의 heic-convert로 HEIC 이미지를 JPEG로 변환합니다. Express·Multer로 업로드를 받고, Vue 화면에서 변환된 이미지를 다운로드하는 예제를 다룹니다.

Vuex의 state·mutations·getters·actions를 예제로 익히고, 스토어를 모듈과 네임스페이스로 나누는 방법을 설명합니다. Vuex를 사용하는 기존 Vue 프로젝트를 이해하기 위한 글입니다.

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

JavaScript 모듈의 named export와 default export를 내보내기·가져오기 예제로 비교합니다. 식별자 이름, 별칭, 한 모듈에서 두 방식을 함께 사용하는 방법을 정리합니다.

자바스크립트에서 비동기 처리란 무엇이며, AJAX와 API 요청이 어떻게 동작하는지 설명합니다. 타이머 예제와 HTTP 요청·응답 흐름을 함께 살펴봅니다.

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

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

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