[chore] 빌드 툴 Webpack to Vite 전환#844
Conversation
- vite - vitejs/react - ts-paths-config
maw 의존성을 개발 디펜던시로 변경
lepitaaar
requested review from
oesnuj,
seongje973,
seongwon030 and
suhyun113
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | 변경 요약 |
|---|---|
Vite 설정 및 HTML frontend/config/vite.config.ts, frontend/index.html |
Vite 설정 파일 추가(react, tsconfigPaths 플러그인, DEFAULT_PORT=3000) 및 앱 진입용 HTML 문서 추가 |
패키지 스크립트·의존성 전환 frontend/package.json |
dev/build 스크립트를 Vite로 전환하고 Vite 관련 devDependencies 추가, msw를 devDependencies로 이동; 기존 webpack 명령은 webpack:* 별칭으로 보존 |
환경 변수 접근 방식 변경 frontend/src/constants/api.ts, frontend/src/index.tsx, frontend/src/utils/initSDK.ts |
process.env 사용을 import.meta.env/import.meta.env.VITE_*/import.meta.env.DEV로 교체 |
관리자 라우팅 분리 및 코드 분할 frontend/src/App.tsx, frontend/src/pages/AdminPage/AdminRoutes.tsx |
관리자 서브 라우트를 AdminRoutes로 분리하여 React.lazy로 동적 로드하도록 변경 |
타입스크립트 설정 업데이트 frontend/tsconfig.json |
"types": ["vite/client"] 추가 및 include 항목 포맷 정리 |
Sequence Diagram(s)
sequenceDiagram
autonumber
actor Browser
participant App as App.tsx
participant Router as React Router
participant AdminChunk as AdminRoutes (lazy)
rect `#E6F7FF`
note right of AdminChunk: 변경된 흐름 — Admin 경로는 동적 임포트로 로드
end
Browser->>App: 요청 /admin/...
App->>Router: 라우팅 전달 (/admin/*)
Router->>AdminChunk: dynamic import 트리거
activate AdminChunk
AdminChunk-->>Router: Admin 라우트 컴포넌트 반환
deactivate AdminChunk
Router-->>Browser: Admin 페이지 렌더링
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~25 minutes
- 주의할 파일/영역:
frontend/package.json: CI/CD 및 배포 스크립트와의 호환성, webpack alias 보존 여부frontend/src/utils/initSDK.ts: Sentry/Mixpanel/Kakao 등에 전달되는 VITE env 값 검증frontend/src/index.tsx및 MSW: 개발 모드에서 mocking 동작 확인frontend/src/pages/AdminPage/AdminRoutes.tsx: 라우트 매핑과 번들 분할 확인
Possibly related issues
- [chore] MOA-322 빌드 툴을 VITE로 마이그레이션 합니다. #841 — Vite 마이그레이션(설정·스크립트·env 변경 등)과 직접적으로 일치함.
- MOA-322 — 빌드 툴을 VITE로 마이그레이션하는 목표와 일치함.
Possibly related PRs
- [refactor] ESLint 설정 리펙토링 및 불필요한 항목 정리 #437 — React 기본 import 제거 및 tsconfig/설정 관련 변경과 중복되는 코드 패턴이 있어 연관성이 높음.
Suggested labels
⚙ Setting, 💻 FE
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. | You can run @coderabbitai generate docstrings to improve docstring coverage. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | PR 제목은 Webpack에서 Vite로의 빌드 툴 전환이라는 주요 변경사항을 명확하고 간결하게 설명하고 있습니다. |
| Linked Issues check | ✅ Passed | PR의 모든 코드 변경사항이 MOA-322 이슈의 요구사항인 Webpack에서 Vite로의 마이그레이션을 완료하고 있습니다. |
| Out of Scope Changes check | ✅ Passed | 모든 변경사항이 Vite 마이그레이션과 직접 관련되어 있으며, 특히 AdminRoutes 분리를 통한 코드 스플리팅은 Vite 도입의 성능 이점을 극대화하기 위한 범위 내 변경입니다. |
✨ 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/#841-change-webpack-to-vite-MOA-322
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.
Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/App.tsx (1)
43-52: Suspense 경계 누락으로 인한 런타임 에러 발생
AdminRoutes가 lazy-loaded 컴포넌트이지만Suspense로 감싸지지 않았습니다. React의 lazy-loaded 컴포넌트는 반드시Suspense경계 내에서 렌더링되어야 합니다. 현재 상태에서는/admin/*경로 접근 시 런타임 에러가 발생합니다.MainPage와 ClubDetailPage는 이미 Suspense로 감싸져 있는 것을 확인할 수 있습니다 (lines 28-30, 36-38).
다음 diff를 적용하여 AdminRoutes를 Suspense로 감싸세요:
<Route path='/admin/*' element={ <AdminClubProvider> <PrivateRoute> - <AdminRoutes /> + <Suspense fallback={null}> + <AdminRoutes /> + </Suspense> </PrivateRoute> </AdminClubProvider> } />
🧹 Nitpick comments (3)
frontend/config/vite.config.ts (1)
7-12: 기본 Vite 설정이 올바르게 구성되었습니다. 추가 설정 검토를 권장합니다.현재 설정은 개발 환경에 적합하지만, 프로덕션 빌드 최적화를 위해 다음 설정 추가를 고려해보세요:
- 빌드 출력 디렉토리:
build.outDir설정- 환경 변수 접두사:
envPrefix명시적 설정 (기본값 확인)- 청크 분할 전략:
build.rollupOptions.output.manualChunks- 소스맵 설정:
build.sourcemap(프로덕션용)추가 가능한 설정 예시:
export default defineConfig({ plugins: [react(), tsconfigPaths()], server: { port: DEFAULT_PORT, }, build: { outDir: 'dist', sourcemap: false, // 프로덕션에서는 false 권장 rollupOptions: { output: { manualChunks: { 'react-vendor': ['react', 'react-dom', 'react-router-dom'], // 기타 벤더 번들링 전략 }, }, }, }, envPrefix: 'VITE_', // 명시적으로 설정 });frontend/index.html (1)
56-60: Kakao SDK 스크립트 로딩 최적화를 고려해보세요.현재 Kakao SDK가
<head>에서 동기적으로 로드되어 페이지 렌더링을 차단할 수 있습니다. 초기 로딩 성능 개선을 위해defer또는async속성 추가를 고려해보세요.<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.5/kakao.min.js" integrity="sha384-dok87au0gKqJdxs7msEdBPNnKSRT+/mhTVzq+qOhcL464zXwvcrpjeWvyj1kCdq6" crossorigin="anonymous" + defer ></script>다만,
initializeKakaoSDK()가startApp()이전에 호출되므로 스크립트 로딩 순서가 중요한지 확인이 필요합니다.frontend/src/App.tsx (1)
12-12: 일관성을 위해 IntroducePage도 lazy loading 고려다른 주요 페이지들(MainPage, ClubDetailPage, AdminRoutes)은 모두 lazy loading을 적용하고 있지만,
IntroducePage만 직접 import 하고 있습니다. 번들 크기 최적화와 일관된 코드 스플리팅 패턴을 위해 lazy loading을 고려해보세요.필요시 다음과 같이 변경할 수 있습니다:
-import IntroducePage from './pages/IntroducePage/IntroducePage'; +const IntroducePage = lazy(() => import('./pages/IntroducePage/IntroducePage'));그리고 Route 정의를 Suspense로 감싸세요:
- <Route path='/introduce' element={<IntroducePage />} /> + <Route + path='/introduce' + element={ + <Suspense fallback={null}> + <IntroducePage /> + </Suspense> + } + />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (9)
frontend/config/vite.config.ts(1 hunks)frontend/index.html(1 hunks)frontend/package.json(4 hunks)frontend/src/App.tsx(2 hunks)frontend/src/constants/api.ts(1 hunks)frontend/src/index.tsx(1 hunks)frontend/src/pages/AdminPage/AdminRoutes.tsx(1 hunks)frontend/src/utils/initSDK.ts(3 hunks)frontend/tsconfig.json(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-05-16T06:25:11.193Z
Learnt from: seongwon030
Repo: Moadong/moadong PR: 418
File: frontend/src/mocks/api/clubHandlers.test.ts:0-0
Timestamp: 2025-05-16T06:25:11.193Z
Learning: API 관련 상수(예: API_BASE)는 frontend/src/mocks/constants/api.ts에 정의되어 있으며, 다른 파일에서 재정의하지 말고 이 파일에서 import하여 사용해야 합니다.
Applied to files:
frontend/src/constants/api.ts
📚 Learning: 2025-07-20T11:48:50.207Z
Learnt from: seongwon030
Repo: Moadong/moadong PR: 541
File: frontend/src/pages/ClubDetailPage/components/ClubDetailHeader/ClubDetailHeader.tsx:41-43
Timestamp: 2025-07-20T11:48:50.207Z
Learning: moadong 프로젝트는 Next.js가 아닌 순수 React + react-router-dom 기반의 CSR(Client-Side Rendering) SPA이므로, window 객체 사용에 대한 SSR 호환성 문제를 제기하지 않아야 합니다.
Applied to files:
frontend/index.htmlfrontend/src/App.tsx
🧬 Code graph analysis (1)
frontend/src/App.tsx (1)
frontend/src/pages/AdminPage/AdminRoutes.tsx (1)
AdminRoutes(13-32)
🔇 Additional comments (11)
frontend/tsconfig.json (1)
19-19: LGTM! Vite 타입 정의가 올바르게 추가되었습니다.
import.meta.env타입 지원을 위한vite/client타입 추가가 적절합니다.frontend/src/pages/AdminPage/AdminRoutes.tsx (1)
1-32: LGTM! 관리자 라우팅 코드 분할이 잘 구현되었습니다.Admin 관련 컴포넌트를 별도 라우팅 모듈로 분리하여 동적 import를 통한 코드 분할이 가능해졌습니다. 번들 크기 감소(27.02%)에 기여하는 좋은 최적화입니다.
frontend/src/utils/initSDK.ts (3)
6-7: LGTM! Mixpanel 환경 변수가 올바르게 마이그레이션되었습니다.
VITE_접두사가 적절하게 추가되었습니다.
20-22: LGTM! Channel 서비스 환경 변수가 올바르게 마이그레이션되었습니다.
VITE_CHANNEL_PLUGIN_KEY환경 변수명이 적절합니다.
41-52: LGTM! Kakao SDK 환경 변수가 올바르게 마이그레이션되었습니다.
VITE_KAKAO_JAVASCRIPT_KEY환경 변수명이 적절합니다.frontend/package.json (3)
6-8: LGTM! Vite 기반 스크립트로 올바르게 전환되었습니다.개발 서버와 빌드 스크립트가 Vite를 사용하도록 업데이트되었습니다.
9-11: LGTM! 하위 호환성을 위한 webpack 별칭이 잘 추가되었습니다.기존 webpack 워크플로우를 보존하면서 Vite로 전환할 수 있도록
webpack:*별칭을 제공하는 것은 좋은 접근입니다.
92-92: LGTM! msw를 devDependencies로 올바르게 이동했습니다.MSW는 개발/테스트 환경에서만 사용되므로
devDependencies에 위치하는 것이 적절합니다.frontend/src/index.tsx (1)
16-16: LGTM! Vite의 개발 환경 플래그로 올바르게 전환했습니다.
import.meta.env.DEV는 Vite가 제공하는 boolean 플래그로, 개발 환경 확인에 더 직관적입니다.frontend/index.html (1)
1-67: LGTM! Vite 진입점 HTML이 올바르게 구성되었습니다.HTML 구조, 메타 태그, 외부 리소스 로딩이 모두 적절하게 설정되어 있습니다.
type="module"을 사용한 스크립트 로딩도 Vite의 표준 방식입니다.frontend/src/constants/api.ts (1)
1-1: 환경 변수 설정 파일 확인이 필요합니다.코드 변경 (
process.env.API_BASE_URL→import.meta.env.VITE_API_BASE_URL)은 올바르게 되었습니다. 다만.env파일이.gitignore에 포함되어 있어 저장소에서 직접 확인할 수 없으므로, 개발 환경에서 다음을 확인해주세요:
- 로컬의
.env파일에서VITE_API_BASE_URL환경 변수가 정의되어 있는지 확인- 다른
.env.*파일들(.env.development,.env.production등)에서도 변수명이 업데이트되었는지 확인
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/package.json (1)
28-33: 빌드/테스트 전용 패키지를 devDependencies로 이동하세요.
@sentry/webpack-plugin,dotenv-webpack,jest-fixed-jsdom는 빌드 시점 또는 테스트 시점에만 필요한 패키지입니다.dependencies에 포함되면 프로덕션 배포 시 불필요하게 설치됩니다.다음과 같이 수정해주세요:
dependencies에서 제거:"@sentry/react": "^9.18.0", - "@sentry/webpack-plugin": "^3.4.0", "@tanstack/react-query": "^5.66.0","date-fns": "^4.1.0", - "dotenv-webpack": "^8.1.0", "framer-motion": "^12.23.12", - "jest-fixed-jsdom": "^0.0.9", "mixpanel-browser": "^2.60.0",
devDependencies에 추가:"@chromatic-com/storybook": "^3.2.4", "@eslint/js": "^9.17.0", + "@sentry/webpack-plugin": "^3.4.0","css-loader": "^7.1.2", "css-minimizer-webpack-plugin": "^7.0.0", "detect-port": "^2.1.0", + "dotenv-webpack": "^8.1.0", "esbuild-loader": "^4.3.0","jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "jest-fetch-mock": "^3.0.3", + "jest-fixed-jsdom": "^0.0.9", "jest-transform-stub": "^2.0.0",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
frontend/package.json(3 hunks)frontend/src/utils/initSDK.ts(3 hunks)
🔇 Additional comments (2)
frontend/src/utils/initSDK.ts (1)
5-56: 환경 변수 마이그레이션이 올바르게 완료되었습니다.모든 환경 변수가
process.env에서import.meta.env로 올바르게 변경되었으며, 클라이언트 측 변수에는VITE_접두사가 적절히 적용되었습니다. 이전 리뷰 코멘트에서 지적된 Sentry 환경 변수 이슈도 해결되었습니다.frontend/package.json (1)
6-11: 스크립트 마이그레이션이 잘 되었습니다.Vite 명령어로 전환하면서도 기존 Webpack 스크립트를
webpack:*접두사로 보존한 것은 좋은 접근입니다. 필요시 롤백이나 비교 테스트가 용이합니다.
seongwon030
left a comment
seongwon030
left a comment
There was a problem hiding this comment.
vite 마이그레이션 좋습니다
lazy로 관리자페이지 로딩 지연한 것도 인상깊네요 ~ 먼가 webpack에서 더 최적화할 부분이 없었을까 하는 미련이 남네요. 시간되면 공부목적으로 한 번 해 보는 것도 좋을 듯 합니다
There was a problem hiding this comment.
vite 마이그레이션!!
노션에 webpack과 비교 정리 해주신 부분 잘 보았습니다.
저도 webpack에서 더 최적화할 부분이 없었을까 하는 미련이 조금 남긴 합니다.
다만 기존에 개발 모드에서 타입 검사까지 수행하면서 느렸던 부분도 있었던 것 같은데, Vite는 기본적으로 타입 검사를 하지 않아 이 부분에서도 더 빠른 것 같네요.
추가로 Vite는 개발 모드에서 번들링 없이 ESM을 직접 제공해서 webpack dev server 대비 큰 속도 향상이 있군요! 👍
+++ .env 파일 변경 사항(VITE_ prefix 등)이 있어서 배포 시 환경변수 설정 부분도 함께 확인이 필요할 것 같습니다!
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/App.tsx (1)
45-54: Lazy 컴포넌트에 Suspense 래퍼가 누락되었습니다.
AdminRoutes는 lazy-loaded 컴포넌트이지만Suspense경계로 감싸지지 않았습니다. 이는 런타임 에러를 발생시킵니다.MainPage와ClubDetailPage는 올바르게Suspense로 감싸져 있으므로,AdminRoutes도 동일한 패턴을 적용해야 합니다.다음 diff를 적용하여 수정하세요:
<Route path='/admin/*' element={ - <AdminClubProvider> - <PrivateRoute> - <AdminRoutes /> - </PrivateRoute> - </AdminClubProvider> + <Suspense fallback={null}> + <AdminClubProvider> + <PrivateRoute> + <AdminRoutes /> + </PrivateRoute> + </AdminClubProvider> + </Suspense> } />
🧹 Nitpick comments (1)
frontend/src/App.tsx (1)
12-12: 일관성을 위해 IntroducePage도 lazy loading 고려하기.
MainPage,ClubDetailPage,AdminRoutes는 lazy-loaded되지만IntroducePage는 일반 import로 로드됩니다. 번들 크기를 추가로 최적화하려면 이 페이지도 lazy loading을 적용할 수 있습니다.적용하려면 다음과 같이 수정하세요:
-import IntroducePage from './pages/IntroducePage/IntroducePage'; +const IntroducePage = lazy(() => import('./pages/IntroducePage/IntroducePage'));그리고 라우트에 Suspense를 추가하세요:
- <Route path='/introduce' element={<IntroducePage />} /> + <Route + path='/introduce' + element={ + <Suspense fallback={null}> + <IntroducePage /> + </Suspense> + } + />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
frontend/src/App.tsx(2 hunks)frontend/src/pages/AdminPage/AdminRoutes.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-07-20T11:48:50.207Z
Learnt from: seongwon030
Repo: Moadong/moadong PR: 541
File: frontend/src/pages/ClubDetailPage/components/ClubDetailHeader/ClubDetailHeader.tsx:41-43
Timestamp: 2025-07-20T11:48:50.207Z
Learning: moadong 프로젝트는 Next.js가 아닌 순수 React + react-router-dom 기반의 CSR(Client-Side Rendering) SPA이므로, window 객체 사용에 대한 SSR 호환성 문제를 제기하지 않아야 합니다.
Applied to files:
frontend/src/App.tsx
🧬 Code graph analysis (1)
frontend/src/App.tsx (1)
frontend/src/pages/AdminPage/AdminRoutes.tsx (1)
AdminRoutes(13-36)
🔇 Additional comments (1)
frontend/src/pages/AdminPage/AdminRoutes.tsx (1)
1-36: 잘 구현되었습니다!관리자 라우트가 깔끔하게 분리되어 코드 스플리팅에 적합한 구조입니다. 빈 경로(
path='')와 중첩된 라우트 구조가 React Router v7과 부모의/admin/*경로와 올바르게 작동합니다.
3 participants
#️⃣연관된 이슈
#841
📝작업 내용
webpack보다 vite가 왜 빠를까?
https://lepitar.notion.site/webpack-vite-versus?source=copy_link
Code Splitting 적용
Admin 관련 컴포넌트들을 모아 AdminRoutes로 묶고 dynamic import를 적용했습니다.
따라서 기존 index.js bundle size 544kb -> 397kb 27.02% 감소
LightHouse 측정
빌드속도
5.92s -> 2.52s
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
New Features
Chores
✏️ Tip: You can customize this high-level summary in your review settings.