Dorong Dorong 💻😴

SVG를 별도의 컴포넌트로 만들지 않고도 컴포넌트처럼 사용할 수 있도록 Webpack 설정을 추가한 과정을 공유해 보려고 합니다.

프로젝트에서 첫 번째 SVG인 햄버거 아이콘을 SVG로 적용하면서 겪은 문제와 그 해결 과정을 함께 나누겠습니다.

SVG 파일을 직접 사용하는 이유

SVG를 img 태그가 아닌 컴포넌트처럼 사용하려면 일반적으로 함수형 컴포넌트로 변환하는 방법도 있지만, 저는 .svg 확장자를 그대로 사용하는 것이 파일 관리 측면에서 더 편하다고 느꼈습니다. 몇 가지 이유를 들어보겠습니다.

1. 파일 관리 용이성: SVG 파일을 별도의 컴포넌트로 만들 필요 없이, 파일 경로를 통해 쉽게 가져올 수 있어 프로젝트 구조가 깔끔해집니다.
2. 재사용성: 동일한 SVG 파일을 여러 곳에서 재사용할 수 있으며, 파일을 수정하면 모든 참조에서 자동으로 업데이트됩니다.
3. 디자인 툴과의 호환성: 많은 디자인 툴이 SVG 포맷을 지원하므로, 디자이너와의 협업이 원활합니다. SVG 파일을 직접 사용하면 디자이너가 작업한 파일을 그대로 활용할 수 있습니다.

이러한 이점 덕분에, 저는 svgr/webpack을 추가로 설치하여 SVG 파일을 쉽게 사용할 수 있도록 설정하였습니다.

문제의 시작

SVG 아이콘을 컴포넌트처럼 활용하기 위해 svgr/webpack을 설정하는 과정에서 몇 가지 문제가 발생했습니다.

1. 타입스크립트 에러: 현재 개발한 <Svg /> 컴포넌트에서는 props를 넘길 수 없어 에러가 발생했습니다. 예를 들어, <Hamburger width="24" /> 형태로 사용하려 했을 때, “Type '{width: string} is not assignable to type 'IntrinsicAttributes'.”라는 타입 에러가 발생했습니다. 이로 인해 props를 제대로 전달하지 못하게 되었고, 결과적으로 CSS에서 직접적으로 svg { }에 설정하게 되어 유연성이 떨어진 상황이었습니다.
2. 타입 선언 문제: declarations.d.ts 파일에서 SVG 타입을 any로 선언했기 때문에 발생한 에러였습니다. 이 문제를 해결하기 위해 타입을 string으로 변경하였고, 이는 tsconfig 설정과 관련이 있었습니다. 

상세 해결 과정

이 문제를 해결하기 위해 다음과 같은 과정을 거쳤습니다.

1. 타입 선언 수정: 초기에는 다음과 같이 선언했습니다.

// declarations.d.ts
declare module "*.svg?url" {
  const url: any;
  export default url;
}

하지만 any 대신 string으로 수정하여 에러를 해결했습니다.

// declarations.d.ts
declare module "*.svg?url" {
  const url: string;
  export default url;
}

 {
    test: /\.(jpg|jpeg|gif|png|eot|woff|ttf)$/i,
    type: "asset/resource",
  },
  {
    test: /\.svg$/,
    oneOf: [
      {
        use: ["@svgr/webpack"],
        issuer: /\.[jt]sx?$/,
        resourceQuery: { not: [/url/] },
      },
      {
        type: "asset",
        resourceQuery: /url/, // *.svg?url
      },
    ],
  },

배열의 순서대로 규칙을 처리하는 웹팩을 위해 @svgr/webpack 규칙을 assets/resource 규칙보다 상위로 올리는 방법도 있었으나, 두 규칙 중 하나의 규칙만이. svg 파일에 적용되게 하기 위해 @svgr/webpack의 svg 규칙만을 유지했습니다.

느낀 점

이번 작업을 통해 SVG를 효율적으로 활용할 수 있는 여러 방법에 대해 알게 되었고, Webpack과 TypeScript의 설정에 대한 이해해도도 높아진 것 같습니다. 파일 관리의 용이성과 재사용성을 고려할 때, SVG를 직접 사용하는 것이 매우 유리하다는 생각이 들었습니다. 앞으로도 이러한 경험을 바탕으로 더 나은 개발 환경을 만들어 가고 싶습니다.

SVG 컴포넌트로의 전환이 쉽지 않았지만, 결과적으로 더 유연한 디자인 작업이 가능해졌습니다. 여러분도 SVG를 다양하게 활용해 보시길 추천드립니다!