신나는 오류해결파티!!! (20) 썸네일형 리스트형 vanilla JS esbuild로 번들링 해보기 (feat: cp html, css) •하려고 하는 것 esbuild를 활용해서 js파일을 번들링 하여 server로 제공하고,html파일도 함께 build하여 정적으로 제공하고자 함. 브라우저에 해당 포트로 접속하게 되면 server에서 static파일인 html파일을 제공 특정 동작이 일어나게 되면 그것에 맞게 js로 이벤트를 리스닝 하여 동작하도록 수정 전의 build명령어 "scripts": { "dev": "nodemon --watch src --exec 'yarn build && yarn start'", "build": "esbuild src/index.js --bundle --outdir=dist --platform=node --format=esm && cp src/index.html dist/", "start": "node.. [에러] 1) next TypeError: __WEBPACK_IMPORTED_MODULE_1__.useForm) is not a function at page 2) 'jsxdev' is not exported from 'react/jsx-dev-runtime' (imported as '_jsxdev'). 에러 상황 next.js에서 불필요한 리렌더링 방지를 위한 react-hook-form 라이브러리를 설치 후 login 페이지를 작성하는 중 에러가 났다. 처음 에러는 next TypeError: __WEBPACK_IMPORTED_MODULE_1__.useForm) is not a function at page (welcome/login/page.tsx:74:96) at stringify () digest: "241989208" 그래서 이건 간단하게 'use client'를 활용하는 것으로 해결된 듯 보였다. 에러의 원인 그러나 또다른 에러가 생겨났다. 이건 내가 어제 설정한 browserslist 때문이었는데, 내가 설정한 borwserslist browserslist 옵션을 package.json에 .. [jest & webpack] 에러 몇가지 "jest-environment-jsdom" is no longer shipped by default, Cannot find module, Configuration error: Could not locate module mapped as... 결론 : 설치 추가 필요 npm install -D jest-environment-jsdom npm install -D @testing-library/react npm install -D @testing-library/jest-dom 1) As of Jest 28 "jest-environment-jsdom" is no longer shipped by default, make sure to install it separately. 에러의 원인 module이 설치되어있지 않았음 에러 해결 jest-environment-jsdom 설치 npm install -D jest-environment-jsdom 2) Cannot find module '@testing-library/jest-dom' 에러의 원인 mod.. [에러]Only 'amd' and 'system' modules are supported alongside --out 에러상황 정리 typescript 초기 config 설정 중에 tsconfig.json파일 작성시 생긴 에러 에러의 원인 You can’t use --out/--outFile to bundle modules together for Node.js/CommonJS, since there is no bundle format for CommonJS. Node.js / CommonJS 에서 번들포맷이 없으므로 out과 outFile을 쓸 수 없음! 출처 : https://stackoverflow.com/questions/35963346/only-amd-and-system-modules-are-supported-alongside-out [오류] 'React' refers to a UMD global, but the current file is a module 타입스크립트에서 해당 에러가 발생했다. 문제가 발생된 코드 interface ErrorProps { err: string; } const ErrorFallback: React.FC = ({ err }) => { console.log(err); return {err}; }; export default ErrorFallback; 에러의 원인 JSX 트랜스폼을 지원하는 React 17버전에서 import React from 'react'를 하지 않아도 되었는데 타입스크립트가 이것을 인식하지 못하고 에러를 보여주고 있는것,. 'React' refers to a UMD global, but the current file is a module Introducing the New JSX Transform – Reac.. [CORS에러] Cross-origin Resource Sharing 허용하기 상황 : python3로 서버를 만들었고, python3 app.py runserver를 통해 서버를 실행했다. React로 프론트엔드를 만들었고, npm start를 통해 로컬 서버를 실행시켰다. 프론트엔드에서는 서버의 http://localhost:[포트번호]로 요청을 보내어 서버에 있는 데이터를 받아와서 브라우저 화면에 렌더링해 주었는데, 그때 CORS에러가 발생하였다 ㅠㅠㅠㅠ 그래서 CORS가 뭔데??? https://developer.mozilla.org/ko/docs/Web/HTTP/CORS#%EC%9E%90%EA%B2%A9_%EC%A6%9D%EB%AA%85%EC%9D%84_%ED%8F%AC%ED%95%A8%ED%95%9C_%EC%9A%94%EC%B2%AD 보안 상의 이유로, 브라우저는 스크립.. express bodyparser deprecated 오류 오류상황 : npm 으로 설치한 body-parser를 이용해 input에서 post 요청시에 함께 보내지는 name속성과 해당 값을 받기 위해 파싱하려고 하였다. app.use(bodyParser({extended : true})) 위와 같이 body-parser를 메서드로 오류없이 이용하기 위해 extended : true속성을 전달하려 했으나, express bodyparser deprecated라는 오류와 함께 bodyParser 같은 줄이 그어졌다. 참고 사이트 : https://stackoverflow.com/questions/24330014/bodyparser-is-deprecated-express-4 bodyParser is deprecated express 4 I am using expr.. [에러] 422 (Unprocessable Entity) 상황 : 프로젝트 개발을 위해 api 통신을 하는 중, 해당 에러를 만났다. mdn사이트 설명 해석 : 처리할 수 없는 엔터티 응답 상태 코드는 서버가 요청 엔터티의 콘텐츠 유형을 이해하고 요청 엔터티의 구문이 정확하지만 포함된 명령을 처리할 수 없음을 나타냅니다 (구글번역) 에러의 원인 : fetch api를 사용하는 방법을 정확히 알지 못한 것이 원인이었다. 해결방법: headers: { "Content-Type": "application/json", }, 를 fetch의 두번째 객체 안에 추가해 준다. 느낀점: content-type에 대해서 조금 더 공부해야겠다. 422에러에 대해 추가 공부한 글 : [422에러] content-type 출처 : https://www.rfc-editor.org/r.. 이전 1 2 3 다음
