Blog

프로젝트에서 사용된 기술 스택과 개발 경험을 공유합니다.

Framer 사이트 하나를 여러 브랜드 도메인 루트로 보여주기 — CloudFront + Functions 리버스 프록시

Framer로 통합 관리하는 랜딩에서 특정 섹션만 별도 브랜드 도메인 루트로 노출하고 싶을 때 쓴 CloudFront Functions rewrite 패턴.

Sun Apr 19 2026

AWS

CloudFront

CloudFrontFunctions

Framer

Proxy

DNS

EAS 없이 S3로 React Native CodePush 자체 구축하기

React Native 앱 OTA 배포 인프라를 유료 도구(EAS) 없이 AWS S3로 직접 구축하고, 여러 앱에 이식해 배포 표준을 만든 경험.

Sun Apr 19 2026

ReactNative

CodePush

OTA

AWS

Infra

토스 앱 웹뷰에서 대량 리스트 스크롤을 TanStack Virtual로 최적화한 이야기

수백 개의 메뉴 아이템이 달린 매장 페이지에서 발생한 초기 렌더 지연·스크롤 프레임 드롭 문제를 TanStack Virtual로 해결한 경험.

Sun Apr 19 2026

ReactNative

Performance

TanStack

VirtualScroll

WebView

컴포넌트 맵핑과 속성 관리 개선

도형 렌더링 최적화를 위한 컴포넌트 맵핑 기법과 공통 속성 관리 방식을 알아봅니다.

Tue Feb 11 2025

React

TypeScript

ComponentMapping

Canvas

Zustand를 활용한 Canvas에서의 Undo/Redo 설계

Zustand 상태 관리에서 Undo/Redo 기능을 효율적으로 구현하는 방법과 이에 따른 장점 및 설계 의도를 설명합니다.

Tue Feb 11 2025

React

Zustand

상태관리

Undo/Redo

Canvas

Konva

Zustand를 활용한 로컬 스토리지 상태 관리

Zustand를 활용하여 로컬 스토리지에 상태를 저장하고 불러오는 방법을 알아봅니다.

Tue Feb 11 2025

React

Zustand

LocalStorage

상태관리

Cloudflare Turnstile과 Resend를 이용한 로봇 체크 및 이메일 전송 구현

Cloudflare Turnstile을 사용하여 로봇을 검증하고, Resend 라이브러리를 이용해 안전하게 이메일을 전송하는 방법에 대해 알아봅니다.

Thu Jan 02 2025

Cloudflare

Turnstile

Resend

Security

TypeScript

Server

API

CAPTCHA

Verification

Spam

Robot

SendGrid

Next Safe Action으로 안전한 서버 액션 구현하기

Next.js와 Next Safe Action을 사용하여 타입 안전하고 보안 강화를 위한 서버 액션을 구현하는 방법을 알아봅니다.

Thu Jan 02 2025

Next.js

Next Safe Action

TypeScript

서버 액션

보안

카톡에 링크보내면 나오는 "그거" 어떻게하는거에요?

링크를 카카오톡에 보내면 나오는 미리보기 이미지와 설명을 설정하는 방법을 알아봅니다.

Thu Jan 02 2025

OpenGraph

MetaTag

카카오톡

미리보기

MDX로 SSR 기반 블로그 만들기

Next.js와 Content Collections를 활용해 SSR 기반 MDX 블로그를 구축하는 방법을 알아봅니다.

Thu Jan 02 2025

MDX

Next.js

SSR

Content Collections

마크다운 파일

Zod와 React Hook Form으로 벨리데이션을 효율적으로 관리하기

Zod와 React Hook Form을 활용해 벨리데이션 로직을 단순화하고 강력한 폼을 만드는 방법을 알아봅니다.

Thu Jan 02 2025

Zod

React Hook Form

Validation