도구보다
쓰는 방식

도메인 타입을 먼저 정의하고 그 위에서 화면을 만듭니다. 제네릭과 유틸리티 타입으로 반복을 줄이고, 외부 응답은 반드시 경계에서 우리 타입으로 변환합니다.

쓴 곳 · 모든 프로젝트

최신 ECMAScript 문법과 비동기 흐름, 이벤트 루프의 동작을 이해하고 씁니다. 브라우저가 실제로 무엇을 하는지 설명할 수 있는 수준을 목표로 합니다.

쓴 곳 · 모든 프로젝트

시멘틱 마크업으로 문서 구조를 만듭니다. 이미지 안에 갇힌 텍스트를 마크업으로 꺼내는 작업으로 실제 검색 유입을 바꾼 경험이 있습니다.

쓴 곳 · namhae-german-village, 모든 프로젝트

레이아웃(그리드·플렉스), 반응형, 애니메이션을 직접 다룹니다. 유틸리티 프레임워크를 쓰더라도 그 아래에서 무슨 일이 일어나는지 알고 씁니다.

쓴 곳 · 모든 프로젝트

중첩·믹스인·변수로 스타일 시트를 구조화합니다. Tailwind 이전 프로젝트의 주력 도구였습니다.

쓴 곳 · dpangz

App Router 기반으로 서버 컴포넌트와 클라이언트 컴포넌트의 경계를 나눕니다. ISR과 on-demand revalidate로 '자주 안 바뀌지만 가끔 바뀌는' 콘텐츠를 다루고, 서버 액션으로 데이터 변경을 처리합니다.

쓴 곳 · namhae-german-village, roowa, depos, recodelog, uxplan

컴포넌트 경계와 리렌더 범위를 의식하며 설계합니다. 훅으로 로직을 분리하되, 훅이 컴포넌트의 상태를 대신 숨기는 도구가 되지 않게 합니다.

쓴 곳 · uhc-backoffice, break, 모든 프로젝트

expo-router로 화면을 구성하고 네이티브 모듈(알림·햅틱·이미지)을 붙입니다. iOS·Android 양쪽 빌드와 배포 과정을 직접 다룹니다.

쓴 곳 · duedate, dev-handbook, festival-moa

SPA 프로젝트의 개발 환경과 프로덕션 빌드를 구성합니다. 서버 렌더링이 필요 없는 백오피스에는 Next.js 대신 이쪽을 택합니다.

쓴 곳 · uhc-backoffice

가벼운 API 서버를 작성하고 Zod OpenAPI로 스펙과 타입을 한 소스에서 뽑습니다.

쓴 곳 · festival-moa

MVC 구조 위에서 뷰와 프론트엔드 자산을 다뤘습니다. 백엔드 프레임워크의 렌더링 흐름 안에서 UI를 붙이는 경험.

쓴 곳 · dpangz

클라이언트가 주인인 상태를 담습니다. selector로 필요한 필드만 구독해 리렌더가 번지지 않게 하는 것이 핵심 사용법입니다.

쓴 곳 · depos, goldie-bid, namhae-german-village

런타임 검증과 타입을 한 스키마에서 뽑습니다. 클라이언트와 서버가 같은 스키마를 쓰게 해 규칙이 두 벌이 되는 것을 막습니다.

쓴 곳 · portfolio, goldie-bid, uxplan, festival-moa

인터셉터로 인증 토큰과 공통 에러 처리를 한 곳에 모읍니다.

쓴 곳 · uhc-backoffice, festival-moa

서버가 주인인 데이터를 담당합니다. 응답을 클라이언트 스토어로 복사하지 않는 것을 규칙으로 삼습니다.

쓴 곳 · goldie, goldie-bid, dev-handbook, festival-moa

가벼운 데이터 페칭과 캐싱. 백오피스처럼 화면 수가 많고 요구가 단순한 곳에서 썼습니다.

쓴 곳 · uhc-backoffice, break

비제어 입력으로 폼 리렌더를 억제하고, Zod resolver로 검증을 붙입니다.

쓴 곳 · uhc-backoffice, uxplan

스키마를 코드로 정의하고 마이그레이션을 관리합니다. 프론트엔드 개발자로서 데이터 계층까지 직접 다뤄 본 경험.

쓴 곳 · timelog, duedate, dev-handbook, festival-moa

디자인 토큰을 CSS 변수로 정의하고 유틸리티로 조립합니다. v4의 @theme·@utility로 프로젝트 고유 어휘를 만듭니다.

쓴 곳 · 이 사이트, 대부분의 프로젝트

복사해 오는 방식이라 프로젝트 디자인에 맞게 뜯어고칠 수 있습니다. 접근성 처리는 가져오고 외형은 새로 입히는 식으로 씁니다.

쓴 곳 · 이 사이트, depos, recodelog

컴포넌트 단위 스타일 격리. 유틸리티로 표현하기 어려운 복잡한 애니메이션에는 여전히 이쪽이 낫습니다.

쓴 곳 · portfolio

스크롤 리빌, 레이아웃 트랜지션, 제스처를 다룹니다. reduced-motion을 항상 함께 고려합니다.

쓴 곳 · 이 사이트, recodelog

컴포넌트를 앱 없이 확인합니다. UXPlan에서는 문서가 아니라 '선택지 카탈로그'로 용도를 바꿔 쓰고 있습니다.

쓴 곳 · uxplan

2D 캔버스로 인터랙티브 배경과 게임 UI를 그립니다. Lottie는 용량 비용을 계산하고 씁니다.

쓴 곳 · dpangz, portfolio, 이 사이트

Next.js 프로젝트의 기본 배포처. 프리뷰 배포로 리뷰를 받는 흐름을 씁니다.

쓴 곳 · depos, recodelog, roowa, roowaint

브랜치 전략과 리뷰 흐름을 팀에 맞춰 운영합니다. 커밋 단위를 의미로 나누는 것을 중요하게 봅니다.

쓴 곳 · 모든 프로젝트

포맷과 규칙을 도구에 맡기고 리뷰에서는 설계만 이야기하게 만듭니다.

쓴 곳 · 모든 프로젝트

패키지 설치와 스크립트 실행. 최근 프로젝트는 bun으로 옮기고 있습니다.

쓴 곳 · 모든 프로젝트

Amplify로 배포하고 Route 53으로 도메인을 관리합니다. S3에 정적 자산을 둡니다.

쓴 곳 · namhae-german-village

개발용·배포용 이미지를 분리해 구성합니다. 레이어 캐시를 의식하며 Dockerfile을 씁니다.

쓴 곳 · portfolio

색인 상태와 검색 성능을 확인하고, 사이트맵 제출과 색인 요청을 관리합니다.

쓴 곳 · depos, namhae-german-village, recodelog

국내 서비스에서는 네이버 노출이 실제 유입을 좌우합니다. 사이트 등록과 최적화를 함께 다룹니다.

쓴 곳 · depos, namhae-german-village

유입 경로와 이탈 지점을 확인해 어디를 고칠지 정합니다.

쓴 곳 · depos, namhae-german-village

JSON-LD로 페이지의 의미를 명시해 검색 결과의 표현을 개선합니다.

쓴 곳 · depos, 이 사이트