몇 시간동안 끙끙대며 에러를 해결하다 흔히 ‘현타’가 온다고 하죠. 저도 그랬습니다. 그러다가 ‘이 문제가 정말 중요하고 급한가? 이 문제를 꼭 이렇게 풀어야 하나?’ 라는 의문을 가진 덕분에 문제를 빠르게 해결할 수 있었는데요. 그 과정 속에서 느낀 점과 저만의 문제 해결 로직을 공유합니다.
끙끙대던 상황
(지금은) 다크모드 기능이 잘 되는 모습
버튼 내에 
일러스트로 다크모드를, 일러스트로 라이트모드를 나타내고자 했다. 그런데 이 SVG 파일 형태의 일러스트가 렌더링이 되지 않는 것이었다. 로컬 환경은 물론, 빌드 및 배포 환경 모두에서 SVG 파일이 렌더링이 되지 않는 상황이었다.
일러스트로 다크모드를, 일러스트로 라이트모드를 나타내고자 했다. 그런데 이 SVG 파일 형태의 일러스트가 렌더링이 되지 않는 것이었다. 로컬 환경은 물론, 빌드 및 배포 환경 모두에서 SVG 파일이 렌더링이 되지 않는 상황이었다.
왼쪽과 같이 SVG 파일 일러스트가 나와야 하는데, 오른쪽과 같이 나오지 않는 상황
더 의문이었던 건 아래와 같이 index.html 파일에 있는 SVG 파일은 렌더링이 잘 되는 것이었다.
SVG 파일은 렌더링이 잘 되는 것이었다.
index.html의 SVG
로컬과 배포 환경 모두 잘 되었다.
왜 index.html 파일의 SVG는 렌더링이 잘 되는데, SVG 파일을 넣은 컴포넌트를 import 했을 때는 정상적으로 렌더링이 되지 않는 것일까? 아무리 살펴보아도 SVG 파일 자체의 문제나 파일 경로 문제도 아닌 것 같았다.
결론부터 말하자면
이 문제는 결국 내가 해결하고자 하는 방식으로 해결을 하지 못했다.
하지만 다른 방식으로 (그것도 매우 간단하게) 해결했다.
해결을 향한 여정과 함께, 앞으로 가져가면 좋을 문제 해결의 로직을 정리해 보았다.
문제 해결의 여정
문제 해결에 도움될만한 자료들
만약 똑같은 문제를 겪는 분이 있다면 내가 시도한 방법보다 아래의 자료들을 종합적으로 참고하면 좋을 것 같다.
문제의 코드
기존 import 구문으로는 렌더링이 되지 않아, ReactComponent로 빼서 불러오는 시도를 해보았다.
import styled from '@emotion/styled'
import { ToggleProps } from './Toggle.type';
// 직접 SVG를 import하면 해결이 안돼서
import darkModeIcon from '../../assets/darkMode.svg';
import lightModeIcon from '../../assets/lightMode.svg';
TypeScript
복사
import styled from '@emotion/styled';
import { ToggleProps } from './Toggle.type';
// ReactComponent로 빼보았다.
import { ReactComponent as DarkModeIcon } from '../../assets/darkMode.svg';
import { ReactComponent as LightModeIcon } from '../../assets/lightMode.svg';
TypeScript
복사
문제 해결을 위한 환경 설정
npm install --save-dev vite-plugin-svgr
Shell
복사
2. 설치가 잘 되어 package.json에 버전이 잘 찍혀있는 것을 확인했다.
{
"name": "random-picker",
"private": true,
// ...
"vite-plugin-svgr": "^4.2.0" // here!
}
}
JSON
복사
3. vite.config.ts에서는 svgrOptions을 통해 SVG를 TypeScript 컴포넌트로 변환해주도록 설정했다.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
svgr({
svgrOptions: {
typescript: true, // SVG를 TypeScript 컴포넌트로 변환
},
}),
],
})
TypeScript
복사
4. custom.d.ts 파일을 아래와 같이 추가해 주었다.
declare module '*.svg' {
import * as React from 'react';
export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
TypeScript
복사
5. tsconfig.json에 custom.d.ts 파일을 추가했다.
{
"compilerOptions": {
// ..
},
"include": [
"src/**/*",
"custom.d.ts" // here!
],
"references": [{ "path": "./tsconfig.node.json" }]
}
JSON
복사
하지만, 이렇게 시도해도 결국 해결은 되지 않았다.
결국 다른 방식으로 해결
문득, 혹시나 해서 이모지를 SVG 대신, 표준 유니코드를 사용하여 그냥 string으로 넣어 보았다. 그랬더니 마법같이(?) 이모지가 잘 렌더링 되었다.
const Slider = styled.span<ToggleProps>`
/* ... */
font-family: 'Tossface', sans-serif; /* Tossface 폰트 사용 */
${({ isDarkMode }) => isDarkMode
? `
transform: translateX(26px);
content: '🌚'; /* 다크모드 이모지 사용 */
`
: `
content: '🌞'; /* 라이트모드 이모지 사용*/
`
}
}
`;
CSS
복사
우측 상단 토글 버튼 안에 원하는 이모지가 잘 들어와 있다.
문제 해결 후 느낀 점
좋긴 좋은데…
어쨌든 원하는 결과가 나와서 기분은 좋았지만, 한편으로는 약간 허탈했다. 이렇게 쉽게 해결될 일이었는데 오랜 시간동안 뭐한거지 싶었다.
하지만 배운 것도 있다. 트러블슈팅 회고를 해보며 앞으로 문제가 닥치면 어떻게 효율적으로 해결하면 좋을지 로직을 고민해 보았다.
의식적인 고민이 필요
결론적으로 이 이슈는 엄청 중요하지도 않았고, 다른 방법이 있었기에 이만큼의 시간을 쓰지 않아도 되었다. 그래서 소중한 시간을 낭비했다고 생각한다. 물론 삽질 경험도 중요하고 값지긴 하나, 앞으로는 지금 해결하는 문제가 그만큼 deserve 한지는 ‘의식적으로’ 고민해 보아야 한다고 느꼈다.
책 추천 큐레이션 서비스를 만들었던 팀 프로젝트에서 React Quill Editor (CRUD를 가능하게 하는 위지윅 라이브러리) 관련 에러를 해결할 때가 생각났다. 당시에는 거의 이틀에 걸쳐 디버깅을 하고, 엄청난 서치와 다양한 시도도 했었다. 그 에러는 무조건, 어떻게 해서든 해결했어야 했다.
왜? 사용자가 게시물을 작성하는 것이 서비스의 핵심 로직이었기 때문이다. (그래서 결국 해결했다.)
하지만 이번 SVG 이슈는 달랐다.
그저 다크모드 토글에 넣을 이모지일뿐이었다. 사실 꼭 SVG일 필요가 없었을뿐더러, 꼭 그 이모지일 필요도 없었는데 시간을 낭비해버렸다. 결론적으로 SVG는 포기하고 다른 형태로 불러와 내가 원하는, 같은 결과를 같은 만들어 낼 수 있었다.
지금 생각해 보면 더 일찍 다른 방법을 택했어도 되었을 텐데 왜 그렇게 매달렸을까? 떠올려보면 그때 당시 꼭 해결해 보겠다는 승부욕, 그리고 해결이 되지 않는 이유가 너무 궁금한 호기심, 지금까지 쓴 시간과 노력이 아까웠던 미련이 있었던 것 같다.
의미있던 삽질
물론 의미 없는 삽질은 아니었고, 앞으로 할 삽질들도 모두 의미가 없다고 하기에는 어렵다. 삽질을 하면서 (좋게 말하자면) 엄청 몰입했고, vite 환경에서 SVG 사용을 하기 위해서는 별도의 라이브러리를 사용하고 vite.config.ts와 tsconfig.json에 추가 설정을 해주어야 하는 등의 지식도 쌓을 수 있었다.
당시에는 해결하지 못해 찝찝하긴 했지만 결국에는 다른, 그것도 아주 간편한 방법을 생각해 내서 원하는 결과를 만들었음에 만족한다.
나만의 문제 해결 로직
이 경험을 통해 정리한 문제 해결의 생각 로직은 아래와 같다. 앞으로 문제가 오랜 시간 동안 풀리지 않으면 아래의 로직을 떠올려 보면 좋겠다.
1. 이 시간을 쓸 만큼 중요한가
•
내 시간을 그만큼 쓸만한 중요한 로직인가?
•
아닌가? 그렇다면 과감히 버리는 것도 용기고 전략이다.
2. 다른 방법으로 대체 가능한가
•
다른 방법으로 같은 결과를 낼 수 있는가?
•
할 수 있다? 그렇다면 다양한 방법들을 시도해 보자.