Replies: 13 comments 21 replies
-
|
글 잘 읽었습니다.
|
Beta Was this translation helpful? Give feedback.
-
|
잘 읽었습니다, 몇 가지 생각나는 코멘트 남겨봐요! 초안에 도움이 되면 좋겠습니다 :)
|
Beta Was this translation helpful? Give feedback.
-
|
에반님! 초안 잘 읽었습니다! 제 개인적인 의견 남기겠습니다!
수고많으셨습니다 :) |
Beta Was this translation helpful? Give feedback.
-
|
궁금한 게 있습니다! 의존성 업데이트로는 UI가 변하지 않아 Chromatic 테스트가 불필요하다고 하셨는데, 현재 사용중인 Ark UI나 React, lucide-react 의 버전이 변경된 경우 의도치 않은 UI 변경이 발생하거나, vitest, testing-library 버전 변경으로 테스트가 실패할 수 있다고 생각합니다. 이 부분에 대해 어떻게 생각하시는지 궁금합니다. |
Beta Was this translation helpful? Give feedback.
-
|
글 잘 읽었습니다. 작성하느냐고 고생하셨습니다. 다른 분들이 피드백 잘 남겨주셔서 궁금한 점 겸 피드백남깁니다. 아래와 같이 쿨다운 설정을 하셨는데 이번 react server 컴포넌트 관련한 보안패치 연달아 발생한 일 있었습니다. 이러한 예외적인 사항에 대해서 어떻게 생각하시는지 예외적인 상황이기에 수동으로 작업해야하는지 한다면 어떤 정책으로 해야할지 관한 내용이 있으면 어떨까요? (참고로 디펜더봇도 저희도 해당 내용을 업데이트 하지 않았네요 물론 서버컴포넌트 관련내용이라 저희는 큰 문제는 없을테지만 ㅎㅎ;;) |
Beta Was this translation helpful? Give feedback.
-
|
@sounmind 님, 다시 에너지를 찾으셔서 블로그 초안을 완성하셔서 너무 기쁩니다! 힘든 과정이셨다는 것을 알기에 저도 정성들여서 리뷰를 하였습니다. 이전 글들을 보시면 우리 프로젝트 이름을 일관성있게 달레UI라고 칭하고 있습니다. 따라서 DaleUI를 달레UI로 수정 부탁드립니다. 그리고 가능하시다면 몇 가지 추가했으면 하는 내용이 있는데요.
글 세부 내용에 대한 피드백은 아래에 나열하도록 하겠습니다.
누가봐도 시작인 줄 아는데 굳이 "시작:" 이렇게 소제목을 붙일 필요가 있을까요? 그냥 소제목을 생략하고 다음과 같은 본문에 붙여서 써주시면 더 자연스러울 것 같습니다. 도입부 내용이 좋네요! 계속 읽어보고 싶도록 흥미를 끕니다.
원래는 독립 서비스였는데 2019년에 깃허브에 인수된 사실도 알려주시면 좋을 것 같습니다. 그리고 Renovate나 Snyk와 같은 경쟁 서비스도 언급해주시면 경쟁 서비스를 쓰고 있는 분들이 빨리 감을 잡는데 도움이 될 것 같습니다.
가급적 널리 사용되는 브랜드명은 한국어 사용
이 섹션 아주 흥미롭게 잘 읽었습니다. 예전 생각도 새록새록 나고 좋네요 ㅎㅎ Dependabot을 도입하시는 독자분들께 실질적으로 도움이 될 만한 내용이라고 생각합니다.
표현 순화
@hyoseong1994 님께서, #253 (comment) 에서 피드백 주신 것처럼 이 설정이 최근 React 보안 문제 관련해서 우리 프로젝트에 어떤 영향을 줬는지 조사해서 함께 공유해주시면 더 풍성해질 것 같습니다.
중간에 이상한 문자 (�)가 나옵니다.
@Hecklebot 님께서, #253 (comment) 에서 지적하신 것처럼 의존성 업데이트가 UI 변경을 일으키지 않는다는 것은 틀린 전제인 것 같습니다. 논란의 소지가 없도록 빌드 시간/비용 절약에 초점을 맞춰서 이 부분을 다시 작성해주셔야할 것 같습니다.
이 부분은 약간 모순이 되지 않나요? 결과론적으로 우리 프로젝트에 최적화된 설정을 깨닫게 되었지만, 이런 경험을 하지도 않고 과연 처음부터 완벽한 설정을 달성할 수 있었을까요? 최소 설정 못지 않은 시행착오를 겪었거나 아예 최적화된 설정을 얻지 못할 수도 있지 않았을까요?
도입부와 결론부의 방향성이 살짝 어긋나는 것 같아요. Dependabot 도입 과정을 들려주시다가 갑자기 도구 설정 방식에 대한 trade off로 급 전환되는 느낌이랄까요? 글 제목처럼 "Dependabot 도입기"에 집중하고, 최소 설정 vs. 상세 설정은 후속 포스팅에서 다뤄봐도 괜찮지 않을까 하는 생각이 듭니다. 이런 부분이 비단 Dependabot 뿐만 아니라 ESLint, Prettier 등 다른 도구들에도 적용될테니까요. |
Beta Was this translation helpful? Give feedback.
-
|
@DaleSeo @hyoseong1994 @Hecklebot 피드백 주신 분들 모두 감사합니다! 글을 업데이트했으니 시간 나실 때 한 번 확인해주시면 감사하겠습니다. |
Beta Was this translation helpful? Give feedback.
-
Dependabot 도입기: 달레UI 사례로 보는 의존성 관리 자동화디스커션 글 제목을 업데이트하는 게 나을 것 같습니다. |
Beta Was this translation helpful? Give feedback.
-
목차 내 링크를 클릭해도 작동하지 않는데 그냥 빼시죠. 긴 글이 아니라서 목차가 자리만 차지할 것 같습니다. |
Beta Was this translation helpful? Give feedback.
-
제가 이 글을 읽고 영감을 받아서 최근에 올렸던 PR 2개 #694, #703 가 있는데 관련 내용도 추가하시면 어떨까요? 특히 현재 기준으로 Dependabot이 Bun을 공식 지원하는 부분은 꼭 업데이트해야할 것 같습니다. |
Beta Was this translation helpful? Give feedback.
-
테스트 라이브러리 업데이트가 Chromatic에 영향을 줄 수 있는지 잘 모르겟습니다. 엄밀히 얘기해서 단위/통합 테스트에만 영향을 줄 수 있지 않나요? |
Beta Was this translation helpful? Give feedback.
-
|
블로깅 가이드 참고하셔서 기존 글들처럼 라이선스 문구 글 최하단에 추가 부탁드립니다. |
Beta Was this translation helpful? Give feedback.
-
|
@sounmind 추가적으로 보완할 부분에 대해서만 위에 코멘트 남깁니다. 이 것만 반영하시면 발행하셔도 될 것 같습니다! You made it! 축하드려요! 😃 |
Beta Was this translation helpful? Give feedback.


Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Dependabot 도입기: 달레UI 사례로 보는 의존성 관리 자동화
의존성, 어떻게 관리할까요?
"의존성, 어떻게 관리할까요?" 달레UI 프로젝트 초기, 팀 회의에서 질문이 나왔습니다.
"지금은 프로젝트가 작지만, 패키지들이 계속 업데이트되고 보안 취약점도 발견될 텐데... 이걸 어떻게 관리할까요?"
프로젝트가 막 시작되었을 때는 의존성이 많지 않았습니다. 하지만 팀원들은 문제가 생기기 전에 대비해야 한다는 점에 동의했습니다. 매주 수동으로
bun update를 실행하는 것보다, 자동화된 시스템을 처음부터 구축하는 것이 나을 것 같았습니다. 그렇게 우리는 Dependabot을 도입하기로 결정했습니다.Dependabot이란?
Dependabot은 깃허브에서 제공하는 자동화된 도구로, 프로젝트의 패키지 및 의존성을 지속적으로 모니터링하고 업데이트합니다. 원래는 독립 서비스였으나 2019년에 깃허브에 인수되어 현재는 깃허브 플랫폼에 통합되어 있습니다.
비슷한 도구로는 Renovate, Snyk 등이 있습니다. 이미 이런 도구를 사용하고 계시다면 Dependabot도 비슷한 방식으로 작동한다고 생각하시면 됩니다.
주요 기능:
처음에는 "설정 파일 하나만 추가하면 끝나겠지"라고 생각했습니다. 하지만 실제로 운영하면서 예상하지 못했던 다양한 문제들을 만났고, 그 과정에서 많은 것을 배웠습니다.
7개월간의 설정 진화
처음 달레UI에서 Dependabot을 도입할 때는 간단한 설정으로 시작했습니다.
2025년 3월 23일 - 첫 번째 설정:
7개월 후 - 진화한 설정 (2025년 10월 19일):
이 설정은 11개의 커밋을 통해 7개월에 걸쳐 점진적으로 완성되었습니다. 각 변경사항은 실제로 부딪힌 문제를 해결하기 위한 것이었습니다.
점진적인 변화의 과정
저희 팀은 결국 두 번째 방식을 선택했고, 그 결정에 따라 Dependabot 설정이 다음과 같은 과정을 통해 진화했습니다.
1단계: Bun 패키지 매니저로 전환 (2025.03.25)
문제: 프로젝트가 npm에서 Bun으로 패키지 매니저를 전환했지만, Dependabot은 여전히 npm으로 설정되어 있었습니다.
해결:
그런데, Bun은 당시 Dependabot의 베타 기능이었습니다. 다음 날 또 다른 문제를 만나게 됩니다.
2단계: Beta 에코시스템 활성화 (2025.03.26)
문제: Dependabot이 Bun을 인식하지 못하고 오류가 발생했습니다.
해결:
배운 점: 최신 패키지 매니저를 사용할 때는 Dependabot의 베타 기능 지원이 필요합니다. 또한 설정 파일의 구조를 정확히 이해해야 합니다. 처음에는
updates아래에 넣었다가 루트 레벨로 옮겨야 한다는 것을 배웠습니다.3단계: PR 폭증 문제 해결 (2025.03.27-28)
문제: 매일 수십 개의 Dependabot PR이 생성되어 팀의 리뷰 부담이 커졌습니다.
해결 1 - 패키지 그룹핑:
효과: Storybook 관련 5개 패키지가 하나의 PR로 통합되었습니다.
해결 2 - 업데이트 주기 조정:
배운 점: 너무 잦은 업데이트는 오히려 생산성을 떨어뜨릴 수 있습니다. 관련 패키지를 그룹화하면 테스트와 리뷰가 훨씬 효율적입니다.
4단계: React 패키지 그룹핑 (2025.04.03)
문제: React와 타입 정의가 따로 업데이트되면서 타입 불일치 오류가 발생했습니다.
해결:
배운 점: 서로 의존성이 있는 패키지는 반드시 함께 업데이트되어야 합니다. 특히 런타임 패키지와 타입 정의는 버전이 맞아야 합니다.
5단계: Vite 빌드 도구 그룹핑 (2025.05.07)
문제: Vite와 Vitest 버전이 따로 업데이트되면서 빌드 설정 호환성 문제가 발생했습니다.
해결:
배운 점: 같은 생태계의 도구들은 함께 관리하는 것이 좋습니다.
6단계: 쿨다운 기간 추가 (2025.10.19)
문제: 어떤 패키지는 너무 자주 업데이트되어 CI 빌드 비용이 증가하고 팀의 리뷰 피로도가 높아졌습니다.
해결:
효과: 같은 패키지가 연속으로 업데이트되는 것을 방지하여 안정적인 운영이 가능해졌습니다.
배운 점: 최신 버전을 즉시 적용하는 것보다 안정성과 팀 효율성이 더 중요할 수 있습니다.
쿨다운 설정 사용 시 주의사항:
쿨다운 설정을 사용할 때는 보안 업데이트와의 관계를 이해하는 것이 중요합니다.
dependabot.yml의 쿨다운 설정은 일반 의존성 업데이트에만 적용되며, Dependabot Security Updates는 별도로 작동합니다.실제 사례: React CVE 분석
2025년 12월, React Server Component 관련 보안 취약점이 연달아 발견되었습니다:
달레UI의 의존성은 12월 29일에 React 19.2.1 → 19.2.3으로 업데이트되었습니다. 이는 두 번째 CVE 발견(12/11)으로부터 18일이 지난 시점입니다. 쿨다운 설정(14일) 때문에 보안 패치가 지연된 것일까요?
아닙니다. 조사 결과, 이 CVE들은
react-server-dom-webpack,react-server-dom-parcel,react-server-dom-turbopack패키지에만 영향을 줍니다. 달레UI는 일반react와react-dom만 사용하며 Server Component 관련 패키지를 전혀 사용하지 않습니다. 따라서 GitHub Advisory Database에서 달레UI를 취약한 것으로 판단하지 않았고, Dependabot Security Update가 발생하지 않았습니다.보안 업데이트는 GitHub Advisory Database에 등록된 취약점에 대해 쿨다운, 스케줄 등의 설정과 독립적으로 자동 PR을 생성합니다. 따라서 쿨다운 설정을 사용하더라도 심각한 보안 취약점에 대해서는 자동으로 대응할 수 있습니다.
Dependabot 성공의 핵심: CI/CD 파이프라인
Dependabot 도입을 고려한다면, 먼저 탄탄한 CI/CD 파이프라인을 구축하세요.
Dependabot이 생성한 PR에 대해 빌드, 단위 테스트, 통합 테스트, 린트 검사가 자동으로 실행됩니다. 덕분에 CI가 통과하면 개발자가 깊게 리뷰하지 않아도 안전하게 병합할 수 있었습니다.
만약 이런 CI/CD 파이프라인이 없었다면, 다른 프로젝트에서 흔히 볼 수 있듯이 Dependabot PR이 오랫동안 방치되었을 것입니다. 개발자가 수동으로 테스트해야 한다면 의존성 업데이트는 항상 우선순위에서 밀리게 됩니다.
추가 최적화: Chromatic 건너뛰기
Dependabot PR에서 Chromatic(시각적 회귀 테스트 도구)을 건너뛰도록 설정했습니다.
이유: 대부분의 의존성 업데이트(예: TypeScript, ESLint, Vite 등)는 UI에 직접적인 영향을 주지 않으므로, Chromatic 테스트를 건너뛰어 빌드 시간과 비용을 절약할 수 있습니다.
Trade-off:
하지만 이 최적화에는 다음과 같은 위험이 있습니다:
달레UI 팀은 빌드 비용 절감을 우선시하여 이 설정을 유지하고 있지만, Dependabot PR 머지 후 수동으로 Chromatic 테스트를 실행하거나, 주기적으로 전체 테스트를 실행하여 의도치 않은 변경을 감지하는 것을 권장합니다. 프로젝트의 안정성 요구사항에 따라 이 설정을 조정할 수 있습니다.
Dependabot을 도입하고 나서
7개월간 Dependabot을 운영하면서 달레UI 팀이 얻은 것들:
기술적인 설정만큼이나 중요한 것이 팀 문화입니다. 처음에는 Dependabot PR이 오랫동안 방치되는 일이 있었습니다. 회고를 통해 이 문제를 인식하고, 팀원들이 Dependabot PR을 적극적으로 리뷰하고 병합하는 문화를 만들어갔습니다. 기술 도구는 팀이 함께 만드는 문화가 뒷받침될 때 비로소 제대로 작동합니다.
재미있는 사실 하나를 공유하자면, Dependabot을 몇 달 돌린 후 프로젝트 기여자 1등 자리를 Dependabot에게 뺏겼습니다. 그만큼 꾸준하게 프로젝트를 관리해주는 팀원도 없었습니다 😊
Dependabot은 단순히 설정 파일 하나를 추가하는 것이 아니라, 팀과 함께 성장하는 도구입니다. 의존성 관리에 시간을 빼앗기고 계신다면, Dependabot 도입을 고려해보세요. 달레UI의 7개월간의 여정이 여러분의 프로젝트에도 도움이 되길 바랍니다.
This work is licensed under CC BY 4.0

Beta Was this translation helpful? Give feedback.
All reactions