Archive — Load 28

2026

Latest

2026.05.20·5 min read

데이터 모델링 기초: 개념 모델

프론트엔드 개발자가 DB를 다룰 때는 보통 만들 화면에 필요한 데이터를 중심으로 테이블을 설계합니다. 화면이 먼저 있고, 거기에 맞춰 컬럼을 붙이는 방식입니다. 데이터 아키텍처(DA)는 시선이 반대입니다. 사업이 다루는 데이터 전체를 먼저 정리하고,…

05.20

데이터 모델링 기초: 논리 모델 (식별자 · 관계 · M:N 해소)

지난 글에서는 데이터 모델링의 첫 단계인 개념 모델까지 다뤘습니다. 엔터티·속성·관계라는 세 단어로 사업 전체의 데이터 윤곽을 잡는 단계였습니다.

data-modeling database architecture6 min

05.20

Tokio File Write Internals

Tokio로 파일을 쓸 때 가장 먼저 알아야 할 사실이 있습니다.

rust tokio3 min

05.18

Next.js 16 캐시 핸들러와 Redis 리모트 캐시 연동

Next.js 16 앱을 두 대 이상의 인스턴스로 띄워놓고 revalidateTag('post:5')를 호출하면, 새로고침을 여러 번 했을 때 어떤 요청은 새 데이터, 어떤 요청은 옛 데이터가 섞여 나옵니다. 무효화 호출이 도달한 한 인스턴스에서만…

next.js redis cache rsc11 min

05.17

Next.js Pages Router vs App Router 렌더링 모델 비교

Next.js의 App Router는 Pages Router와 단순히 "최신 버전"의 관계가 아닙니다. 렌더링 모델 자체가 다르고, 같은 용어("Pre-rendering")가 서로 다른 범위를 가리킵니다. 이 글은 두 라우터의 차이를 용어 정의부터…

next.js react rsc rendering24 min

05.12

모바일 디자인 시스템에서 CSS를 의도의 언어로 다루기

CSS는 시각적 결과만 맞으면 통과하는 코드처럼 다뤄지기 쉽습니다. padding: 12px 16px은 분명히 동작합니다. 그러나 이 코드는 "왜 12px인지", "왜 좌우와 상하가 다른지", "다른 언어가 들어오면 괜찮은지"에 대해 아무것도 말하지…

css design-system a11y i18n12 min

03.20

TypeScript 제네릭의 역방향 추론 한계와 infer 패턴

제네릭 함수에서 타입 파라미터가 여러 개일 때, TypeScript가 일부 타입을 제대로 추론하지 못하는 경우가 있습니다. 타입 체크 자체는 통과하지만 에러 메시지가 불명확하거나, 반환 타입이 unknown으로 폴백되는 현상입니다. 이 글에서는 왜…

typescript generic type-system5 min

03.18

Entire: AI 에이전트 시대의 컨텍스트 버전 관리

AI 에이전트로 코드를 작성하다 보면, 에이전트가 잘못된 방향으로 빠지는 순간이 옵니다. 수십 턴의 대화 끝에 원래 의도와 전혀 다른 코드가 나오고, 되돌리려면 어디서부터 잘못됐는지 추적해야 합니다. Git은 코드의 변경 이력을 관리하지만,…

developer-tools git entire5 min

03.14

Claude Code 스킬로 React 컨벤션을 구조적으로 강제하기

AI 코드 어시스턴트에게 "React 컴포넌트 만들어줘"라고 말하면, 코드는 나옵니다. 하지만 내 팀의 컨벤션대로 나올까요? props 네이밍, 폴더 구조, 상태관리 패턴, 테스트 방식 — 매번 같은 피드백을 반복하고 있다면, 문제는 AI가 아니라…

claude react dx9 min

03.10

React 로딩 UX 전략

로딩 UI는 단순한 스피너 선택의 문제가 아닙니다. 로딩을 언제 보여줄지, 아예 안 보여줄 수 있는지, 그리고 데이터가 실시간으로 바뀔 때는 어떻게 갱신할지까지 고려해야 합니다. 이 글에서는 로딩 플리커 문제부터 시작해서, 캐시와 실시간 데이터까지…

react ux tanstack-query loading11 min

03.09

JavaScript Map vs Object Deep Dive

JavaScript에서 키-값 쌍을 저장할 때, 대부분 {} 객체를 씁니다. 그런데 ES6에서 Map이 추가되었습니다. 왜 Object가 있는데 Map을 따로 만들었을까요? "둘 다 키-값 저장소 아니야?"라고 생각하기 쉽지만, 내부 구조부터…

javascript data-structure performance6 min

03.09

Nitro 딥다이브 - UnJS의 서버 엔진

프론트엔드 개발자라면 서버를 구축할 때 Express, Fastify, Hono 같은 프레임워크를 떠올릴 것입니다. 하지만 배포 환경에 구애받지 않는 서버를 만들고 싶다면 어떨까요? Node.js, Cloudflare Workers, Vercel,…

nitro unjs server5 min

03.05

Passkey & WebAuthn Deep Dive

Google에 로그인할 때 비밀번호 대신 지문을 찍는 경험을 해본 적이 있을 겁니다. 비밀번호를 입력하지도 않았는데 로그인이 됩니다. 이게 passkey입니다.

security authentication webauthn passkey fido214 min

02.19

BMAD Method Deep Dive

AI 시대의 문서 기반 개발 프레임워크 BMAD Method를 분석합니다

ai agile development bmad spec-driven5 min

02.18

Schema 기반 Encoding/Decoding 비교

검증 라이브러리를 사용할 때 한 가지 당연하게 받아들이는 전제가 있습니다. 검증할 때의 타입과 검증된 결과의 타입이 같다는 것입니다. Zod에서 z.string()으로 검증하면 입력도 string이고 결과도 string입니다. z.number()로…

effect typescript schema validation zod8 min

02.17

OAuth Deep Dive

OAuth 2.0 이전에는 제3자 앱이 사용자의 리소스에 접근하기 위한 표준 위임 프로토콜이 없었습니다. 2006~2007년경 Twitter API를 연동하는 서드파티 클라이언트들은 사용자의 Twitter 아이디와 비밀번호를 직접 입력받아 저장하는…

oauth security authentication10 min

02.17

브라우저가 같은 사이트를 판단하는 기준

브라우저의 SameSite 쿠키 정책은 eTLD+1을 기준으로 same-site 여부를 판단합니다. TLD, eTLD, eTLD+1 각각의 정의와 관계를 정리합니다.

security cookie browser dns5 min

02.16

Cookie Deep Dive

쿠키와 JavaScript 메모리는 토큰 저장소로서 보안 특성이 다릅니다. 쿠키는 자동 전송되어 CSRF에 노출되고, 메모리는 JavaScript로 접근 가능해 XSS에 노출됩니다. 각 위협의 구조와 방어 수단을 정리합니다.

security cookie csrf xss oauth enterprise10 min

02.11

데이터 기반 함수형 리팩토링

리팩토링을 하려면 먼저 코드의 구조를 파악해야 합니다. 어떤 변수가 어디서 변하는지, 어떤 연산이 부수효과를 일으키는지, 어떤 값이 어떤 입력에 의존하는지. 이걸 사람이 눈으로 읽어서 판단하면 빠뜨리는 부분이 생기고, AI에게 "이 코드…

react functional-programming refactoring ai6 min

02.10

React Compiler 동작 원리

React는 상태가 바뀔 때마다 함수를 다시 실행합니다. 성능 최적화는 useMemo, useCallback, React.memo로 개발자가 직접 해야 했고, 이 수동 메모이제이션의 한계를 해결하기 위해 React Compiler가 등장했습니다.

react compiler optimization5 min

02.02

CSS word-break 정리

한글은 컨테이너 너비에 맞춰 알아서 줄바꿈되는데, 영문이나 숫자는 셀을 뚫고 나갑니다. 이건 CSS가 아니라 유니코드 명세에서 비롯된 동작입니다.

css4 min

02.02

DatePicker 컴포넌트 설계

design system에서 직접 입력 가능한 DatePicker를 설계하고 구현한 과정을 정리합니다.

react design-system component5 min

02.01

AI 시대, frontend testing 전략

AI로 코드를 작성하는 시대에 가장 중요한 건 test code입니다. AI가 만든 코드가 의도대로 동작하는지 검증할 수 있어야 하니까요. 그런데 frontend에서 testing은 여전히 어렵습니다.

testing effect-ts react3 min

01.31

line-height는 짝수여야 한다

design system에서 font size별 line-height를 설정할 때 짝수 값을 써야 하는 이유에 대해 정리합니다.

css design-system3 min

01.31

Next.js 스트리밍 SSR: Lambda 응답 방식의 이해와 SST

최근 서비스의 SSR 성능을 개선하면서 Next.js의 스트리밍 렌더링을 적용해보려 했습니다. 로컬에서는 Suspense와 스트리밍이 의도대로 작동했지만, AWS Amplify에 배포하자 전혀 다른 결과가 나왔습니다.

next.js ssr aws streaming4 min

2025

03.21

WebSocket with Protocol Buffers

최근 실시간 협업 서비스를 개발했던 경험을 토대로 기존 REST API 기반 아키텍처로는 몇 가지 심각한 한계에 대해 인지하게 되었습니다.

websocket protobuf grpc6 min

03.19

Effect functional programming

주변의 개발자 분들과 리액트와 DI에 대한 이야기를 한 적이 있습니다.

effect typescript functional programming4 min

03.16

Building Context-Query Library

리액트에서는 역활 별로 컴포넌트를 나누어 재사용성과 유지보수성을 높일 수 있습니다. 이때 각 컴포넌트 간의 상태를 공유하는 여러가지 방법이 있습니다.

react context query4 min

02.15

Dynamic import in Next.js

Dynamic import를 이용하면 비동기적으로 데이터를 불러 올 수 있습니다.

react next.js2 min

02.15

Next.js Hidden Optimizations

Next.js는 많은 기능을 제공합니다. 그 중 우연히 발견한 최적화 과정에 대해 알아보겠습니다.

next.js optimization2 min

02.15

Styled components with SSR

React에서 스타일을 입히는 방법은 여러가지가 있습니다. 그 중에서 CSS-in-JS는 JavaScript를 사용하여 컴포넌트의 스타일을 정의하는 패턴입니다. styled-components나 emotion과 같은 라이브러리들이 이 패턴을 구현하고…

next.js ssr1 min

02.11

PNPM v10 braking changes

본 글은 PNPM 문서와 조사한 자료를 바탕으로 claud.ai가 작성한 글입니다

pnpm2 min

02.11

PNPM vs Yarn Berry

Yarn Berry와 pnpm 모두 빠른 속도와 효율적인 디스크 사용을 목표로 하지만 내부 동작 방식이 다릅니다.

pnpm yarn2 min

02.11

Remix and Qwik Exploration

Next.js는 React 기반 SSR의 대표로 인지되고 있지만 복잡성과 무거운 번들 크기 등의 문제점도 존재합니다.

remix qwik ssr4 min

01.21

Why React Created Functional Components

프론트엔드 프레임워크나 라이브러리에서는 컴포넌트를 작성 할 때, 보통 두가지 방법으로 만들 수 있습니다.

react function2 min

01.20

React Fiber Architecture

리액트의 렌더링 과정은 리액트 엘리먼트에서 시작합니다.

react fiber reconciliation rendering3 min

01.10

Vanilla Extract

Vanilla Extract을 사용해본 계기는 Next.js의 앱 라우터 환경에서 기존 CSS in js 라이브러리들의 한계를 느꼈기 때문입니다.

vanilla-extract css5 min

01.04

Linear Function Graph

Visualization and Analysis of Linear Functions

math1 min

01.02

How to parse String?

Exploring String Parsing

rust unicode5 min

2024

12.02

Lessons Learned from My Side Project

Next.js: The Good, The Bad, and The Surprising

next.js side-project3 min

11.19

Rendering Strategies

요즘들어 SSR에 관한 이야기가 많이 노출되고 있고 실제 서비스에서 SEO의 중요성으로 인해서 SSR을 도입하는 회사들이 많아지고 있습니다.

rendering3 min

11.19

Understanding Concurrency Types in Rust

Exploring the concurrency types in Rust

rust1 min

11.19

Rust File I/O

Exploring different file I/O handling methods in Rust

rust1 min

08.28

Enum and const enum

Comparing enum and const enum in TypeScript: How to choose the best option for your project

typescript2 min

08.25

Infer

Exploring the infer keyword in TypeScript: How to use it effectively for more precise type inference

typescript2 min

08.16

Tangent

Exploring the concept of the tangent and its application in mathematics

math1 min

08.13

Cubic-bezier

Description of the cubic-bezier curve function

math2 min

08.13

Linear Interpolation

Exploring the concept of linear interpolation and its mathematical proof

math3 min

08.09

Yarn

Exploring the concept of Yarn and its features

yarn1 min

07.29

Read GraphQL docs

Exploring the concept of GraphQL and its benefits

graphql3 min

04.19

ESLint Boundaries plugin

Creating an ESLint plugin to enforce boundaries between packages in a monorepo

eslint3 min

04.19

Git commit strategy

Exploring different strategies for managing Git commit messages to improve collaboration and code quality

git2 min

04.11

Tanstack Query for Angular

회사에서는 Angular과 일렉트론을 기반으로 협업 툴을 웹과 앱으로 개발 중입니다.

react tanstack2 min

03.21

Multi-Account Git Setup Guide Using SSH

A comprehensive guide to configuring multiple Git accounts using SSH keys

git2 min

01.05

2023 Reflection

A reflection on 2023

reflection2 min

2023

12.03

Advanced Required type

Learn how to create and implement advanced Required types in TypeScript for better type safety and validation

typescript1 min

모든 글을 읽으셨습니다 ✦

Writing on code & systems.

데이터 모델링 기초: 개념 모델

데이터 모델링 기초: 논리 모델 (식별자 · 관계 · M:N 해소)

Tokio File Write Internals

Next.js 16 캐시 핸들러와 Redis 리모트 캐시 연동

Next.js Pages Router vs App Router 렌더링 모델 비교

모바일 디자인 시스템에서 CSS를 의도의 언어로 다루기

TypeScript 제네릭의 역방향 추론 한계와 infer 패턴

Entire: AI 에이전트 시대의 컨텍스트 버전 관리

Claude Code 스킬로 React 컨벤션을 구조적으로 강제하기

React 로딩 UX 전략

JavaScript Map vs Object Deep Dive

Nitro 딥다이브 - UnJS의 서버 엔진

Passkey & WebAuthn Deep Dive

BMAD Method Deep Dive

Schema 기반 Encoding/Decoding 비교

OAuth Deep Dive

브라우저가 같은 사이트를 판단하는 기준

Cookie Deep Dive

데이터 기반 함수형 리팩토링

React Compiler 동작 원리

CSS word-break 정리

DatePicker 컴포넌트 설계

AI 시대, frontend testing 전략

line-height는 짝수여야 한다

Next.js 스트리밍 SSR: Lambda 응답 방식의 이해와 SST

WebSocket with Protocol Buffers

Effect functional programming

Building Context-Query Library

Dynamic import in Next.js

Next.js Hidden Optimizations

Styled components with SSR

PNPM v10 braking changes

PNPM vs Yarn Berry

Remix and Qwik Exploration

Why React Created Functional Components

React Fiber Architecture

Vanilla Extract

Linear Function Graph

How to parse String?

Lessons Learned from My Side Project

Rendering Strategies

Understanding Concurrency Types in Rust

Rust File I/O

Enum and const enum

Infer

Tangent

Cubic-bezier

Linear Interpolation

Yarn

Read GraphQL docs

ESLint Boundaries plugin

Git commit strategy

Tanstack Query for Angular

Multi-Account Git Setup Guide Using SSH

2023 Reflection

Advanced Required type