파편화 프로젝트 통합: 모노레포 프론트엔드 환경 구축
기존에 파편화된 프로젝트들을 통합
각 프로젝트의 컨벤션을 통합 (eslint, prettier, jsconfig 등)
같은 Node.js 버전, React 버전 사용 → 컨테이너화 및 환경 일관성 확보새로운 프로젝트 생성 시 반복적인 설정 작업 제거
Turborepo를 활용 하여 빌드 시 다른 프로젝트 파일까지 불필요하게 빌드되는 문제 방지 및 캐싱 적용pnpm 사용 → 패키지 버전 관리와 빌드 속도 향상.svg와 .svg?react 혼용 문제 개선 → vite-plugin-svgr와 withFilter 사용기존 React + Webpack + CRACO 프로젝트 → Vite로 마이그레이션
신규 Vite 프로젝트에 Playwright를 이용한 E2E 테스트 환경 구축
빌드 시 환경 분기 처리 : prod, dev, qa(stage) 적용글로벌 설정을 위해 .prettierrc.js, .eslintrc.js .vscode/setting.json root에 지정
공통 ui IntelliSense 기능 추가 (자동완성)
이후부터는 회사 코드 적용 → 비공개 레포지토리로 재구성
cd ./apps
pnpm create vite@latest vite-app pnpm --filter [프로젝트명] dev
ex) $ pnpm --filter vite-app dev Vite Config (Webpack + CRACO 프로젝트 마이그레이션용) import { defineConfig } from "vite" ;
import svgr from "vite-plugin-svgr" ;
import { withFilter } from "@rollup/pluginutils" ;
plugins: [
withFilter (
svgr ( {
/* 옵션 */
} ) ,
{
load : {
// 모든 .svg .svgr 파일을 필터 처리
id : / \. s v g ( \? r e a c t ) ? $ / ,
} ,
} ,
) ,
] ; "dependencies" : {
"@repo/ui" : " workspace:*" import { Button } from "@repo/ui/Button" ;
function App ( ) {
return (
< div >
< Button appName = "vite-app" > 공통 ui 버튼 < / B u t t o n > < / div >
) ;
} apps안에서 공통 ui IntelliSense [자동완성] 추가하기 tsconfig.json {
"extends" : " @repo/typescript-config/react-library.json" "compilerOptions" : {
"outDir" : " dist" "include" : [" src" "exclude" : [" node_modules" 전체 prettier, eslint 설정 - root
.eslintrc.js 참조
.prettierrc.js 참조