autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated. 뜻 해결 방법 /end value has mixed support, consider using flex-end instead / Node-sass incompatible with ^4.0.0

VSCODE업데이트 이후 갑자기 에러가 뜨기 시작했다.

하아...뭐야...

아 물론 내 소스는 아니다. 

난 이미 해결을 했으므로...

WARNING in ./node_modules/bootstrap/dist/css/bootstrap.min.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.min.css) Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning

autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

이러한 경고 메시지가 프로젝트에서 발생할 경우, 주의를 기울여야 합니다. 이 경고는 우리의 프로젝트에서 사용 중인 autoprefixer 관련된 것이며, 특히 우리가 알아두어야 하는 점은 "deprecated"라는 표현입니다. "Deprecated"란 단어는 일반적으로 '더 이상 사용되지 않는' 또는 '사용을 권장하지 않는' 등의 의미를 가집니다.

이 경우에는 "color-adjust"라는 단축 속성이 현재 사용되지 않는다는 경고를 나타냅니다. 이는 현재는 단지 경고일 뿐이지만, 웹팩과 같은 빌드 도구를 사용하면서 경고를 에러로 처리하는 경우가 많기 때문에 이 문제를 무시할 수 없습니다. 

react-bootstrap autoprefixer warning

이런 문제에 대한 해결 방법은 스택 오버플로우에 명시되어 있습니다. 이 문제는 부트스트랩과 autoprefixer 간의 버전 차이로 인해 발생한다고 합니다. 이를 해결하기 위한 방법 중 하나는 autoprefixer를 10.4.5 버전으로 변경하는 것입니다. 만약 현재 autoprefixer가 최신 버전으로 설치되어 있다면, 10.4.5 버전으로 오버라이드해서 사용하는 방법도 있습니다. 물론, 부트스트랩의 버전을 최신 버전으로 업데이트하는 방법도 있습니다. 하지만 현재 최신 버전인 5.2.0은 베타 버전이기 때문에, 이를 사용하는 것이 부담스러울 수 있습니다. 이런 경우에는 스택 오버플로우에서 제안하는 방법을 따르는 것이 좋습니다. 하지만 이 경우에는 사용하는 패키지 매니저에 따라 오버라이드 방법이 달라질 수 있습니다. npm을 사용하는 경우와 yarn을 사용하는 경우에서는 조금 다른 절차를 따를 수 있으니,  

yarn 을 사용하는 경우라면 package.json dependencies 다음에 다음과 같이 추가해주고, yarn install을 해준다.

"resolutions": {
    "autoprefixer": "10.4.5"
}

npm 을 사용하는 경우라면 package.json dependencies 다음에 다음과 같이 추가해주고, npm install을 해준다.

"overrides": {
    "autoprefixer": "10.4.5"
}

그리고 당연한 얘기지만 앱을 다시 실행시켜야 한다.

이 점을 주의하시기 바랍니다. 개발 작업을 진행하면서 이와 같은 경고나 에러 메시지는 상당히 흔한 일입니다. 하지만 그러한 메시지들을 무시하는 것은 잠재적인 문제를 야기할 수 있습니다. 그러므로 이러한 경고와 에러를 잘 이해하고, 적절히 대응하는 것이 좋은 개발자가 되는 데에 중요합니다.

---

end value has mixed support, consider using flex-end instead

이런 에러가 뜰 때가 있다.

flex align-items나 justify-content 속성을 end로만 준 경우에 발생한다. flex-end로 바꾸면 된다.

당연하게도 start도 마찬가진다. flex-start로 바꿔주면 경고가 없어진다.

Node-sass incompatible with ^4.0.0

Failed to compile.

./src/index.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/index.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

어처구니없게도 이런 에러가 발생할 때가 있다.

Node-sass 5 버전은 Node 15에서만 동작하므로 발생하는 에러다.

Node버전이 가 이보다 하위일 경우 발생한다.

구버전의 노드를 사용하고 있다면, Node-sass 의 버전을 4 버전대 중 가장 최신 버전인 4.14.1로 설치한다.

npm uninstall node-sass
npm install node-sass@4.14.1

 

Problem with sourcemaps in TypeScript project · Issue #100 · react-keycloak/react-keycloak