[Next.js] Next 에서 이미지 넣기 (img태그 대신 Image 컴포넌트 사용하기!)
2023. 10. 13. 13:03
개발/Error note
이미지..가.. 엑박...이다.. export default function Home() { ...코드생략 return(...코드생략 ...코드생략 ) }img 태그 방식을 그대로 썼는데 오류가 났다. 그래서 create-next-app때 나왔던 이미지는 어떻게 불러왔나 살펴보니 import Image from 'next/image'; export default function Home() { ...코드생략 return(...코드생략 ...코드생략 ) }이렇게 next/image에서 Image 컴포넌트를 불러와서 사용하고 있었다. 그리고 이미지 부르는 경로가 public 폴더 아래에 넣어두면 그냥 바로 가져다 쓸 수있어보였다. export default function Home() { ...코드생략 re..
[webpack]app.ts:17 Uncaught ReferenceError: process is not defined
2023. 9. 29. 11:53
개발/Error note
[오류 발생 상황] 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..
[TypeScript] TS1238: Unable to resolve signature of class decorator when called
2023. 9. 16. 00:20
개발/Error note
기존에 만들어져있던 tsc 프로젝트에 웹팩과 html 그리고 설정들을 바꾼 후 npm start를 해줬더니 위와같은 오류가 쏟아져나왔다. 해당오류로 검색해보니 스택오버플로우에 답이 있었다. 문제는 클래스와 데코레이터가 있는 프로젝트에 있던 tsconfig를 지우고 다시 설정하는중에 웹팩 설정만 신경쓰느라 아래의 tsconfig설정을 해주지 않았던것."strictPropertyInitialization": false "experimentalDecorators": true 그래서 tsconfig.json에 두 설정을 추가해줬다. 이후 다시 npm start를 해주고 깨끗한 콘솔창을 볼 수 있었다. tsconfig는 아직도 어렵다 ;-; 참고 - https://stackoverflow.com/questions..
[webpack] DevTools failed to load source map: Could not load content for webpack://understanding-typescript/node_modules/class-transformer/esm5/decorators/transform-instance-to-instance.decorator.js.map: Fetch through target failed: Unsupported URL scheme
2023. 9. 3. 22:47
개발/Error note
웹팩을 실행했더니 위와같은 경고가 주루룩 떴다. 찾아보니 웹팩 설정에 devtool속성을 추가하라는 것이 있어서 // webpack.config.js devtool: 'eval-cheap-source-map', 아래의 eval-cheap-source-map을 추가했다. 이걸 설정해두지 않으면 소스맵 생성을 최대한 꼼꼼하게 하는 것 같다. 그래서 eval-cheap-source-map으로 간소화 시키는 세팅을 해준것 같은데 문서를 읽어봐도 아직 소스맵을 제대로 이해하지 못해서 정확하게는 모르겠다. 조금씩 알아가야지. 무튼 저거를 설정에 넣어주고 다시 웹팩 실행했더니 깔끔해진 콘솔을 만날 수 있다. 참고 -https://stackoverflow.com/questions/61767538/devtools-fai..
[webpack] 개발서버 실행시 Cannot Get /
2023. 8. 28. 21:28
개발/Error note
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..