아주 간단한 일이었다. 이미지를 가져와 사용하는것.
근데 svg 경로가 읽히지 않아 에러가 났다.
'Icon' is declared but its value is never read.ts(6133)
Cannot find module '../img/Icon.svg' or its corresponding type declarations
1) 내 지식이 짧은가?
react styled component를 쓰면서
이미지를 background url 방식으로 가져왔는데, 아무래도 내가 리액트 스타일드 컴포넌트에 대한 지식이 짧아서 생긴일 같았다 -> 결과적으론 오산
모르는걸 알아내고 쓰고 싶었는데 안타깝게도 팀프로젝트라 일단 컴포넌트를 만들어 풀리퀘에 올리는게 먼저였다. 일단 되게 만들자!
2) 그렇다면 굳이 style.tsx에 넣지말고 그냥 컴포넌트에 import해버리자
entry.tsx(div를 쏟아 넣는)파일에 그냥 <img>태그를 넣어봤다.
<img src='경로'> <img src={아이콘}>
가능한 방식으로 이미지를 가져오며 이렇게, 저렇게 시도를 해봤다.
근데도 어라 안되네?
3) 그렇다면 svg 문제같은데... 다시 svg copy해오자...
이 작업을 다시하다가 빠르게 머릿속을 스쳐간 지난 날의 기억...
맞다. svg를 import할때마다 겪었던 과정이다. 나는 예전 프로젝트에서도 그전 프로젝트에서도 이 문제를 겪어 검색해보곤 svg를 읽어줘 하는 무슨 파일을 추가했었다.
4) 기억났으니 바로 검색해봤다.
(1) src/custom.d.ts 파일을 추가하세용
경로는 src에, custom.d.ts 파일을 추가하고 안에 내용을 담았다.
declare module '*.svg' {
const content: any;
export default content;
}바로 귀신같이 에러가 사라졌다.
이랬던 금쪽이가
말잘듣는 코드가 되었다.
그래도 할일이 남았다.
(2) tsconfig 수정하기
"include": [ "src", "src/custom.d.ts" ]
이미 src는 추가가 되어있으니 "src/custom.d.ts" 이 친구만 추가해줬다. 오류없이 이젠 잘 작동된다.
까먹지 말자 svg 초기설정을 해주자~
참고
https://velog.io/@xmun74/TS%EC%97%90%EC%84%9C-svg-import-%EC%95%88%EB%90%A0-%EB%95%8C
