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

블로그 구독 메일을 붙이며 살펴본 이메일 발신자 인증 구조입니다. SPF·DKIM과 From 주소를 연결하는 DMARC, 정책과 보고서, BIMI의 역할을 정리합니다.

테넌트와 테넌시의 뜻부터 싱글테넌시·멀티테넌시의 차이까지 설명합니다. 문서 협업 서비스를 예로 자원 공유, 데이터 격리, 권한과 DB 분리 방식을 살펴봅니다.

개인 블로그를 운영하며 겪은 기술 문제와 해결 경험을 정리합니다. 콘텐츠 관리, 빌드·배포, 보안과 성능 등 열 개 영역을 통해 작은 서비스에서 배울 수 있는 일을 살펴봅니다.

메시지를 처리한 뒤 삭제하는 큐와 기록을 보관하는 로그의 차이를 설명합니다. 중복 전달과 멱등성, 순서 보장, 처리 지연을 기준으로 메시지 큐를 비교합니다.

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

세션과 OAuth·OIDC 기반의 웹 인증 구조를 살펴봅니다. 토큰을 누가 사용하고 어디에 보관하는지, PKCE와 BFF가 어떤 역할을 하는지 설명합니다.

MySQL INSTANT DDL과 데이터 백필의 차이를 살펴봅니다. 기본값이 기존 행에 미치는 영향과 expand-contract 방식으로 무중단 전환을 준비하는 과정을 설명합니다.

유니코드 정규화로 문자열을 비교하고, 길이를 세는 단위에 따라 결과가 달라지는 이유를 설명합니다. 한글과 이모지 예제, IME 조합 중 입력 처리도 다룹니다.

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

테이블과 키, SQL부터 정규화·트랜잭션·인덱스까지 데이터베이스의 기본 개념을 설명합니다. 간단한 쿼리 예제로 개념을 연결하고, NoSQL과 데이터 분산 방식도 살펴봅니다.

Spring Bean과 의존성 주입을 React·TypeScript의 개념과 비교합니다. 웹 요청 처리와 DB 조회, 트랜잭션이 스프링에서 어떻게 이어지는지 설명합니다.

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

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

개별 컬럼과 JSON 컬럼을 선택할 기준을 살펴봅니다. 쿼리와 제약조건, 데이터 노출 범위, 기존 데이터를 채우는 비용을 비교합니다.

부분 수정 API에서 필드 생략과 null을 어떻게 해석할지 정리합니다. JSON Merge Patch와 JSON Patch를 비교하고, 수정할 필드를 지정하는 방식과 검증 예제를 다룹니다.

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

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

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

호출 방향을 기준으로 인바운드·아웃바운드 어댑터를 구분합니다. 이벤트 리스너와 fetch, props 콜백을 예로 호출 방향과 코드 의존성의 차이를 설명합니다.

헥사고날 아키텍처에서 도메인 모델을 DB와 프레임워크로부터 분리하는 이유를 설명합니다. React에 비유해 포트·어댑터를 이해하고, 코드 의존성을 제한하는 방법을 살펴봅니다.

XSS가 발생하는 원인과 CSP로 스크립트 실행을 제한하는 방법을 설명합니다. nonce·hash와 Report-Only 설정, CORS·CSRF와의 차이를 정리합니다.

데이터 마이그레이션 경험에서 출발해 ETL의 추출·변환·적재 단계와 검증, 실패 후 재실행, ELT와의 차이를 정리합니다.

TanStack Query가 쿼리 키로 캐시를 찾는 과정을 소스 코드로 살펴봅니다. 키의 직렬화와 부분 매칭, 데이터 갱신과 하이드레이션에서 주의할 점을 정리합니다.

React에서 별도로 저장할 필요가 없는 상태를 구분합니다. 최신 값 읽기, 파생 값 계산, Effect의 연쇄 실행 예제로 상태를 줄이는 기준을 살펴봅니다.

Docusaurus 블로그의 URL을 통일하고 검색에 노출할 페이지를 고른 경험을 정리합니다. 메타데이터와 구조화 데이터, Search Console에서 확인한 문제도 다룹니다.

웹뷰에서 뒤로가기를 한 번 눌렀는데 두 단계 이동하던 원인을 추적합니다. 웹과 네이티브 중 누가 뒤로가기를 실행할지 정하고 탐색 상태를 복원하는 방법을 설명합니다.

브라우저가 방문 기록을 추가·교체하고 이전 기록으로 이동하는 방식을 설명합니다. SPA 라우터가 그 기록을 화면으로 복원하는 과정도 살펴봅니다.

API에서 절대시각, 날짜, 지역 기준의 미래 일정을 어떻게 구분할지 살펴봅니다. 각 값의 의미에 맞는 DB 타입과 Temporal 사용법을 정리합니다.

JavaScript Date가 문자열을 해석하고 날짜를 출력·계산하는 규칙을 살펴봅니다. 타임존에 따른 차이와 Intl 사용법, SSR 하이드레이션 문제를 정리합니다.

절대시각과 지역 시각, 기간을 구분합니다. UTC와 오프셋, 타임존이 맡는 역할과 시간대 규칙을 담은 IANA tzdb를 살펴봅니다.

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

TypeScript의 태그 유니온과 브랜디드 타입으로 잘못된 상태를 줄이는 방법을 설명합니다. 입력 검증 결과를 타입에 담는 설계와 적용 범위를 예제로 살펴봅니다.

Ollama로 로컬에서 실행한 DeepSeek에 연결하는 VS Code 확장 프로그램을 만듭니다. Fireship 영상의 예제를 따라 채팅 화면과 API 요청을 구현한 기록입니다.

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

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

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

SVG를 img·CSS 배경·인라인·스프라이트로 사용하는 방식을 비교합니다. SVGO로 최적화하고, SVGR로 React 컴포넌트를 만들며 자산을 관리하는 방법을 정리합니다.

shadcn/ui가 컴포넌트 소스 코드를 프로젝트에 복사해 사용하는 방식을 살펴봅니다. 원문 예제를 바탕으로 컴포넌트 구조와 Tailwind CSS 스타일링을 설명합니다.

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

캐시노트플러스의 페이지 이동과 가입 전환율을 개선한 사례입니다. Next.js 서버에서 이동 경로를 정하고, 클릭·스크롤 데이터를 바탕으로 UI를 바꾼 과정을 설명합니다.

Next.js 배포 후 정적 파일을 찾지 못해 화면이 하얗게 나오던 문제를 해결한 기록입니다. assetPrefix와 별도 CDN으로 이전 배포의 파일도 제공하도록 구성했습니다.

사내 도구와 서비스의 링크를 한곳에 모은 KCD Works를 만들었습니다. 아이콘과 분류로 자원을 찾기 쉽게 정리하며, 개인의 창작이 동료의 업무에 도움이 된 경험을 나눕니다.

Next.js 페이지별 이름과 추적 설정을 JSON으로 관리하는 next-pathmap을 소개합니다. 페이지 파일을 읽어 목록을 만들고, 누락된 설정을 점검하는 과정을 설명합니다.

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

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

GA·Meta Pixel의 초기화가 늦어 이벤트가 유실되는 원인을 살펴봅니다. 이벤트 큐와 스크립트 로드 방식, 캐싱 등 해결책을 비교하고 적용 조건을 설명합니다.

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

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

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

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

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

Docker로 React 개발 환경을 구성하고 NGINX로 배포하는 과정을 정리한 2022년 튜토리얼입니다. 볼륨, 환경 변수, Docker Compose와 멀티 스테이지 빌드를 다룹니다.

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

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

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

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

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

Vuex로 전역 상태를 읽고 변경하는 방법을 예제로 설명합니다. 스토어를 모듈과 네임스페이스로 나누며, 기존 Vue 프로젝트의 상태 관리 구조를 살펴봅니다.

Promise 체인으로 좌표 조회와 국가 정보 API 요청을 연결합니다. 응답을 화면에 표시하고, 요청 실패를 처리하며, 브라우저 위치 정보를 사용하는 예제를 살펴봅니다.

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

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

마우스를 올린 위치의 이미지를 확대해 보여주는 뷰어를 JavaScript와 CSS로 만듭니다. 커서 좌표에 맞춰 확대 영역을 움직이고 이미지 경계를 처리하는 방법을 설명합니다.

버튼·체크박스·탭 등 UI 요소 32개의 이름과 용도를 예시로 살펴봅니다. Maria de la Riva의 글을 번역하고, 개발자와 디자이너가 나누는 UI 용어를 정리했습니다.

블로그 썸네일을 브라우저에서 편집하고 PNG로 저장하는 도구를 만들었습니다. 첫 토이 프로젝트의 기획과 디자인, HTML2Canvas를 이용한 구현 과정을 소개합니다.