pnpm & Turborepo 모노레포에서 SVGR로 SVG 아이콘을 React 컴포넌트로 자동 변환하기

핵심 기술: 이 글은 pnpm과 Turborepo 기반의 모노레포 환경에서 SVGR을 활용하여 SVG 아이콘을 React 컴포넌트로 자동 변환하고, 이를 UI 공통 컴포넌트 라이브러리를 통해 여러 앱에서 효율적으로 사용하는 방법을 소개합니다.

기술적 세부사항:
* 프로젝트 구조: apps (docs, web)와 packages (eslint-config, typescript-config, ui)로 구성된 모노레포 구조를 사용합니다.
* SVG 자동 변환: vite-plugin-svgr을 사용하여 SVG 파일을 React 컴포넌트로 자동 변환합니다.
* packages/ui/vite.config.ts에서 svgr 플러그인을 설정하여 SVG 아이콘을 icon: true 옵션으로 변환합니다.
* packages/ui/src/icons/에 SVG 파일을 저장하고, icons.tsx 파일에서 ReactComponent as IconName 형식으로 export합니다.
* packages/ui/src/index.ts에서 아이콘 컴포넌트를 export하여 공통 라이브러리로 관리합니다.
* UI 공통 컴포넌트 활용: @repo/ui와 같이 aliasing을 통해 UI 라이브러리를 다른 앱에서 import하여 사용합니다.
* 타입 안전성: TypeScript를 적극적으로 활용하여 컴포넌트와 아이콘의 타입 안전성을 확보합니다.
* 디자인팀 SVG 활용: 디자인팀이 제공한 SVG 파일을 코드 수정 없이 그대로 활용할 수 있습니다.
* 개발 워크플로우: SVG 파일 추가 및 export만으로 새로운 아이콘 사용이 가능하며, UI 컴포넌트 수정 시 Hot Reload를 통해 즉시 반영됩니다.
* 라이브러리 설정: packages/ui의 tsconfig.json에서 @/* 경로 별칭을 설정하여 코드 가독성을 높입니다.

개발 임팩트:
* 개발 효율성: SVG 파일만으로 React 컴포넌트가 자동 생성되어 개발 시간을 단축하고, Hot Reload 기능으로 즉각적인 피드백을 얻을 수 있습니다.
* 유지보수성: SVG 파일만 교체하면 관련 컴포넌트가 자동으로 업데이트되어 유지보수가 용이하며, 일관된 방식으로 아이콘을 관리할 수 있습니다.
* 타입 안전성: TypeScript 적용으로 컴파일 시점에 오류를 잡아내어 코드의 안정성을 높입니다.
* 확장성: 모노레포 구조와 공통 UI 라이브러리 구축을 통해 대규모 프로젝트에서도 재사용성과 관리 용이성을 확보합니다.

커뮤니티 반응: (원문에 직접적인 커뮤니티 반응 언급은 없으나, 언급된 기술 스택(pnpm, Turborepo, Vite, SVGR)은 개발자 커뮤니티에서 널리 사용되고 긍정적인 평가를 받고 있습니다.)