프론트엔드 개발자 세호입니다. 매일 조금씩 배우고, 가끔 삽질하고, 그 과정을 솔직하게 남깁니다.
147
작성한 글
63
코드 스니펫
24.8K
총 조회수
2년+
운영 기간
실무에서 겪은 시행착오와 해결법을 정리했습니다
App Router가 안정화되면서 서버 컴포넌트 활용법도 많이 바뀌었다. 핵심은 단순하다. 데이터 패칭은 서버 컴포넌트에, 인터랙션은 클라이언트 컴포넌트에. 가장 흔한 실수는 서버 컴포넌트 안에서 useState를 호출하는 것이다. 인터랙티브 요소를 별도 파일로 추출하고 "use client"를 상단에 선언하면 된다. Server-to-Client Composition 패턴을 쓰면 클라이언트 번들 크기를 줄이면서도 인터랙션을 유지할 수 있다.
Deno 런타임 위에서 돌아가는 Edge Functions는 생각보다 쓸만하다. Cold start가 거의 없고, TypeScript를 네이티브로 지원하며, Supabase 클라이언트를 바로 임포트해서 DB 쿼리를 날릴 수 있다. 주의할 점은 npm 패키지 호환성이다. Node.js 전용 패키지는 안 돌아가는 경우가 많으니, Deno 호환 여부를 미리 확인해야 한다. 배포는 supabase functions deploy 한 줄이면 끝난다.
타입 추론이 한층 더 똑똑해졌다. satisfies 연산자 개선, 데코레이터 메타데이터 지원, 새로운 유틸리티 타입이 추가되었다. 특히 NoInfer 유틸리티 타입은 제네릭 함수에서 의도치 않은 타입 확장을 방지해준다. 실무에서 가장 체감되는 변화는 조건부 타입의 추론 정확도가 올라간 것이다. 이전에는 as 캐스팅으로 우회하던 패턴들을 이제 자연스럽게 작성할 수 있다.
짧지만 유용한 노하우
@tailwind 지시어가 @import로 변경됐다. JIT 모드가 기본이 되면서 purge 설정이 불필요해졌고, 색상 시스템이 oklch 기반으로 바뀌었다. 가장 많이 깨지는 부분은 커스텀 색상 정의와 plugin 호환성이다.
depends_on + healthcheck 조합으로 서비스 시작 순서를 보장하자. volumes로 데이터 영속성을 확보하고, env_file로 비밀값을 분리하면 "제 컴퓨터에서는 되는데요"를 끝낼 수 있다.
React Query는 devtools, mutation 관리, 오프라인 지원이 강점. SWR은 가볍고 심플하다. 대규모 앱이면 React Query, 간단한 프로젝트면 SWR. 최근 React Query v6에서 suspense 지원이 안정화되면서 격차가 벌어지는 추세다.
GitFlow에서 trunk-based로 바꾸고 느낀 점: 배포 주기가 빨라지고, 충돌이 줄었다. 대신 feature flag와 CI 파이프라인이 튼튼해야 한다. 팀 규모가 5명 이하면 적극 추천한다.
실무에서 바로 쓸 수 있는 코드 조각
function useDebounce<T>(value: T, delay: number): T {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const timer = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debounced;
}prisma.$use(async (params, next) => {
if (params.action === 'delete') {
params.action = 'update';
params.args.data = { deletedAt: new Date() };
}
return next(params);
});export function middleware(req: NextRequest) {
const token = req.cookies.get('session')?.value;
if (!token && req.nextUrl.pathname.startsWith('/dashboard')) {
return NextResponse.redirect(new URL('/login', req.url));
}
return NextResponse.next();
}이 블로그에 대해 궁금한 점들
Next.js + TypeScript + Tailwind CSS를 메인으로 쓰고 있습니다. 백엔드는 Supabase와 Prisma를 주로 활용하고, 배포는 Vercel을 사용합니다. 최근에는 Deno와 Bun도 실험적으로 써보고 있습니다.
주 1~2회 정도를 목표로 하고 있습니다. 개발 일지는 무언가 삽질하거나 배운 게 있을 때, 기술 글은 충분히 정리가 됐을 때 올립니다. 스니펫은 실무에서 유용했던 코드를 수시로 기록합니다.
대부분 실무에서 직접 겪은 문제와 해결 과정을 글로 옮깁니다. "이거 나도 삽질했는데 누가 정리해줬으면 좋겠다" 싶은 것들이 좋은 글감이 됩니다.
2026-06-03
뜨거운 함성과 화려한 조명 속에서 온몸으로 에너지를 불태웠던 공연의 밤. 그 황홀한 여운이 채 가시기도 전에 밀려오는 것은 바로 지독한 피로감입니다. 다음 날의 뻐근한 몸을 생각하면, 공연장 근처에서 하룻밤 편안하게 묵어가는 것이 현명한 선택이죠. 하지만 수많은 숙소 중 어디를 골...
2026년 6월 2일, 갑작스러운 어지럼증과 마비 증상. '뇌졸중'이라는 단어가 머릿속을 스치는 순간, 눈앞이 캄캄해집니다. 특히 넓은 고양시에 거주한다면 '어느 병원으로 가야 가장 빠를까?'라는 질문이 생명을 좌우하는 고민이 될 수 있습니다. 덕양구, 일산동구, 일산서구 등 행정...
2026-06-02, 수지 생활 정보 매거진에서 전해드립니다. 수지 지역을 포함한 모든 배달 라이더에게 시간은 곧 돈입니다. 특히 피크 타임에 연이어 들어오는 콜을 놓치지 않고 수행하는 능력은 그날의 수익을 좌우하는 핵심 요소입니다. 하지만 많은 라이더들이 공통적으로 겪는 문제가 ...
2026-06-02
2026-06-01
2026년 6월 1일, 마포구의 오래된 아파트에 거주하며 새로운 변화를 꿈꾸고 계신가요? 삐걱거리는 마룻바닥, 낡은 벽지, 비효율적인 공간 구조는 더 이상 감수해야 할 불편이 아닙니다. 하지만 막상 리모델링을 결심하면, 만만치 않은 구축아파트리모델링비용과 수많은 업체 사이에서 어디...
2026-06-01
오늘도 어깨, 허리, 무릎에서 보내는 불편한 신호에 진통제로 하루를 시작하지는 않으셨나요? 많은 현대인이 만성적인 통증에 시달리면서도 '이러다 말겠지' 혹은 '시간이 약'이라는 생각으로 방치하곤 합니다. 혹은 통증이 발생한 부위에 파스를 붙이거나 약을 먹으며 임시방편으로 넘어가는 ...
많은 기업 대표님들이 비슷한 고민을 토로합니다. 거액을 들여 컨설팅을 받았지만, 손에 남은 것은 두꺼운 보고서와뜬구름 잡는 전략뿐이라는 것입니다. 분명 잠재력 있는 제품과 서비스인데 왜 매출은 제자리걸음일까요? 그 이유는 대부분의 컨설팅이 '고객의 심리적 의사결정 구조'라는 핵심을...