mystery

1. 사건의 발단 이미지 최적화 관련 webpack플러그인 중 하나인 ImageMinimizerPlugin은 여러 하위 플러그인과 함께 사용하는 패키지이다. 하위 플러그인인 imagemin-xxx 패키지들을 설치하여 빌드할 때 해당 패키지들을 찾지 못하는 오류 발생 2. 문제 원인 분석 빌드 관련 패키지의 종속성의 버전이 낮았던 것이 원인. *build 스크립트에서 webpack-cli 패키지를 사용하고 있었다. *실행 일자 기준 2년전 생성한 프로젝트로 webpack-cli 패키지의 버전이 4.x.x 버전이었다.(최신 5.x.x) 3. 원인에 대한 학습 이미지 최적화 관련 패키지를 설치하기 전까지 build 커멘드는 문제없이 작동했기에, 새로 설치한 패키지(이미지 최적화 관련)에 대한 부분만 의심한 케..

1. 사건의 발단 Netlify를 사용한 프로젝트 deploy 첫 시도가 에러에 가로막혔다. 2. 문제의 원인 Netlify에 처음 deploy시 모듈 설치를 하는데 그 과정에서 peer dependency 충돌이 발생했다. 3. 원인에 대한 공부 3-1. peer dependencies peer dependencies란? 실제로 패키지에서는 require, import 하지 않지만, 특정 라이브러리나 툴의 호환성을 필요로 할 경우 명시하는 dependency이다. 쉽게 생각하면 내가 사용하려는 패키지가 요구하는 패키지 라고 생각하면 된다. 3-2. npm 버전 7의 피어 종속성 자동 설치 npm 버전 7부터 피어종속성이 자동으로 설치된다. 또한 종속성의 충돌이 있는 경우 에러로 판단해 설치를 중단한다...

1. 사건의 발단 기존 CRA를 사용해 만들던 프로젝트를 parcel 기반으로 수정하고 빌드 했는데, 이후 프로덕션 환경에서 경로 관련 문제가 발생했다. 1-1. 아무것도 보이지 않았다. 로컬 환경에서는 문제 없이 실행되던 프로젝트를 빌드 후 github pages에 배포했는데 github.io/~~~~ 같은 프로덕션 환경에서 로드 되지 않았다. 1-2. 이미지 파일 엑박 로컬 환경에서는 문제 없이 로드 되던 이미지 파일들이 프로덕션 환경에서 엑박을 시전했다. 2. 문제의 원인 2-1. index.html 파일 내 번들 된 xxx.css, xxx.js 의 경로가 올바르지 않았다. CRA로 생성한 프로젝트에서는 빌드 시 다음과 같이 자동으로 index.html 파일 내 코드의 경로들이 수정됐었다. 하지만 ..

별안간 개고생을 했더랬다. 1. 사건의 발단 최근에 자바스크립트 기본을 다시 공부하기 시작하면서 기존에 CRA로 만들고 있던 쇼핑몰 프로젝트를 2개월 정도 만에 들어갔는데, 이게 웬걸..? 'ERR_OSSL_EVP_UNSUPPORTED' 라는 에러와 함께 로컬에서 실행이 안됐다. 찾아보니 node.js 17 이후의 버전에 적용되는 Open SSL3.0의 기준에 나의 어떤 모듈들이 입구컷 당한 모양이었다. 이후 package.json의 scripts를 다음과 같이 바꿔서 실행하세요~ 라는 해답을 찾아 package.json을 열어보았다. replace "start": "react-scripts start" by "start": "react-scripts --openssl-legacy-provider sta..

어떤 에러나 문제점을 만났을 때 마다 구글링 한번 정도로 해결되는 정도면 좋지만, 그렇지 않을 때가 있습니다!! 분명 이 방대한 웹 어딘가에는 있는 자료겠지만, 도저히 나의 구글링 능력으로는 찾을 수가 없는 해결법들..ㅠㅠ 그러다 결국 찾아내기라도 하는 날에는 엄청난 희열과 함께 속썩이던 문제를 해결해 버리고는 눈앞에서 치워버렸었습니다. 여태까지는 그랬습니다. 보이던 창 다 꺼버리고 '어우 드디어 끝났네' 하고는 덮어 버렸습니다. 앞으로는 이 카테고리에 저를 고통속에서 힘들게한 에러나 문제점들에 대해서 삽질했던 추억을 기록 하려고 합니다. 당장에는 눈앞에서 치우고 싶겠지만 그만큼 힘들게 찾은 자료이기도 할테니 말이에요! 무엇보다 똑같은 걸로 2번 삽질하면 멍청한 거니까유~~ 자 그럼 드가자잇!