Wonkook Lee · Product Engineer TechLog

이 응답은 누구 것인가요?

2026-08-11T00:00:00.000Z

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

뒤로가기 한 번에 두 칸씩 가는 이유는 뭘까요?

2026-08-02T00:00:00.000Z

웹뷰 퍼널에서 히스토리 스택이 꼬였습니다. 세션 히스토리가 실제로 어떤 자료구조인지, location과 history.state가 각각 무엇을 책임지는지, popstate는 언제 오고 언제 오지 않는지, 그리고 네이티브 back과 웹 히스토리가 겹칠 때 무엇을 계약으로 정해야 하는지를 정리합니다.

취소는 에러인가요? — 비동기 에러의 최후 방어선과 AbortController

2026-07-21T00:00:00.000Z

try/catch를 빠져나간 에러가 도착하는 곳(uncaught error / unhandledrejection), 그리고 AbortController로 취소한 작업이 왜 이 에러 채널을 타고 흐르는지, 정상 취소를 진짜 장애와 구분하는 법까지 깊게 다룹니다.

무엇을 상태로 두지 말아야 할까요?

2026-07-20T00:00:00.000Z

리액트에서 매일 만나는 세 가지 질문 — 이 값은 화면을 다시 그려야 하나, 이 값은 계산되는 값인가, 이 흐름은 상태 변화를 관찰해서 이어지나. 최신 값 참조·파생 상태·절차 실행이라는 세 원칙을 상태를 줄인다는 하나의 관점으로 묶어 풀어봅니다.

이 필드는 UTC여야 할까요?

2026-07-19T00:00:00.000Z

시간 필드를 API 계약에 어떻게 담을지 정리합니다. 절대시각과 로컬 날짜를 가르는 기준, 미래의 약속을 UTC로 저장하면 안 되는 이유, DB·서버·클라이언트의 책임 분담, 그리고 Temporal이 이 구분을 타입으로 강제하는 방식과 2026년 도입 현황까지 다룹니다.

왜 날짜만 넣었는데 하루 전이 나올까요?

2026-07-18T00:00:00.000Z

JavaScript Date는 숫자 하나에 로컬 타임존 렌즈를 덧씌운 타입입니다. 파싱·출력·산술에서 어긋나는 지점을 하나씩 짚고, Intl로 하는 정석과 SSR 하이드레이션 불일치까지 프론트엔드 실무 관점으로 정리합니다.

'오후 3시'는 언제인가요?

2026-07-17T00:00:00.000Z

시각에는 서로 다른 종류가 있습니다. 절대시각·벽시계시각·기간을 나누는 사고 모델부터 Epoch와 UTC의 계보, 오프셋과 타임존이 왜 다른 것인지, IANA tzdb가 왜 데이터베이스여야 하는지까지 프론트엔드 관점으로 정리합니다.

타입스크립트로 잘못된 상태 막기

2026-07-13T00:00:00.000Z

런타임에서야 터지는 버그의 상당수는 애초에 타입이 그 상태를 표현하도록 허락했기 때문에 생깁니다. 상태 공간을 좁혀 잘못된 상태를 컴파일 단계에서 봉쇄하는 설계 원칙 'make illegal states unrepresentable'을, 태그 유니온·브랜디드 타입·parse don't validate 세 축으로 풀어봅니다.

데이터베이스 기본 개념과 용어, 한 번에 정리하기

2026-07-12T00:00:00.000Z

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

스프링(Spring)은 프론트엔드의 무엇과 닮았을까요?

2026-07-12T00:00:00.000Z

빈과 컨테이너, DI·IoC, AOP, 웹 요청 처리, JPA·트랜잭션, 설정·프로파일, 테스트, 스프링 부트까지 — 백엔드를 처음 접하는 프론트엔드 개발자를 위해 스프링의 핵심을 React·TypeScript·데코레이터 같은 익숙한 개념에 대응시켜 통째로 정리합니다.

백엔드 도구들, FE로 치면 무엇일까요?

2026-06-30T00:00:00.000Z

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

DB 스키마에도 git이 필요할까요?

2026-06-29T00:00:00.000Z

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

컬럼일까요, JSON 컬럼일까요?

2026-06-28T00:00:00.000Z

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

null은 비우기일까요, 건드리지 않기일까요?

2026-06-27T00:00:00.000Z

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

Response는 모델을 닮아야 할까요?

2026-06-26T00:00:00.000Z

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

이 API는 누가 부르나요?

2026-06-25T00:00:00.000Z

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

그 로직은 어디에 살아야 할까요?

2026-06-24T00:00:00.000Z

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

DB 조회는 왜 아웃바운드일까요?

2026-06-23T00:00:00.000Z

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

도메인 모델은 왜 DB를 몰라야 할까요?

2026-06-22T00:00:00.000Z

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

웹 보안, 신뢰 경계부터 CSP까지

2026-06-13T00:00:00.000Z

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

쿼리 키는 어떻게 캐시 주소가 되나요?

2026-03-17T00:00:00.000Z

TanStack Query의 캐시는 결국 Map 하나입니다. 쿼리 키가 JSON.stringify를 거쳐 해시 문자열이 되는 과정, 구조적 공유와 dehydrate/hydrate의 직렬화 경로를 소스 코드로 따라가면서 Map·Date·클래스 인스턴스가 조용히 형태를 잃는 지점을 짚습니다.

이 블로그를 운영하며 배운 SEO

2025-09-14T00:00:00.000Z

정적 사이트 생성기로 만든 블로그를 반년 넘게 운영하며 검색 노출을 챙긴 과정을 정리합니다. 메타데이터와 Open Graph, 구조화 데이터(JSON-LD), 사이트맵과 크롤 예산, 후행 슬래시가 부른 리디렉트 문제, 그리고 Search Console로 확인하기까지 — 순서대로 짚습니다.

Ollama과 Self-hosting DeepSeek으로 간단한 VS Code Extension 만들기

2025-02-02T00:00:00.000Z

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

tailwindcss 4.0 무엇이 달라졌나요?

2025-01-26T00:00:00.000Z

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

왜 Authorization "Bearer"인가요?

2025-01-21T00:00:00.000Z

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

npm install시 —force와 —legacy-peer-deps은 왜 사용할까?

2025-01-18T00:00:00.000Z

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

웹 환경에서 SVG 더 잘 이해하고 사용하기

2025-01-15T00:00:00.000Z

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

shadcn/ui 핵심 개념과 아키텍처 이해하기

2024-10-18T00:00:00.000Z

이 글에서는 shadcn/ui의 핵심 개념과 아키텍처를 요약합니다. Headless UI 기반의 컴포넌트 구조, Tailwind CSS 스타일링 방식, 그리고 디자인 시스템을 직접 구축하는 철학까지, shadcn/ui가 프런트엔드 개발 방식에 가져올 변화를 살펴봅니다.

TypeScript가 JSX를 변환하는 방법과 JSX Transform에 대해

2024-07-19T00:00:00.000Z

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

웹 퍼포먼스 최적화와 유저 행동 분석으로 전환율을 끌어올린 방법

2024-06-25T00:00:00.000Z

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

Next.js 서버 인스턴스 배포할때 나타나는 화이트아웃 현상 트러블 슈팅

2024-04-11T00:00:00.000Z

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

순수한 창작의 즐거움이 조직의 생산성으로 이어질 수 있을까?

2024-01-24T00:00:00.000Z

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

직접 만든 라이브러리로 Next.js 페이지 메타 정보 관리하기

2023-12-06T00:00:00.000Z

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

코드의 유지보수성과 확장성을 결정하는 응집도와 결합도

2023-08-12T00:00:00.000Z

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

WAI-ARIA란 무엇인가요?

2023-05-24T00:00:00.000Z

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

서드파티 스크립트 초기화가 늦어질 때 어떻게 해결할까요?

2023-05-22T00:00:00.000Z

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

Lambda 스케줄링으로 매일 아침 자동으로 노션 페이지 만들기

2023-04-23T00:00:00.000Z

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

Canvas API를 이용한 노란우산공제 가입서비스 자필 서명 이미지 생성 모듈 구현기

2023-04-13T00:00:00.000Z

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

행렬의 개념과 연산 및 코딩테스트

2023-02-19T00:00:00.000Z

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

자바스크립트 Map을 Object 대신 사용해야 할 때는 언제일까요?

2022-12-11T00:00:00.000Z

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

웹앱의 사용성을 높이는 Web Worker와 Service Worker에 대해 알아보기

2022-12-04T00:00:00.000Z

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

프론트엔드 개발자를 위한 Docker로 React 개발 및 배포하기

2022-10-22T00:00:00.000Z

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

정규표현식(Regular Expression) 반복 패턴 활용 | Part 2

2022-09-14T00:00:00.000Z

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

정규표현식(Regular Expression) 기초부터 실전 활용까지 | Part 1

2022-06-01T00:00:00.000Z

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

DocumentFragment 객체는 무엇이며, 왜 써야 할까?

2022-05-19T00:00:00.000Z

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

로컬에서 LeetCode 테스트 환경 설정하기

2022-05-19T00:00:00.000Z

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

HEIC 이미지를 JPEG로 변환하기 | heic-convert 사용법

2022-05-15T00:00:00.000Z

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

Vuex와 함께하는 더 나은 전역 상태 관리

2022-03-05T00:00:00.000Z

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

자바스크립트 Promise 체인 이해하기 | 좌표로 국가 정보 가져오기

2021-09-19T00:00:00.000Z

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

ES6 Modules: Named Export vs. Default Export

2021-09-18T00:00:00.000Z

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

자바스크립트의 비동기 처리와 AJAX, API 개념의 이해

2021-09-13T00:00:00.000Z

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

Image Zoom on Hover 이미지 뷰어 바닐라 자바스크립트로 구현하기

2021-08-27T00:00:00.000Z

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

프론트엔드 개발자라면 반드시 알아두어야 할 32가지의 UI 요소

2021-08-15T00:00:00.000Z

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

썸네일 메이커(Thumbnail Maker) 만들기

2021-08-10T00:00:00.000Z

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