2025 회고: 글 33개, PR 38회, 발표 3회로 '보여주는 개발자'가 되다
2025 회고: 글 33개, PR 38회, 발표 3회로 '보여주는 개발자'가 되다 2025년은 "숨어서 잘하는 개발자" 에서 "보여주고 나누는 개발자" 로 방향을 튼 해였습니다. 시작점은 2024년 12월 23일, 한 개발자의 피드백이었습니다. "평소 기술 관련 답변을 잘 해주시는데, ...
더 읽어보기→
실험 기록들
총 34개의 기록이 있습니다.
2025 Teoconf 발표 후기
🎤 발표 후기: ‘내가 하고 싶은 말’ 대신 ‘청중이 가져갈 한 문장’을 찾기까지 이번 테오콘 발표는 내게 하나의 도전이었다. 디자인 시스템 배포라는, 나에게 깊은 경험이지만 청중에게는 다소 생소할 수 있는 주제를 어떻게 풀어낼 것인가. 그리고 그 과정에서 “발표는 기술을 나열하는 자...
더 읽어보기→
하루 만에 끝날 줄 알았던 디자인 시스템 배포가 3주 걸린 이유
하루 만에 끝날 줄 알았던 NPM 배포가 3주 걸린 이유 프롤로그: "별거 아니겠지"의 착각 타팀 기획자님이 내 자리로 다가왔다. "개발자님, 저희 팀에서도 그 디자인 시스템 쓸 수 있을까요? 버튼이랑 인풋 컴포넌트가 정말 예쁘던데..." 당시 디자인 시스템은 완성해둔 참이었다. 모노레...
더 읽어보기→
[Typescript로 설계하는 프로젝트] 타입 한 줄로 552개 파일을 2주 만에 안전하게 수정한 방법
"회원 구조가 바뀌었습니다. 552개 파일을 수정해야 합니다." 보통은 이렇게 됩니다 - 어디를 수정해야 하는지 찾느라 1주 - 수정하다가 놓친 곳 때문에 버그 발생 - 회귀 테스트에 또 1주 - QA에서 엣지 케이스 발견 - 결국 한 달... 하지만 우리는 2주 만에, 사이드 이펙트 ...
더 읽어보기→
React 에러 구조 설계: throw만으로 선언적 에러 핸들링 하기
0. 프롤로그 throw를 보던중 문득 깨달았다. typescript try { throw new Error('error'); } catch (error) { throw error; // 상위로 전파된다 } 에러는 계층을 따라 전파된다. 그럼 에러 클래스도 계층 구조로 설계할 수 있지 ...
더 읽어보기→
구글 개발자가 인정한 성능 최적화 기여 후기 - AI와 함께한 gemini-cli 오픈소스 여정
구글 개발자에게 인정받은 성능 최적화: gemini-cli 기여 후기 이 글을 읽고 나면 - AI와 협업해서 오픈소스 기여하는 방법을 알게 됩니다 - 성능 최적화 PR이 더 좋은 평가를 받는 이유를 이해합니다 - 구글같은 대기업 프로젝트에 기여하는 전략을 배웁니다 - 실제 머지된 PR ...
더 읽어보기→
feconf 2025 발표 후기
시작 마이크를 잡는 순간 정말 내가 말해도 되는건가? 나 해도되는건가? 이 생각이 든 건 몇 달 전부터였다. 어느 모임에서 feconf 2024 라이트닝 연사자 분을 만나게 되었다. 재미있게 이야기 하던 도중 나에게 날아든 질문이 있었다. "상욱님도 이거 잘 하실 수 있을 것 같아요! ...
더 읽어보기→
4시간 만에 Node.js PR 승인받기
4시간 만에 Node.js PR 승인받기 AI 페어 프로그래밍으로 오픈소스 진입 장벽 낮추기 “무조건 Node.js에 내 코드를 넣고 말겠다!” 오픈소스 기여가 점점 재미있어지고, 자신감도 차오르던 시기였다. 하지만 매일같이 이슈를 살펴봐도 여전히 모르는 부분이 많았다. C++ 코드가 ...
더 읽어보기→
Next.js 오픈소스 기여: 2번 실패 후 성공 후기
Next.js 오픈소스 기여: 2번 실패 후 성공 후기 들어가며 "띠링" 새벽 2시, 내 핸드폰에 또 다른 GitHub 알림이 울렸다. 발신자: vercel/next.js [[제목] : Re:[vercel/next.js] Fix remote pattern (80294) (PR 80428...
더 읽어보기→
Context API를 활용한 DropZone 구현하기
[React Component] Context API를 활용한 DropZone 구현하기 평소처럼 Mantine의 Dropzone을 사용하고 있었는데, 문득 내부 구현이 궁금해졌습니다. 어떻게 이렇게 깔끔한 API를 제공할 수 있을까? tsx // Mantine Dropzone 사용 중....
더 읽어보기→
Type Guard를 활용한 여러가지 Button 구현하기
[React Component] Type Guard를 활용한 여러가지 Button 구현하기 드디어 디자인 시스템 프로젝트가 시작되었습니다! 팀에서 가장 먼저 구현하기로 한 컴포넌트는 Button입니다. 디자인 시스템에서 Button은 특별합니다. 가장 많이 사용되고, 가장 다양한 형태를...
더 읽어보기→
15줄에서 2줄로: useSyncExternalStore 기반 React Toast 시스템 설계법
들어가며 안녕하세요, 여러분! 프론트엔드 개발자라면 누구나 한 번쯤 만들어보는 토스트 UI. 간단해 보이지만, 막상 구현하다 보면 "이걸 어떻게 앱 어디서든 쉽게 호출하지?", "종류별로 다른 스타일은 어떻게 관리하지?" 같은 고민에 빠지게 됩니다. 최근 mantine의 토스트 컴포넌트...
더 읽어보기→
개발자에서 기여자로: 기술 블로그와 오픈소스가 바꾼 나의 2025년 상반기
들어가며 2025년 상반기를 돌아보니, 가장 크게 변화한 것은 "나만 알고 있던 지식을 세상과 나누기 시작 했다"는 점이다. 그동안 개발자로서 쌓아온 경험들과 고민을 글로 정리하고, 오픈소스에 기여 하면서 진정한 의미의 성장을 경험한 상반기였다. --- 🌟 기술 블로그: 지식 공유의 ...
더 읽어보기→
[Typescript로 설계하는 프로젝트] "같은 로직 또 복사했어요?" Domain 모델로 책임 분리하기
들어가며 오후 4시, 또 다시 울리는 슬랙 알림... [기획자]: "저번에 만든 사용자 상태 로직 잘 쓰고 있어요! 그런데 이번엔 사용자가 특정 액션을 할 수 있는지 검증하는 로직도 추가해 주세요." [나]: "네, 어떤 검증 로직인가요?" [기획자]: "사용자가 글을 작성할 수 있는지...
더 읽어보기→
[Typescript로 설계하는 프로젝트] "원래 있던 기능이니 금방 하시죠?" 당하지 않는 Service Layer 설계 전략 With Di
들어가며 겨우 백엔드의 요청을 쳐내고 다시 피곤함에전 모습으로 테스크를 마무리하려는 순간 이번엔 제 슬랙이 울립니다. [기획자]: "급하게 기획이 바뀌어서요. 이거 프론트에서 추가로 수정해 주셔야 할 것 같아요. 아직 마무리 다 안 하신 거 맞죠?" [나]: "네 아직 마무리 안 했어요...
더 읽어보기→
[Typescript로 설계하는 프로젝트] "원래 있던 기능이니 금방 하시죠?" 당하지 않는 Service Layer 설계 전략
들어가며 겨우 백엔드의 요청을 쳐내고 다시 피곤함에전 모습으로 테스크를 마무리하려는 순간 이번엔 제 슬랙이 울립니다. [기획자]: "급하게 기획이 바뀌어서요. 이거 프론트에서 추가로 수정해 주셔야 할 것 같아요. 아직 마무리 다 안 하신 거 맞죠?" [나]: "네 아직 마무리 안 했어요...
더 읽어보기→
[Typescript로 설계하는 프로젝트] Type 설계의 시작: 견고한 서버 API Type 설계하기 With DI
들어가며 피곤에 쩔은 모습으로 하나의 테스크를 마무리 하는 순간 백엔드 개발자가 다가옵니다. "죄송하지만 이번에 만든 api 중에 하나의 리스폰스가 변동 될 것 같습니다." "User로 정의한 스키마 중에 name이 빠질 것 같아요." 순간 머릿속에서 여기저기 대강 흩어져 있는 User...
더 읽어보기→
[Typescript로 설계하는 프로젝트] Type 설계의 시작: 견고한 서버 API Type 설계하기
들어가며 피곤에 쩔은 모습으로 하나의 테스크를 마무리 하는 순간 백엔드 개발자가 다가옵니다. "죄송하지만 이번에 만든 api 중에 하나의 리스폰스가 변동 될 것 같습니다." "User로 정의한 스키마 중에 name이 빠질 것 같아요." 순간 머릿속에서 여기저기 대강 흩어져 있는 User...
더 읽어보기→
[Typescript로 설계하는 프로젝트] 당신의 Type, 어디까지 연결되어 있나요?
[타입으로 설계하는 프로젝트] 당신의 Type, 어디까지 연결되어 있나요? 들어가며 플래닝이 끝나고 난 뒤 저에게 주어진 테스크를 살펴 봅니다. "뭐시기 뭐시기 기능 수정 및 삭제" 큰 기능 아니니 그냥 지워도 될거라는 저의 생각은 조만간 큰 버그를 가져왔습니다. 테스트 서버에 올려보니...
더 읽어보기→
pnpm 10 업그레이드 후 ESLint 설정이 사라졌어요?! (feat. 호이스팅)
0. 프롤로그 pnpm 9 → 10 업그레이드 후 monorepo에서 eslint가 동작하지 않는 문제를 겪은 경험을 공유 합니다. --- 1. 상황설명 저희 회사는 pnpm을 패키지 매니저로 사용하고 있습니다. 최근 pnpm 9에서 pnpm 10으로 업그레이드를 진행했습니다. 업그레이...
더 읽어보기→
오픈소스 첫 발걸음: Mantine PR 기여 후기
0. 프롤로그 "내가 자주 사용하는 오픈 소스에 기여 해보고 싶다." 늘 마음 한켠에 있었지만, 다른 사람의 기여 후기를 보거나 기여 방법을 보아도 막막 했습니다. 그러던 중, 회사 프로젝트에서 Slider를 구현해야 할 일이 생겼습니다. 디자이너님께서 전달해주신 피그마 시안을 보자마자...
더 읽어보기→
🚨3분만에 Next.js 서비스 장애 대응 대응하기: GitHub Actions + AWS ECS + CodeDeploy 롤백 시스템
0. 프롤로그 이번글에서는 지난번까지 구축한 ECS 환경에서, 오류 발생 시 애플리케이션을 안정적으로 롤백하는 방법에 대해 다뤄보겠습니다. 특히 GitHub Actions, AWS CodeDeploy를 활용하여 자동화된 배포 및 롤백 프로세스를 구현하는 방법을 중심으로 설명드릴 예정입니...
더 읽어보기→
ecs와 code deploy를 활용한 next.js 배포하기
0. 프롤로그 이전에는 next.js의 standalone과 turborepo의 --docker 옵션을 활용한 도커라이징 하는 방법을 정리하였습니다. 이번에는 aws의 ecs를 통해 컨테이너관리를 하고 code deploy를 통해 배포 하는 방법에 대해서 정리 해보겠습니다. --- 1....
더 읽어보기→
Turborepo 에서 next.js 도커라이징 하기
0. 프롤로그 이 글은 뮤즈라이브에서 웹 서비스 3개를 모노레포 구조에서 Turborepo의 공식 문서를 참조하여 Next.js의 standalone 모드와 Docker를 활용한 모노레포 환경 설정 및 최적화 방법을 설명합니다. 목표 - Next.js standalone 모드 설명 - ...
더 읽어보기→
Next.js로 우아하게 Error 핸들링하기
0. 프롤로그 이전까지는 javascript의 try catch과 React의 ErrorBoundary로 error 객체의 전파와 핸들링하는 방법에 대해 알아 보았습니다. <br/이번글에서는 Next.js의 error.js와 동작 방법에 대해 알아보겠습니다. --- 1. Next.js ...
더 읽어보기→
React로 우아하게 Error 핸들링 하기
0. 프롤로그 React 애플리케이션에서 예기치 않은 에러는 사용자 경험에 치명적인 영향을 미칠 수 있습니다. 이 글에서는 ErrorBoundary와 같은 에러 관리 기법을 바탕으로, 비동기 코드에서 발생하는 에러를 어떻게 처리하고, 의도적인 에러와 의도하지 않은 에러를 구분하여 다루는...
더 읽어보기→
javascript로 우아하게 Error 핸들링하기
프롤로그 이번 글은 JavaScript에서 동기 및 비동기 상황 모두에 대해 에러를 어떻게 처리할 수 있는지에 대해 다룹니다. 에러 처리는 코드의 안정성과 유지보수성에 큰 영향을 미치므로, 명확하고 일관된 패턴을 적용하는 것이 중요합니다. 이 글에서는 기본적인 try-catch 패턴부터...
더 읽어보기→
미들웨어에서 auth 적용하기
프롤로그 이번 글에서는 Next.js의 Middleware를 사용하여 사용자 인증 및 역할 기반 라우팅을 구현한 경험을 공유합니다. --- 1. 요구 사항 - Next.js App Route를 사용할 것 - 최상단에서 인증을 처리할 것 - 다른 코드를 수정하지 않을 것 - 캐싱 기능을 ...
더 읽어보기→
Panda CSS 1년 사용기
프롤로그 프로젝트에서 Panda CSS를 도입해 사용해 보면서, 기존의 styled-components나 Tailwind CSS와는 다른 독특한 스타일 작성 방식을 체감할 수 있었습니다. 특히 TypeScript 기반의 타입 안전성, 빌드 타임에 CSS를 정적으로 추출하여 런타임 오버헤...
더 읽어보기→
컴포넌트에 인터렉션 레이어 이쁘게 씌우기
프롤로그 디자인 시스템에서 중요한 목표 중 하나는 일관된 사용자 경험(UX)을 제공하는 것입니다. UI 컴포넌트(버튼, 카드 등)마다 hover, focus, press와 같은 다양한 인터랙션 상태가 있고, 각 상태에서 색상이 어떻게 변화하는지가 사용성에 큰 영향을 미칩니다. 이번 글에...
더 읽어보기→
디자인 시스템 시작해보기
프롤로그 디자인 시스템: 우리가 꼭 필요한 이유 새롭게 시작하는 거대한 프로젝트 속에는 또 다른 거대한 과제가 숨어 있었다. 바로 디자인 시스템 구축이었습니다. 이번 프로젝트는 단순히 두 개의 프로젝트를 하나로 합치는 것을 넘어, 디자인 요소 간 불일치로 인해 UX가 저하되고, 개발 및...
더 읽어보기→
FSD 간단하게 시작해보기
공식홈피를 기반 했지만 제 입맛에 따라 해석 했음을 알려드립니다. 프롤로그 때는 바야흐로 2024년 5월 fsd 아키텍처가 유행하기 시작 했다. 마침 회사의 프로젝트 두개를 하나로 합치는 프로젝트를 시작 하는 나로써는 매우나도 유혹적인 글이었습니다. 하지만 지금 처럼 분석글이 많은 때도...
더 읽어보기→
서버 의존성을 줄여보자 (Feat : 클린 아키텍처)
텍스트 기존 클린 아키텍처에서 많이 벗어난 내용이 많습니다. 감안하고 봐주시면 감사하겠습니다. 프롤로그 백엔드 개발자로 시작했지만, 프론트엔드에서 아키텍처 고민을 시작하게 된 이유 저는 자바/스프링으로 커리어를 시작 했습니다. 처음 만든 포트폴리오도 스프링mvc를 사용한 웹사이트 였습니...
더 읽어보기→
도전과 성장, 그리고 배움으로 가득 찬 2024년 회고
도전, 성장, 배움: 2024년 회고 --- 1분기 (13월): 변화의 시작, 역할의 확장 Keep 2024년 초, 팀 내부적으로 큰 변화가 있었습니다. 예상치 못한 시점에 중요한 동료들이 떠나며 공백이 발생했고, 이에 따라 저에게 더 많은 책임과 역할이 주어졌습니다. 이러한 변화 속에...
더 읽어보기→