글 쓰게된 계기
요새 npm 패키지를 만드느라 정신이 없다. 그래서 블로그 신경을 못썼는데, 플젝하면서 오류가 난 부분은 기록해야지! 싶어서 쓰는 글... 그럼 레츠기릿!
react-icons 설치 오류
npm i react-icons --save 를 쳤더니, 오류가 났다ㅠㅠ;;
이건 무슨 오류인감;;하면서 확인해보니, typescript 와 react-scripts 버전이 안맞는 종속성 오류였다. typescript의 버전은 3.2.1 로 재설치하면 되었고, facebook/create-react-app git 을 보니 아직 해결이 안된 이슈같았고, 앞으로도 해결될 일이 없는 이슈였다...
위의 내용을 읽어보니 Next.js 와 같은 도구를 사용하라고 한다. 그리고 typescript 버전을 낮출수 없는 상황이라면 아래와 같이 overrides > typescript 쪽처럼 작성해주면 된다.
⚡️여기서 잠깐
overrides는 무엇인가??
overrides 필드는 종속성의 종속성 버전을 바꾸기 위해 사용한다. 하나의 종속성이 여러 버전으로 설치되어야할 때 특정 종속성의 종속성 버전을 수정할 수 있다.
{
"overrides": {
"foo": "1.0.0", // `dependencies`에 의해 설치된 버전과 상관없이 항상 1.0.0버전의 foo 패키지가 설치됩니다.
"bar": {
"baz": "1.0.0" // bar 패키지의 baz 종속 패키지의 버전을 1.0.0으로 설치합니다.
},
"boo": {
"qux": {
"til": "1.0.0" // boo 패키지의 qux 종속 패키지의 til 종속 패키지의 버전을 1.0.0으로 설치합니다.
}
},
"elf@2.0.0": {
"two": "1.0.0" // 2.0.0 버전의 elf 패키지의 two 종속 패키지의 버전을 1.0.0으로 설치합니다.
}
}
}scss 실행 오류
ERROR in ./src/styles/banner.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1]......
Module build failed (from ./node_modules/resolve-url-loader/index.js):
TypeError: Cannot read properties of undefined (reading 'replace')...scss 를 설치하고 쓰려는데, 갑자기 위와 같은 오류가 발생했다. 이건 sass-loader 를 설치하지 않아서 발생한 오류였다. (이 바보..)
⚡️참고, sass-loader 는 무엇인가?
sass-loader는 webpack-loader 로서 빌드 중 scss 파일을 만나면 node-sass 를 내부적으로 실행해주는 모듈이다.
scss, 클래스명을 변수로 쓰고싶다면?
scss를 작성하면서, 클래스명 일부를 변수로 받아서 값을 넘기고 싶었다. 그러나 scss 는 css 전처리기 때문에 이러한 과정은 불가능했고, 아래와 같이 처리했다!
우선 jsx 부분에서는 아래와 같이 props를 받은 데이터로 class 명의 일부를 지어주었다.
그리고 scss 파일에서는 아래와 같이 map으로 선언해서 데이터를 처리하고
map을 돌면서 동일한 class명을 확인한 후 css 처리를 했다!
