쓰는 도구와
쓰는 방식

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

쓴 곳 · 모든 프로젝트

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

쓴 곳 · 모든 프로젝트

시멘틱 마크업으로 문서 구조를 짭니다. 이미지에 들어 있던 글자를 텍스트로 바꿔서 검색 유입이 달라진 적이 있습니다.

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

그리드·플렉스 레이아웃, 반응형, 애니메이션을 직접 짭니다. Tailwind 같은 유틸리티 프레임워크를 써도 CSS가 어떻게 동작하는지 알고 씁니다.

쓴 곳 · 모든 프로젝트

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

쓴 곳 · dpangz

App Router로 서버 컴포넌트와 클라이언트 컴포넌트를 나눠서 씁니다. 자주 바뀌지는 않아도 가끔 바뀌는 콘텐츠는 ISR과 on-demand revalidate로, 데이터 변경은 서버 액션으로 처리합니다.

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

컴포넌트를 어디서 나눌지, 어디까지 리렌더되는지 생각하면서 설계합니다. 훅으로 로직을 분리하되, 컴포넌트가 어떤 상태를 쓰는지 훅 뒤에 가려지지 않게 합니다.

쓴 곳 · glovis-cbi-admin, 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-partner, namhae-german-village

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

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

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

쓴 곳 · glovis-cbi-admin, uhc-backoffice, festival-moa

서버에서 받아 오는 데이터를 맡깁니다. 응답을 클라이언트 스토어로 복사하지 않는 것을 규칙으로 두고 있습니다.

쓴 곳 · glovis-cbi-admin, goldie, goldie-partner, dev-handbook, festival-moa

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

쓴 곳 · uhc-backoffice, break

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

쓴 곳 · glovis-cbi-admin, uhc-backoffice, uxplan

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

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

디자인 토큰을 CSS 변수로 정의하고 유틸리티 클래스로 조립합니다. v4의 @theme·@utility로 프로젝트마다 필요한 클래스를 따로 만들어 씁니다.

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

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

쓴 곳 · 이 사이트, depos, recodelog

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

쓴 곳 · portfolio

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

쓴 곳 · 이 사이트, recodelog

컴포넌트를 앱 없이 따로 확인합니다. UXPlan에서는 문서 대신 '선택지 카탈로그'로 쓰고 있습니다.

쓴 곳 · uxplan

2D 캔버스로 인터랙티브 배경과 게임 화면을 그립니다. 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, 이 사이트