[CHORE] 패키지 버전 업데이트

[i-meant-to-be]

🚩 연관 이슈

closed #413

📝 작업 내용

우리 프로젝트, 오랜 시간 의존성 업데이트를 진행하지 않아 GitHub Dependabot이 19개의 경고를 띄우고 npm은 매우 심각한 취약점이 여러 개 있다고 열심히 울부짖고 있었습니다. 이에, 서비스와 작업 환경에 최대한 문제를 일으키지 않는 선에서 라이브러리 업데이트를 진행했습니다.

진행 과정

기본적으로 여러 라이브러리간 의존성을 잘 살피며 업데이트를 진행해야 하기 때문에, 가장 문제가 없을 라이브러리부터 문제의 소지가 많은 라이브러리의 순서로 진행했습니다.

1단계: 단순 유틸리티, 타입 정의 등 라이브러리

가장 문제의 소지가 적고 개발에 영향이 적은 라이브러리들의 버전을 갱신했습니다. 목록은 아래와 같아요:

• Dependencies: axios, clsx, pako, qrcode.react, react-icons, react-ga4, vite-bundle-visualizer
• DevDependencies: prettier, @types/*, tsx, glob

2단계: 핵심 기능 로직 라이브러리

데이터 페칭 및 라우팅 등 앱 로직과 직접 연관된 라이브러리의 버전을 갱신했습니다. 목록은 아래와 같아요:

• @tanstack/react-query, @tanstack/eslint-plugin-query
• i18next, react-i18next, i18next-browser-languagedetector, i18next-http-backend
• react-router-dom
• framer-motion

3단계: 빌드 도구 및 린팅 관련

Vite와 ESLint 관련 업데이트를 진행했습니다. 목록은 아래와 같아요:

• Vite, @vitejs/plugin-react
• Vitest, @testing-library/*, jsdom, msw
• TypeScript
• ESLint 및 관련 플러그인들 (eslint-plugin-*)

메이저 업데이트를 진행하지 않은 라이브러리

TailwindCSS와 Storybook

TailwindCSS와 Storybook은 각각 v3에서 v4로, v8에서 v10으로 메이저 업데이트를 진행해야 하고, 그 과정에서 단순히 npm update나 npm install이 아닌 별도의 마이그레이션 작업이 필요하다는 점에서 서비스 안정성을 크게 훼손시킬 것으로 생각되어 마이너 업데이트만 진행하였습니다. 특히, Storybook과 관련하여, 우리 프로젝트에서 사용하는 일부 Storybook의 플러그인이 최신 버전 v10을 따라가지 못하고 여전히 v9나 v8에 머물고 있어, 업데이트 자체가 불가능하기도 했어요. 그래서 이 2개 라이브러리는 메이저 버전을 그대로 유지합니다.

TypeScript

TS 버전은 5.7로 고정합니다. 현재 프로젝트에서 사용하는 ESLint 버전은 TS 5.8 미만까지만 지원하기 때문에, 그 이상의 버전을 사용할 수 없습니다. 따라서 ESLint가 감당 가능한 최신 버전인 5.7로 고정합니다.

Vite

Vite 버전은 v6로 고정합니다. v7이 나와 있기는 하나, 현재 사용하고 있는 (그리고 어쩔 수 없이 눈물을 머금고 사용해야만 하는) Storybook v8.6.15는 Vite v7과 호환되지 않습니다. 따라서 우리가 택할 수 있는 선택지는...

• Vite v7 사용하고 Storybook도 v10 사용
• Storybook을 어쩔 수 없이 v8로 유지하고 Vite도 v6로 유지

이렇게 2개가 있는데요. 앞에서 말씀을 드렸듯이 우리가 사용하고 있는 Storybook 플러그인이 Storybook 버전을 따라가지 못하기 때문에 Storybook v8을 사용해야만 하고, 따라서 남는 선택지는 둘 중 후자밖에 없습니다.

🏞️ 스크린샷 (선택)

없음

🗣️ 리뷰 요구사항 (선택)

일단 제 환경에서는 별도의 빌드 및 린팅에서의 문제 및 npm run dev를 통한 데모 실행 시의 문제가 발생하진 않았습니다. 썬데이의 환경에서도 잘 동작하는지 아래 절차를 따라가면서 확인 부탁드려요:

• 브랜치를 현재 PR의 chore/#413으로 전환
• 프로젝트 루트 폴더의 node_modules 디렉토리와 package-lock.json 완전히 삭제
• npm i로 모든 패키지 재설치
• npm run lint로 린팅 및 빌드 진행해보기
• 문제 없다면 npm run dev로 주요 기능 테스트해보기

Summary by CodeRabbit

릴리스 노트

• New Features

  • 요청 처리 및 클라이언트 통신 메커니즘 개선.

• Improvements

  • 다양한 라이브러리 버전 업그레이드로 성능 및 안정성 향상.
  • 렌더링 성능 최적화를 위한 내부 메모이제이션 개선.

[coderabbitai]

Walkthrough

이번 PR은 프로젝트 의존성 및 개발 도구 버전을 업데이트하고, MSW(Mock Service Worker) 버전을 2.7.0에서 2.12.7로 업그레이드합니다. 또한 몇 가지 컴포넌트와 훅에서 소소한 코드 개선을 적용합니다.

Changes

Cohort / File(s)	Summary
의존성 및 개발 도구 업데이트 package.json	@TanStack 패키지, axios, framer-motion, i18next, react-router-dom 등의 주요 라이브러리 버전 업그레이드. Storybook, TypeScript, Vite, Vitest, ESLint 등 개발 도구 업데이트.
Mock Service Worker 기능 확장 public/mockServiceWorker.js	MSW 2.12.7로 업그레이드하며 요청 직렬화, 향상된 메시지 페이로드, 타임스탐프 추적, 그리고 응답 처리 로직 개선. 클라이언트 활성화 및 요청-응답 통신 파이프라인 재구성.
컴포넌트 및 훅 개선 src/components/SmallIconContainer/SmallIconContainer.tsx, src/hooks/mutations/usePreventDuplicateMutation.ts, src/page/TimerPage/hooks/useTimerPageState.ts	인터페이스 선언 포매팅, 인자 전달 개선, useCallback을 통한 함수 메모이제이션 추가.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• [FIX] 버튼 "따닥"으로 인한 중복 호출로 시간표가 여러 개 생기는 문제 해결 #321: usePreventDuplicateMutation 훅의 onSettled 인자 처리 방식 변경과 관련
• [FEAT] 종소리 크기 조절 기능 #403: useTimerPageState 훅 파일의 이전 변경사항과 연계

Suggested reviewers

• useon
• jaeml06

Poem

🐰 패키지 춤을 춘다, 버전이 올라올라,
MSW 친구도 2.12.7로 신나게,
작은 훅들도 메모아이제이션으로 반짝반짝,
의존성의 숲을 지나 더 견고한 발걸음으로! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목은 패키지 버전 업데이트라는 주요 변경 내용을 명확하고 간결하게 요약하고 있습니다.
Linked Issues check	✅ Passed	PR의 코드 변경 사항들이 연결된 이슈 #413의 패키지 버전 업데이트 목표를 충족합니다.
Out of Scope Changes check	✅ Passed	SmallIconContainer.tsx의 포맷팅 변경과 usePreventDuplicateMutation.ts, useTimerPageState.ts의 개선 사항들은 안정성 및 성능 최적화를 위한 필수 보완 작업입니다.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch chore/#413

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Summary of Changes

Hello @i-meant-to-be, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 프로젝트의 의존성 라이브러리들을 최신 버전으로 업데이트하여 GitHub Dependabot 경고 및 npm 취약점을 해결하는 것을 목표로 합니다. 서비스 안정성을 최우선으로 고려하여, 호환성 문제가 발생할 수 있는 특정 라이브러리(TailwindCSS, Storybook, TypeScript, Vite)의 메이저 업데이트는 신중하게 보류하고 마이너 업데이트만 진행했습니다. 또한, MSW 서비스 워커 로직 개선 및 일부 React 훅의 최적화 변경사항도 포함되어 있습니다.

Highlights

• 주요 의존성 업데이트: GitHub Dependabot 경고 및 npm 취약점 해결을 위해 package.json에 명시된 수많은 라이브러리 버전이 업데이트되었습니다.
• 단계별 업데이트 전략: 유틸리티, 핵심 기능 로직, 빌드 도구 및 린팅 관련 라이브러리 순서로 신중하게 업데이트가 진행되어 잠재적인 호환성 문제를 최소화했습니다.
• 메이저 업데이트 보류: TailwindCSS, Storybook, TypeScript, Vite는 호환성 및 마이그레이션 문제로 인해 메이저 버전 업데이트가 보류되었으며, 안정성을 위해 마이너 업데이트만 진행되었습니다.
• MSW 서비스 워커 개선: public/mockServiceWorker.js 파일에서 MSW 버전이 업데이트되었고, fetch 이벤트 처리 로직이 개선되었으며, 요청 직렬화(serializeRequest) 기능이 추가되었습니다.
• 코드 최적화: usePreventDuplicateMutation 훅의 onSettled 콜백 인자 처리 방식이 개선되었고, useTimerPageState 훅의 toggleVolumeBar 함수가 useCallback으로 래핑되어 불필요한 리렌더링을 방지하고 성능을 최적화했습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

이 PR은 다수의 의존성 패키지를 비정상적으로 높은 버전으로 업데이트하고 있습니다. 이는 심각한 보안 위협을 초래할 수 있는 악성 패키지(malicious package)를 설치하게 될 위험이 매우 큽니다. 예를 들어, axios의 공식 최신 버전은 1.7.2이지만, 이 PR에서는 1.13.4로 업데이트하고 있습니다. 이는 전형적인 typosquatting 또는 dependency confusion 공격 패턴입니다. 업데이트된 거의 모든 패키지에서 동일한 문제가 발견되었습니다.

프로젝트의 보안을 위해, 이 PR에서 변경된 모든 의존성 버전을 npmjs.com과 같은 공식 패키지 저장소에서 확인하여 최신 안정화 버전(stable version)으로 수정해야 합니다. 또한, 개발 환경의 npm registry 설정이 변조되지 않았는지 확인하고, package-lock.json 파일을 삭제한 후 npm install을 다시 실행하여 올바른 패키지가 설치되도록 해야 합니다. 각 문제점에 대해 상세한 리뷰 코멘트를 남겼으니 확인 부탁드립니다.

[useon]

숀 ~ 확인 안내대로 했는데 제대로 정상 작동하는 것 확인했습니다 ! 감사합니다 ^.^