반응형 더 알아보기/에러19 [Error] AWS S3 CORS error 발생 Access to XMLHttpRequest at '해당 이미지' from origin '해당 사이트' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. local에서는 AWS S3에 이미지가 잘 업로드 되다가 실서버에서 위와 같은 오류가 발생한다면 아래와 같이 해결할 수 있습니다. AWS S3 접속 > 해당 버킷으로 이동 > 하단 스크롤 > CORS(Cross-origin 리소스 공유) > 편집 > "AllowedPOrigins" value에.. 2023. 4. 11. [Error] 프론트에서 백엔드로 JSON 보낼 때 textarea 다루기 등록/수정 기능을 구현하던 중 프론트에서 백엔드로 Json 형태의 값을 보내고 불러오는 과정에서 오류가 발생했다. 이 오류는 JSON 형식이 문자열이 아니거나 문자열로 작성하였는 데 오타가 있는 경우 발생한다고 한다. Unexpected token o in JSON at position 1 해결 방법 Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse() 에러 해결 방법에 대하여 알아보겠습니다. 이 에러코드의 발생 원인은 다음과 같습니다. 1. json 형식의 문자열이 맞는지? 2. json 형식의 itprogramming119.tistory.com 온갖 시도를 거쳐 이유를 알아낼 수 있었다. 둘의 다른 점은 desc .. 2023. 3. 9. [Error] Synchronous scripts should not be used. See: https://nextjs.org/docs/messages/no-sync-scripts Next.js에서 _app.js에 를 사용했더니 아래 사진처럼 빨간 줄이 떴다. 오류 내용을 살펴보니 script를 동기적으로 사용하려고 해서 발생한 오류였고 공식문서에서 답을 찾았다. no-sync-scripts | Next.js No Sync Scripts Prevent synchronous scripts. A synchronous script was used which can impact your webpage performance. import Script from 'next/script' function Home() { return ( Home Page ) } export default Home nextjs.org 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩,.. 2023. 2. 14. [Error] <div> cannot appear as a descendant of <p> 아래 블로그를 통해 해결책을 얻을 수 있었다. Warning: validateDOMNesting(...): cannot appear as a descendant of . 해결하기 Material UI 를 사용하면서 생각보다 이런 warning 을 종종 마주한다.코드 자체가 동작하지 않는 심각한 에러는 아니지만 콘솔창에 이 경고로 범벅이 되면 굉장히 거슬린다.처음에는 분명 애를 먹었 velog.io ToolTip 기능 구현 후 위와 같은 오류 해결 과정에서 알게 된 새로운 개념을 정리해보았다. 핵심은 " cannot appear as a descendant of / 태그 안에는 태그가 들어올 수 없다." 이 부분인 것 같았다. 태그는 inline-block 속성이고, 태그는 block 속성이기 때문에 in.. 2022. 8. 18. [Error] A component is changing an uncontrolled input of type checkbox to be controlled input과 span을 사용하여 CheckBox 기능을 구현하는 과정에서 위와 같은 오류가 발생했다. 아래 블로그를 참고하여 오류를 해결할 수 있었는 데 간략히 요약하자면 해당 오류는 "구성 요소가 제어되지 않는 유형의 입력을 제어하도록 변경하고 있습니다."라는 경고로써 입력값이 초기화(undefined) 되었지만 값이 변경될 경우 오류가 발생 할 수 있기 때문에 ||(OR 연산자)를 사용하여 예외 처리를 해주는 것이 좋다고 한다. 🥕 ||(OR 연산자) 예시 input 태그에 value 속성을 추가하여 data라는 변수의 값을 출력하고 싶은 데 만약 data 변수에 값이 없다면 ""(빈 값)을 출력하는 코드로 구현할 수 있다. 사용해보니 값의 유무를 판단 할 때는 삼항 연산자(조건? 참 : 거짓) 보다.. 2022. 8. 18. [Error] document is not defined React나 Next.js와 같은 언어에서 document를 사용하면 아래와 같이 document를 찾을 수 없다는 오류가 발생한다. const slider = document.querySelector(".items"); React나 Next.js와 같은 프로그래밍 언어는 서버 측과 클라이언트 측에서 모두 움직이는 프레임워크인데 document는 클라이언트 측에서만 정의된 전역 변수이기 때문에 일어난 오류라고 한다. 위와 같이 단순히 document만 사용하려고 시도한다. (즉, 클라이언트 쪽 전역변수를 사용하려면 렌더링된 후에 사용 해야 한다고 한다.) 그래서 아래 두가지 방법을 이용하고 있다. 1) 조건문을 사용해서 document가 있을 경우 필요한 값을 가져오는 방법 let slider = "";.. 2022. 7. 14. [Error] Cannot find module 'react/jsx-runtime' Cannot find module 'react/jsx-runtime' · Issue #2119 · emotion-js/emotion Current behavior: I've upgraded to v11, I received the following error when the run the test suite. ● Test suite failed to run Cannot find module 'react/jsx-runtime' from 'node_modu... github.com 1. node_modules 삭제 후 yarn install 실패 2. node_modules 삭제, package-lock.json 삭제 후 yarn install 실패 3. react, react-dom 최신 버전으로 업그레이.. 2022. 4. 6. [Error] Module not found : Can't resolve "next/image"; Next.js로 프로젝트 진행하면서 img 태그를 사용할 일이 있어 next/image를 import 받았는 데 위처럼 오류가 발생했다. import Image from "next/image"; 찾아보니 next/image는 v10 이상부터 지원하는 데 지금 프로젝트는 v9라서 오류가 발생하는 것 같다. [Next]Next.js에서 이미지 사용하기 Next에서 이미지를 사용하는건 여간 쉽지가 않다.공식문서에는 다음과 같은 레퍼런스를 제공하고 있다.이미지 컴포넌트 자체를 Next에서 제공해주고 있다.뭔가 고마운거 같지만 써보면 참 그렇다 velog.io 팀장님께 여쭤보니 img 태그 사용해도 된다고 하셔서 img 태그로 구현했다. 2022. 2. 23. [Error] Warning : Props 'className' did not match Server: ' ' Client: ' ' 회사에서 첫 업무로 Publishing 받아서 진행하려다 보니 CSS in Js를 CSS 말고 styled-components로 하는 게 익숙해서 라이브러리를 설치 했는 데 아래와 같이 오류가 발생했다. 어떻게 해결 해야 할까 찾아보던 중 아래 두 게시물을 참고해서 해결 했다. Next js + Styled-Components 셋팅 Next js에서 styled-component를 이용하려면 몇 가지 설정이 필요하다. Next js와 styled-components 가 설치되어 있다고 가정한다. 문제점 첫 화면에서, css가 의도치 않게 적용되는 모습을 볼 수 있다. styled-c.. taenami.tistory.com [Next.js] Warning : Props 'className' did not .. 2022. 2. 21. 이전 1 2 3 다음 반응형
