TIW_220726

🦝 2022-07-26 (화)

오늘 한 것

• 사용중인 Metronic template 폴더 구조와 동일하게 변경
• CRA 기반 프로젝트 proxy 설정 및 회사 api 연동해서 라인차트에 데이터 렌더링

에러 해결

proxy 설정 후 url 변경되지 않는 문제

• proxy 설정을 했음에도 불구하고 프로젝트를 실행하면 반영되지 않았다.
• 구글링으로 해결방법을 찾았으며 방법은 간단했지만 해결 후 bootstrap 관련 문제로 좀 골치아팠다.
• 결론적으로 무작정 폴더를 날리는 건 썩 좋은 방법이 아닌 것 같다...
• 관련 링크

해결 방법

package.json에서 proxy 설정
react app 끄기
아래 명령어 차례로 입력

# rm -r package-lock.json
# rm -r node_modules
# npm install

proxy 설정 후 bootstrap 문제

• 위 방법으로 proxy 인식 안되는 문제 해결 후 프로젝트를 다시 돌리니 아래와 같은 오류를 만났다.

./src/_metronic/assets/sass/style.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/_metronic/assets/sass/style.scss)
SassError: Undefined variable.
    ╷
142 │       values: $utilities-border-colors
    │               ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\bootstrap\scss\_utilities.scss 142:15  @import
  src\_metronic\assets\sass\_init.scss 19:9           @import
  src\_metronic\assets\sass\style.scss 9:9            root stylesheet

해결 방법

• src/_metronic/assets/sass/_init.scss 파일에서 아래와 같이 설정
• 'scss/maps', 'scss/helpers' 및 'scss/utilities/api' 파일을 가져오지 않아 생긴 문제 같다.
• 관련 링크

// 변경전
// Bootstrap initializaton
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/utilities';

// 변경 후
// Bootstrap initializaton
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/helpers";
@import "~bootstrap/scss/utilities/api";