https://blog.sangwook.dev 프론트엔드 기술 실험과 깊이 있는 학습 내용을 공유하는 공간입니다. ko Tue, 19 May 2026 02:33:32 GMT https://blog.sangwook.dev/posts/typescript-domain-modeling-without-optional/ https://blog.sangwook.dev/posts/typescript-domain-modeling-without-optional/ Mon, 16 Mar 2026 00:00:00 GMT 1. 프롤로그: 우리가 숨 쉬듯 작성하는 "거짓말" 팀원: "OO님, Post 타입에서 id가 없다고 에디터에서 빨간 줄이 뜨는데, 새 글 작성할 땐 서버 id가 없으니까 그냥 ? 붙여도 될까요?" 프론트엔드 개발을 하다 보면 슬랙이나 코드 리뷰에서 심심치 않게 보게 되는 질문입니다. ... https://blog.sangwook.dev/posts/no-one-asked-library-bundler-04-sourcemap/ https://blog.sangwook.dev/posts/no-one-asked-library-bundler-04-sourcemap/ Tue, 03 Mar 2026 00:00:00 GMT 수천 줄로 합쳐진 번들 파일에서 에러가 나면 어떻게 원본 위치를 찾을까요? 소스맵의 VLQ 인코딩 원리와 magic-string이 변환 이력을 관리하는 방식을 직접 구현하며 이해합니다. https://blog.sangwook.dev/posts/no-one-asked-library-bundler-03-bundling-scope/ https://blog.sangwook.dev/posts/no-one-asked-library-bundler-03-bundling-scope/ Mon, 23 Feb 2026 00:00:00 GMT 단순히 파일을 합치는 것과 번들링은 다릅니다. 변수 충돌을 막기 위한 함수 스코프 전략과 브라우저를 위한 런타임 구현 과정을 깊이 있게 다룹니다. https://blog.sangwook.dev/posts/no-one-asked-library-bundler-02-ast-graph/ https://blog.sangwook.dev/posts/no-one-asked-library-bundler-02-ast-graph/ Tue, 17 Feb 2026 00:00:00 GMT 정규표현식으로 import 문을 찾으려다 실패한 경험, 그리고 AST 추상 구문 트리를 통해 코드를 데이터로 바라보는 관점을 소개합니다. 파일 시스템을 그래프로 변환하는 과정을 직접 구현해봅니다. https://blog.sangwook.dev/posts/no-one-asked-library-bundler-00-prologue/ https://blog.sangwook.dev/posts/no-one-asked-library-bundler-00-prologue/ Mon, 02 Feb 2026 00:00:00 GMT 수많은 소스 코드가 어떻게 하나의 결과물로 합쳐질까요? 당연하게 사용하던 번들러의 블랙박스를 열고, 직접 손으로 구현하며 그 답을 찾아봅니다. https://blog.sangwook.dev/posts/no-one-asked-library-bundler-01-concept/ https://blog.sangwook.dev/posts/no-one-asked-library-bundler-01-concept/ Mon, 02 Feb 2026 00:00:00 GMT 코드를 번들링해야 하는 기술적 이유와 자바스크립트 모듈 시스템의 발전 과정을 살펴봅니다. 또한 번들러 구현의 기반이 되는 Magic String 라이브러리를 소개합니다. https://blog.sangwook.dev/posts/payment-system-architecture/ https://blog.sangwook.dev/posts/payment-system-architecture/ Sat, 24 Jan 2026 00:00:00 GMT "만약 내일 당장 '프랑스'가 서비스 국가로 추가된다면? 그리고 한국에서 '사업자 유형'에 따라 결제 수단이 달라져야 한다면?" 이 질문들이 우리 팀의 결제 시스템 설계를 완전히 바꿔놓았습니다. --- 🎭 Prologue: "팀장님의 무리한(?) 요구" 어느 날 오후, 코드 리뷰 중에... https://blog.sangwook.dev/posts/2025-retrospect/ https://blog.sangwook.dev/posts/2025-retrospect/ Sun, 21 Dec 2025 00:00:00 GMT 2025 회고: 글 33개, PR 38회, 발표 3회로 '보여주는 개발자'가 되다 2025년은 "숨어서 잘하는 개발자" 에서 "보여주고 나누는 개발자" 로 방향을 튼 해였습니다. 시작점은 2024년 12월 23일, 한 개발자의 피드백이었습니다. "평소 기술 관련 답변을 잘 해주시는데, ... https://blog.sangwook.dev/posts/2025-teoconf-presentation/ https://blog.sangwook.dev/posts/2025-teoconf-presentation/ Thu, 11 Dec 2025 00:00:00 GMT 🎤 발표 후기: ‘내가 하고 싶은 말’ 대신 ‘청중이 가져갈 한 문장’을 찾기까지 이번 테오콘 발표는 내게 하나의 도전이었다. 디자인 시스템 배포라는, 나에게 깊은 경험이지만 청중에게는 다소 생소할 수 있는 주제를 어떻게 풀어낼 것인가. 그리고 그 과정에서 “발표는 기술을 나열하는 자... https://blog.sangwook.dev/posts/npm-deploy-series-0-prologue/ https://blog.sangwook.dev/posts/npm-deploy-series-0-prologue/ Sun, 30 Nov 2025 00:00:00 GMT 하루 만에 끝날 줄 알았던 NPM 배포가 3주 걸린 이유 프롤로그: "별거 아니겠지"의 착각 타팀 기획자님이 내 자리로 다가왔다. "개발자님, 저희 팀에서도 그 디자인 시스템 쓸 수 있을까요? 버튼이랑 인풋 컴포넌트가 정말 예쁘던데..." 당시 디자인 시스템은 완성해둔 참이었다. 모노레... https://blog.sangwook.dev/posts/typescript-project-type-safe-refactor-with-typescript/ https://blog.sangwook.dev/posts/typescript-project-type-safe-refactor-with-typescript/ Thu, 06 Nov 2025 00:00:00 GMT "회원 구조가 바뀌었습니다. 552개 파일을 수정해야 합니다." 보통은 이렇게 됩니다 - 어디를 수정해야 하는지 찾느라 1주 - 수정하다가 놓친 곳 때문에 버그 발생 - 회귀 테스트에 또 1주 - QA에서 엣지 케이스 발견 - 결국 한 달... 하지만 우리는 2주 만에, 사이드 이펙트 ... https://blog.sangwook.dev/posts/react-error-deign/ https://blog.sangwook.dev/posts/react-error-deign/ Tue, 14 Oct 2025 00:00:00 GMT 0. 프롤로그 throw를 보던중 문득 깨달았다. typescript try { throw new Error('error'); } catch (error) { throw error; // 상위로 전파된다 } 에러는 계층을 따라 전파된다. 그럼 에러 클래스도 계층 구조로 설계할 수 있지 ... https://blog.sangwook.dev/posts/ai-opensource-contribution/ https://blog.sangwook.dev/posts/ai-opensource-contribution/ Sun, 07 Sep 2025 00:00:00 GMT 구글 개발자에게 인정받은 성능 최적화: gemini-cli 기여 후기 이 글을 읽고 나면 - AI와 협업해서 오픈소스 기여하는 방법을 알게 됩니다 - 성능 최적화 PR이 더 좋은 평가를 받는 이유를 이해합니다 - 구글같은 대기업 프로젝트에 기여하는 전략을 배웁니다 - 실제 머지된 PR ... https://blog.sangwook.dev/posts/feconf-2025-lightning-speaker/ https://blog.sangwook.dev/posts/feconf-2025-lightning-speaker/ Tue, 02 Sep 2025 00:00:00 GMT 시작 마이크를 잡는 순간 정말 내가 말해도 되는건가? 나 해도되는건가? 이 생각이 든 건 몇 달 전부터였다. 어느 모임에서 feconf 2024 라이트닝 연사자 분을 만나게 되었다. 재미있게 이야기 하던 도중 나에게 날아든 질문이 있었다. "상욱님도 이거 잘 하실 수 있을 것 같아요! ... https://blog.sangwook.dev/posts/nodejs-contribution/ https://blog.sangwook.dev/posts/nodejs-contribution/ Sun, 10 Aug 2025 00:00:00 GMT 4시간 만에 Node.js PR 승인받기 AI 페어 프로그래밍으로 오픈소스 진입 장벽 낮추기 “무조건 Node.js에 내 코드를 넣고 말겠다!” 오픈소스 기여가 점점 재미있어지고, 자신감도 차오르던 시기였다. 하지만 매일같이 이슈를 살펴봐도 여전히 모르는 부분이 많았다. C++ 코드가 ... https://blog.sangwook.dev/posts/nextjs-contributor/ https://blog.sangwook.dev/posts/nextjs-contributor/ Tue, 05 Aug 2025 00:00:00 GMT Next.js 오픈소스 기여: 2번 실패 후 성공 후기 들어가며 "띠링" 새벽 2시, 내 핸드폰에 또 다른 GitHub 알림이 울렸다. 발신자: vercel/next.js [[제목] : Re:[vercel/next.js] Fix remote pattern (80294) (PR 80428... https://blog.sangwook.dev/posts/react-component-context-api-dropzone/ https://blog.sangwook.dev/posts/react-component-context-api-dropzone/ Wed, 30 Jul 2025 00:00:00 GMT [React Component] Context API를 활용한 DropZone 구현하기 평소처럼 Mantine의 Dropzone을 사용하고 있었는데, 문득 내부 구현이 궁금해졌습니다. 어떻게 이렇게 깔끔한 API를 제공할 수 있을까? tsx // Mantine Dropzone 사용 중.... https://blog.sangwook.dev/posts/react-component-type-guard-button/ https://blog.sangwook.dev/posts/react-component-type-guard-button/ Mon, 30 Jun 2025 00:00:00 GMT [React Component] Type Guard를 활용한 여러가지 Button 구현하기 드디어 디자인 시스템 프로젝트가 시작되었습니다! 팀에서 가장 먼저 구현하기로 한 컴포넌트는 Button입니다. 디자인 시스템에서 Button은 특별합니다. 가장 많이 사용되고, 가장 다양한 형태를... https://blog.sangwook.dev/posts/react-component-toast/ https://blog.sangwook.dev/posts/react-component-toast/ Mon, 30 Jun 2025 00:00:00 GMT 들어가며 안녕하세요, 여러분! 프론트엔드 개발자라면 누구나 한 번쯤 만들어보는 토스트 UI. 간단해 보이지만, 막상 구현하다 보면 "이걸 어떻게 앱 어디서든 쉽게 호출하지?", "종류별로 다른 스타일은 어떻게 관리하지?" 같은 고민에 빠지게 됩니다. 최근 mantine의 토스트 컴포넌트... https://blog.sangwook.dev/posts/2025-mid-year-review/ https://blog.sangwook.dev/posts/2025-mid-year-review/ Tue, 17 Jun 2025 00:00:00 GMT 들어가며 2025년 상반기를 돌아보니, 가장 크게 변화한 것은 "나만 알고 있던 지식을 세상과 나누기 시작 했다"는 점이다. 그동안 개발자로서 쌓아온 경험들과 고민을 글로 정리하고, 오픈소스에 기여 하면서 진정한 의미의 성장을 경험한 상반기였다. --- 🌟 기술 블로그: 지식 공유의 ... https://blog.sangwook.dev/posts/typescript-project-domain-design/ https://blog.sangwook.dev/posts/typescript-project-domain-design/ Sun, 15 Jun 2025 00:00:00 GMT 들어가며 오후 4시, 또 다시 울리는 슬랙 알림... [기획자]: "저번에 만든 사용자 상태 로직 잘 쓰고 있어요! 그런데 이번엔 사용자가 특정 액션을 할 수 있는지 검증하는 로직도 추가해 주세요." [나]: "네, 어떤 검증 로직인가요?" [기획자]: "사용자가 글을 작성할 수 있는지... https://blog.sangwook.dev/posts/typescript-project-service-di-design/ https://blog.sangwook.dev/posts/typescript-project-service-di-design/ Sun, 08 Jun 2025 00:00:00 GMT 들어가며 겨우 백엔드의 요청을 쳐내고 다시 피곤함에전 모습으로 테스크를 마무리하려는 순간 이번엔 제 슬랙이 울립니다. [기획자]: "급하게 기획이 바뀌어서요. 이거 프론트에서 추가로 수정해 주셔야 할 것 같아요. 아직 마무리 다 안 하신 거 맞죠?" [나]: "네 아직 마무리 안 했어요... https://blog.sangwook.dev/posts/typescript-project-service-design/ https://blog.sangwook.dev/posts/typescript-project-service-design/ Sun, 08 Jun 2025 00:00:00 GMT 들어가며 겨우 백엔드의 요청을 쳐내고 다시 피곤함에전 모습으로 테스크를 마무리하려는 순간 이번엔 제 슬랙이 울립니다. [기획자]: "급하게 기획이 바뀌어서요. 이거 프론트에서 추가로 수정해 주셔야 할 것 같아요. 아직 마무리 다 안 하신 거 맞죠?" [나]: "네 아직 마무리 안 했어요... https://blog.sangwook.dev/posts/typescript-project-api-di-design/ https://blog.sangwook.dev/posts/typescript-project-api-di-design/ Sun, 01 Jun 2025 00:00:00 GMT 들어가며 피곤에 쩔은 모습으로 하나의 테스크를 마무리 하는 순간 백엔드 개발자가 다가옵니다. "죄송하지만 이번에 만든 api 중에 하나의 리스폰스가 변동 될 것 같습니다." "User로 정의한 스키마 중에 name이 빠질 것 같아요." 순간 머릿속에서 여기저기 대강 흩어져 있는 User... https://blog.sangwook.dev/posts/typescript-project-api-design/ https://blog.sangwook.dev/posts/typescript-project-api-design/ Sun, 01 Jun 2025 00:00:00 GMT 들어가며 피곤에 쩔은 모습으로 하나의 테스크를 마무리 하는 순간 백엔드 개발자가 다가옵니다. "죄송하지만 이번에 만든 api 중에 하나의 리스폰스가 변동 될 것 같습니다." "User로 정의한 스키마 중에 name이 빠질 것 같아요." 순간 머릿속에서 여기저기 대강 흩어져 있는 User... https://blog.sangwook.dev/posts/typescript-project-design/ https://blog.sangwook.dev/posts/typescript-project-design/ Mon, 05 May 2025 00:00:00 GMT [타입으로 설계하는 프로젝트] 당신의 Type, 어디까지 연결되어 있나요? 들어가며 플래닝이 끝나고 난 뒤 저에게 주어진 테스크를 살펴 봅니다. "뭐시기 뭐시기 기능 수정 및 삭제" 큰 기능 아니니 그냥 지워도 될거라는 저의 생각은 조만간 큰 버그를 가져왔습니다. 테스트 서버에 올려보니... https://blog.sangwook.dev/posts/pnpm-eslint-not-working/ https://blog.sangwook.dev/posts/pnpm-eslint-not-working/ Thu, 01 May 2025 00:00:00 GMT 0. 프롤로그 pnpm 9 → 10 업그레이드 후 monorepo에서 eslint가 동작하지 않는 문제를 겪은 경험을 공유 합니다. --- 1. 상황설명 저희 회사는 pnpm을 패키지 매니저로 사용하고 있습니다. 최근 pnpm 9에서 pnpm 10으로 업그레이드를 진행했습니다. 업그레이... https://blog.sangwook.dev/posts/first-open-source-contribution/ https://blog.sangwook.dev/posts/first-open-source-contribution/ Tue, 22 Apr 2025 00:00:00 GMT 0. 프롤로그 "내가 자주 사용하는 오픈 소스에 기여 해보고 싶다." 늘 마음 한켠에 있었지만, 다른 사람의 기여 후기를 보거나 기여 방법을 보아도 막막 했습니다. 그러던 중, 회사 프로젝트에서 Slider를 구현해야 할 일이 생겼습니다. 디자이너님께서 전달해주신 피그마 시안을 보자마자... https://blog.sangwook.dev/posts/aws-ecs-rollback/ https://blog.sangwook.dev/posts/aws-ecs-rollback/ Thu, 03 Apr 2025 00:00:00 GMT 0. 프롤로그 이번글에서는 지난번까지 구축한 ECS 환경에서, 오류 발생 시 애플리케이션을 안정적으로 롤백하는 방법에 대해 다뤄보겠습니다. 특히 GitHub Actions, AWS CodeDeploy를 활용하여 자동화된 배포 및 롤백 프로세스를 구현하는 방법을 중심으로 설명드릴 예정입니... https://blog.sangwook.dev/posts/next-js-ecs-deploy/ https://blog.sangwook.dev/posts/next-js-ecs-deploy/ Tue, 01 Apr 2025 00:00:00 GMT 0. 프롤로그 이전에는 next.js의 standalone과 turborepo의 --docker 옵션을 활용한 도커라이징 하는 방법을 정리하였습니다. 이번에는 aws의 ecs를 통해 컨테이너관리를 하고 code deploy를 통해 배포 하는 방법에 대해서 정리 해보겠습니다. --- 1.... https://blog.sangwook.dev/posts/turborepo-next.js-docker/ https://blog.sangwook.dev/posts/turborepo-next.js-docker/ Sat, 22 Mar 2025 00:00:00 GMT 0. 프롤로그 이 글은 뮤즈라이브에서 웹 서비스 3개를 모노레포 구조에서 Turborepo의 공식 문서를 참조하여 Next.js의 standalone 모드와 Docker를 활용한 모노레포 환경 설정 및 최적화 방법을 설명합니다. 목표 - Next.js standalone 모드 설명 - ... https://blog.sangwook.dev/posts/nextjs-error/ https://blog.sangwook.dev/posts/nextjs-error/ Mon, 03 Mar 2025 00:00:00 GMT 0. 프롤로그 이전까지는 javascript의 try catch과 React의 ErrorBoundary로 error 객체의 전파와 핸들링하는 방법에 대해 알아 보았습니다. <br/이번글에서는 Next.js의 error.js와 동작 방법에 대해 알아보겠습니다. --- 1. Next.js ... https://blog.sangwook.dev/posts/react-error/ https://blog.sangwook.dev/posts/react-error/ Sun, 02 Mar 2025 00:00:00 GMT 0. 프롤로그 React 애플리케이션에서 예기치 않은 에러는 사용자 경험에 치명적인 영향을 미칠 수 있습니다. 이 글에서는 ErrorBoundary와 같은 에러 관리 기법을 바탕으로, 비동기 코드에서 발생하는 에러를 어떻게 처리하고, 의도적인 에러와 의도하지 않은 에러를 구분하여 다루는... https://blog.sangwook.dev/posts/javascript-error/ https://blog.sangwook.dev/posts/javascript-error/ Thu, 27 Feb 2025 00:00:00 GMT 프롤로그 이번 글은 JavaScript에서 동기 및 비동기 상황 모두에 대해 에러를 어떻게 처리할 수 있는지에 대해 다룹니다. 에러 처리는 코드의 안정성과 유지보수성에 큰 영향을 미치므로, 명확하고 일관된 패턴을 적용하는 것이 중요합니다. 이 글에서는 기본적인 try-catch 패턴부터... https://blog.sangwook.dev/posts/next-middleware/ https://blog.sangwook.dev/posts/next-middleware/ Wed, 26 Feb 2025 00:00:00 GMT 프롤로그 이번 글에서는 Next.js의 Middleware를 사용하여 사용자 인증 및 역할 기반 라우팅을 구현한 경험을 공유합니다. --- 1. 요구 사항 - Next.js App Route를 사용할 것 - 최상단에서 인증을 처리할 것 - 다른 코드를 수정하지 않을 것 - 캐싱 기능을 ... https://blog.sangwook.dev/posts/panda-css-1year-review/ https://blog.sangwook.dev/posts/panda-css-1year-review/ Mon, 17 Feb 2025 00:00:00 GMT 프롤로그 프로젝트에서 Panda CSS를 도입해 사용해 보면서, 기존의 styled-components나 Tailwind CSS와는 다른 독특한 스타일 작성 방식을 체감할 수 있었습니다. 특히 TypeScript 기반의 타입 안전성, 빌드 타임에 CSS를 정적으로 추출하여 런타임 오버헤... https://blog.sangwook.dev/posts/adding-interaction-layers-to-components/ https://blog.sangwook.dev/posts/adding-interaction-layers-to-components/ Mon, 10 Feb 2025 00:00:00 GMT 프롤로그 디자인 시스템에서 중요한 목표 중 하나는 일관된 사용자 경험(UX)을 제공하는 것입니다. UI 컴포넌트(버튼, 카드 등)마다 hover, focus, press와 같은 다양한 인터랙션 상태가 있고, 각 상태에서 색상이 어떻게 변화하는지가 사용성에 큰 영향을 미칩니다. 이번 글에... https://blog.sangwook.dev/posts/design-system-start/ https://blog.sangwook.dev/posts/design-system-start/ Sun, 02 Feb 2025 00:00:00 GMT 프롤로그 디자인 시스템: 우리가 꼭 필요한 이유 새롭게 시작하는 거대한 프로젝트 속에는 또 다른 거대한 과제가 숨어 있었다. 바로 디자인 시스템 구축이었습니다. 이번 프로젝트는 단순히 두 개의 프로젝트를 하나로 합치는 것을 넘어, 디자인 요소 간 불일치로 인해 UX가 저하되고, 개발 및... https://blog.sangwook.dev/posts/simple-fsd-start/ https://blog.sangwook.dev/posts/simple-fsd-start/ Tue, 21 Jan 2025 00:00:00 GMT 공식홈피를 기반 했지만 제 입맛에 따라 해석 했음을 알려드립니다. 프롤로그 때는 바야흐로 2024년 5월 fsd 아키텍처가 유행하기 시작 했다. 마침 회사의 프로젝트 두개를 하나로 합치는 프로젝트를 시작 하는 나로써는 매우나도 유혹적인 글이었습니다. 하지만 지금 처럼 분석글이 많은 때도... https://blog.sangwook.dev/posts/reduce-server-dependency-clean-architecture/ https://blog.sangwook.dev/posts/reduce-server-dependency-clean-architecture/ Mon, 13 Jan 2025 00:00:00 GMT 텍스트 기존 클린 아키텍처에서 많이 벗어난 내용이 많습니다. 감안하고 봐주시면 감사하겠습니다. 프롤로그 백엔드 개발자로 시작했지만, 프론트엔드에서 아키텍처 고민을 시작하게 된 이유 저는 자바/스프링으로 커리어를 시작 했습니다. 처음 만든 포트폴리오도 스프링mvc를 사용한 웹사이트 였습니... https://blog.sangwook.dev/posts/2024-retrospect/ https://blog.sangwook.dev/posts/2024-retrospect/ Mon, 23 Dec 2024 00:00:00 GMT 도전, 성장, 배움: 2024년 회고 --- 1분기 (13월): 변화의 시작, 역할의 확장 Keep 2024년 초, 팀 내부적으로 큰 변화가 있었습니다. 예상치 못한 시점에 중요한 동료들이 떠나며 공백이 발생했고, 이에 따라 저에게 더 많은 책임과 역할이 주어졌습니다. 이러한 변화 속에...