본문 바로가기

🤪 뜨거운 맛 오류 일기37

Property 'value' does not exist on type 'EventTarget' / 해결법 ts를 사용하면서 종종 만났던 value가 eventTarget에 존재하지 않는다는 에러 ! Property 'value' does not exist on type 'EventTarget'. 나같은 경우에는 input 태그를 사용할때 두번 만났었는데 checkbox할때도 만났고, radio 기능 구현을 할때도 만났었다. ts를 하면서 만날때마다 빡취는 저 빨간쥴 ^0^ 아무튼 에러메세지를 보면 이벤트 타겟에 벨류가 없다고 밑줄이 뜨는데 애초에 저 event.target이라는 애가 어떤 엘리먼트인지를 지정해주면 에러가 해결되었다. { const target = event.target as HTMLInputElement; console.log("e:", target.value); setDisplayStatu.. 2023. 2. 21.
TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. 그동안 사진 업로드 하는건 계속 해왔던 거라 별로 신경을 안썼는데 이번에 최종 플젝을 하면서, 팀원분께서 내가 짰던 코드에서 새로운 에러를 발견해주셨었다 에러가 발생하는 상황은 처음 대표 이미지를 업로드 하고나서, 마음이 바껴 다른 사진을 업로드 하려다가 "취소" 버튼을 누르면 아래와 같은 에러메세지가 뜨는 현상이 발생했다. TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. 에러 내용 : FileReader에서 readAsDataURL을 실행할 수 없쪄 파라미터 한개가 Blob의 형태가 아니야~~~ 도와줘요 스텍오버플로우~!!!! (이번 최종 팀플하면서 유독 스텍오버플로우를 많이 사.. 2023. 2. 21.
[TIL] 오늘의 개발일지 / yarn build 계속 실패해서 아찔했던, 문제였던 부분 해결한 모음 yarn build 하면서 에러난 부분 1. 레시피 글쓰기 페이지에 "" 문자가 들어가면 안됐다. => "{ 객체이름 } " 이런식으로 넣으면 안됌 2. @config~ 이런식으로 빨간줄 났던거 다시 임포트 안하면 에러가 났다. 이거랑 3개 빨간줄났던거, 그거 다시 지웠다가 자동임포트 하는 기능 안해줬었는데 그것도 문제가 되었었음 (아래거) 3. 삼항연산자 쓸때 값으로 "" 이렇게 넣어주면 에러난다 -> 이런식으로 해줘야 된다. 4. select 태그의 option태그에 벨류값 "" 이렇게 주면 에러난다. 5. 레시피 글쓰기 페이지에서 displayName을 옵셔널 체이닝 안걸어줬더니 에러가 났다 6. 어느 컴포넌트였는지 기억이 안나는데, 그 부분 타입에러 나서 any로 땜빵 쳐놨었다. 7. 중간에 자동.. 2023. 2. 17.
next.js에서 Image is missing required "src" property 에러 해결법 hydration 에러를 잡고나니 눈에 보이는 Image가 src를 잃었어여..... 기존의 나의 코드는 요로코롬 되있었는데, 혹싀 이것도 처음에 imagePreview가 뭔지를 못찾아서 나는 에러인가 싶어서 기본 이미지를 프로젝트 내에서 하나 만들어놓고 {imagePreview ? ( ) : ( )} 요런식으로 imagePreview라는 state의 값이 있을때만 저렇게 src에 꽂히도록 수정을 하니 에러가 해결되었당 ㅇ_ 2023. 2. 13.
hydration failed because the initial UI does not match what was rendered on server ! / 서버에서 랜더링되는 것과 브라우저 상에서의 미스매치 때문에 발생한 hydration 에러 해결일지 레시피 글쓰기 작업을 하는데 요런 에러가 발생했었다 에러창 잠깐 닫고 버튼같은거 누르면 다 정상 작동을 하는데 에러메세지를 보니 하이드레이션을 하는 과정 중에 서버에서 랜더한 UI와 매치가 되지 않는다는 것! 구글에 hydration에 대해서 이것저것 찾아보고 next 공식문서에 들어가 저 에러가 어떤 경우에 발생하는 것인지 연구해봤다 (요건 넥스트 공식문서에 나온 리액트 하이드레이션 에러) https://nextjs.org/docs/messages/react-hydration-error react-hydration-error | Next.js React Hydration Error While rendering your application, there was a difference between the.. 2023. 2. 13.
`object` ("[object Object]") cannot be serialized as JSON. Please only return JSON serializable data types. // 파이어베이스에서 유저가 클릭한 특정 게시물만(게시물 id로) 조회해오고 싶었는데 넥스트를 쓰면서 새로운 에러를 만났다 [에러문구] `object` ("[object Object]") cannot be serialized as JSON. Please only return JSON serializable data types. 이잉 모라는거야 닥쳥 ㅠ * Serialization은 개체를 저장하거나 메모리, 데이터베이스 또는 파일로 전송하기 위해 개체를 바이트 스트림으로 변환하는 프로세스 (= 직렬화) 라고 한다넹 [ 이건 내가 수정하기전 작성한 코드 ] export async function getServerSideProps(context) { const { params } = context; const {.. 2023. 2. 11.