문제
팀프로젝트 중.. 데스크탑에서 노트북으로 작업을 이전하기 위해 레포를 clone 해 왔는데
모든 파일 속 svg를 import 해오는 코드에 해당 모듈이 없다는 에러와 함께 빨간줄이 생겼다..!
어떤 패키지가 충돌로 없어지거나 실수로 지워졌나 해서 바로 npm install을 했는데도 결과가 동일했다
원인
열심히 구글링을 통해 원인을 찾아보니 Webpack 설정 부분에 svg 파일을 로드하고
처리하는 데 필요한 설정이 되어있지 않았기 때문이라는 짐작을 해 볼 수있었다
하지만 저는 npm install 했습니다만..?
라고 생각해 위 원인을 두고 다른 이유를 찾느라 시간을 많이 써버렸는데
도저히 정확한 원인을 알 수가 없어 팀원들에게 도움을 청했다
한 팀원 분이 npm i -D @svgr/webpack&을 설치해보라고 하셔서
즉시 실행했더니 빨간 줄이 모두 사라지고 svg 파일도 정상적으로 렌더링 됐다!!!
문제는 해결됐지만 npm install와 npm i -D @svgr/webpack의
어떤 차이점 때문에 결과가 다르게 나온 것인지 알아봐야겠다는 생각이 들었다
두 가지의 패키지 설치 방법
패키지를 설치하는 방법에는 두 가지가 있는데
1. dependencies (의존성)
npm install 명령어는 package.json 파일의
dependencies와 devDependencies에 있는 모든 패키지를 설치
2. dev dependencies (개발 의존성)
npm install -D 패키지명 또는 npm install --save-dev 패키지명 명령어는
해당 패키지를 devDependencies에 추가하는 명령어
(=개발 환경에서 필요한 패키지 설치할 때)
결국 나는 npm install명령어를 통해 의존성 패키지들을 설치하였지만,
package.json파일에는 svg 관련 패키지 설정이 없었던게 근본적인 원인이었다
해결 & 느낀 점
svg관련 문제는 devDependencies로 설치 해야한다
npm i -D @svgr/webpack 설치
(SVG 파일을 로드하고 처리하는 데 필요한 설정을 쉽게 추가할 수 있도록 도와주는 패키지)
npm install만하면 패키지는 모두 자동 설치되는 줄 알았는데
dev dependencies로 직접 설치해야 하는 상황도 있다는 걸 알게 되었다!
