[오류 발생 상황] axios .get( `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURI( enteredAddress )}=${process.env.REACT_APP_GOOGLE_GEO_API}` ) .then((response) => console.log(response)) .catch((err) => console.error(err)); API 키를 .env에 저장하고 사용하려고 하니 process가 정의되지 않았다는 오류가 떴다. 웹팩5부터는 직접 설정을 해줘야 한다고 적혀있었다. (스택오버플로우 짱짱) [해결방법] //webpack.config.js const path = require('path'); const dot..

기존에 만들어져있던 tsc 프로젝트에 웹팩과 html 그리고 설정들을 바꾼 후 npm start를 해줬더니 위와같은 오류가 쏟아져나왔다. 해당오류로 검색해보니 스택오버플로우에 답이 있었다. 문제는 클래스와 데코레이터가 있는 프로젝트에 있던 tsconfig를 지우고 다시 설정하는중에 웹팩 설정만 신경쓰느라 아래의 tsconfig설정을 해주지 않았던것."strictPropertyInitialization": false "experimentalDecorators": true 그래서 tsconfig.json에 두 설정을 추가해줬다. 이후 다시 npm start를 해주고 깨끗한 콘솔창을 볼 수 있었다. tsconfig는 아직도 어렵다 ;-; 참고 - https://stackoverflow.com/questions..

웹팩을 실행했더니 위와같은 경고가 주루룩 떴다. 찾아보니 웹팩 설정에 devtool속성을 추가하라는 것이 있어서 // webpack.config.js devtool: 'eval-cheap-source-map', 아래의 eval-cheap-source-map을 추가했다. 이걸 설정해두지 않으면 소스맵 생성을 최대한 꼼꼼하게 하는 것 같다. 그래서 eval-cheap-source-map으로 간소화 시키는 세팅을 해준것 같은데 문서를 읽어봐도 아직 소스맵을 제대로 이해하지 못해서 정확하게는 모르겠다. 조금씩 알아가야지. 무튼 저거를 설정에 넣어주고 다시 웹팩 실행했더니 깔끔해진 콘솔을 만날 수 있다. 참고 -https://stackoverflow.com/questions/61767538/devtools-fai..

Cannot GET /유데미 강의를 따라서 webpack 실습 중 개발서버 설정을하고 npm start를 하면 해당오류가 났다. 저거 외에는 다른 오류가 없어서 답답해 하던 찰나 Webpack-dev-server "Cannot GET /"i'm trying to get my webpack-dev-server to run but i face always the error "Cannot Get /" at the browser. I know that there are serveral questions with the same error, but none of them he...stackoverflow.com나랑 똑같은 강의를 듣는중인 사람의 stackoverflow글을 찾게됐다. 해결방법은 package.js..

npm i -D webpack-dev-server일단 데브디펜던시로 webpack-dev-server를 받는다. devServer: { devMiddleware: { publicPath: "/dist" }, static: { directory: path.resolve(__dirname) }, hot: true, },기존 webpack.config.js에 devServer 설정부분을 추가해준다. 기존에 빌드했던 dist 폴더 제거 "scripts": { "dev": "webpack serve --env development" },package.json내 스크립트 부분 변경 npm run devnpm run dev를 이용해 다시 빌드를 해주고 컴파일이 완료됐다는걸 터미널에서 확인한 후 localhost:80..