[프로젝트 회고] STDev 해커톤

1. 피그마 SVG Export할 때는 Frame으로 감싸주고, 바로 밑에 하나의 벡터 이미지가 존재하도록.

 

2. Vite에서 SVG 사용할 때, 로컬에서는 잘 되는데 배포 환경에서 안되는 경우.

 

import { ReactComponent as Logo } from './logo.svg'; // 이건 CRA 방식

 

Vite는 기본적으로 CRA 방식을 지원하지 않으므로 vite-plugin-svgr를 설치해야 합니다.

npm install vite-plugin-svgr

// vite.config.ts or vite.config.js
import { defineConfig } from 'vite';
import svgr from 'vite-plugin-svgr';
import react from '@vitejs/plugin-react'; // React 프로젝트라면 이게 있어야 함

export default defineConfig({
  plugins: [react(), svgr()],
});

 

🔥 올바른 방법:

import { ReactComponent as Logo } from './logo.svg'; // ✅ CRA 스타일 지원하려면 설정 필요
// 또는
import Logo from './logo.svg?component'; // ✅ Vite 권장 방식

 

 

타입스크립트에서 오류

// src/images.d.ts (또는 types/svg.d.ts 등)
declare module '*.svg?component' {
  import * as React from 'react';
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  export default ReactComponent;
}
declare module '*.svg?react' {
  import * as React from 'react';
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  export default ReactComponent;
}

이 선언이 없다면 IDE나 TS 빌드에서 "모듈을 찾을 수 없습니다" 같은 오류가 납니다.

 

빌드 경로 확인

// vite.config.ts
export default defineConfig({
  base: '/', // 또는 '/your-repo-name/' if using GitHub Pages
});

 

정 안 될 경우 fallback

import logoUrl from './logo.svg?url';

<img src={logoUrl} alt="logo" />

SVG를 그냥 URL로 쓰고 싶다면 ?url을 붙이세요.