본문 바로가기

전체 글400

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.
[TIL] 오늘의 개발일지 오늘 재밌었던 작업은 카카오 공유하기 API를 테스트로 붙여보는 거였당 항상 새로운 기술은 첨엔 낯설어서 무섭지만 구글링 하면서 또 하나하나 콘솔 찍어가면서 어떤 원리인지 찾아가는 묘미가 있는 것 같다 나는 next.js로 작업을 하는데 중간에 에러가 났었는데 1. Kakao.init : Already initialized 에러 메세지 이미 이니셜라이즈가 되었다고 메세지가 나와서 useEffect를 사용해서 useEffect(() => { if (!window.Kakao.isInitialized()) { window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_API_KEY); } }, []); 이니셜라이즈가 false일때만 최초 실행을 시키도록 수정해주었다. * JavaSc.. 2023. 2. 13.
[WIL] 오늘의 개발일지 드디어 쥬마알 >_ 2023. 2. 12.
`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.
[TIL] 오늘의 개발일지 오늘은.... 금요일!!!!!!!!!!!!!!!!!!! 걱정도 많고 생각도 많았던 최종 프로젝트 첫주가 벌써 끝이 나뿌러따 이제 시작이지만 그래도 기획이랑 전반적인 흐름이 잡히고 본격 코드를 짜면서 이어붙이는 작업이 시작되는 것 같아 좋았다 오늘은 만들어놨던 리액트퀼을 컴포넌트화 시키고, js로 작업했던 파일들을 타입스크립트로 바꾸는 작업을 했다 난 타입스크립트가 아직도 너무 어려워잉.... 주말에는 후딱 짜야되는 로직 짤 수 있으면 좋겠당 아 , 사소하긴 하지만 넥스트에서 페이지 만들때 이렇게 폴더를 만들어서 페이지를 관리하면 더 좋을것 같다는 튜터님의 말씀에 해당 부분도 수정하였다 주말에 나를 챙기는 시간도 충분히 가지면서 이번주동안 혼란스러워서 계속 넘겼던 궁금했던 점들을 집중해서 공부하는 시간을 .. 2023. 2. 10.
[TIL] 오늘의 개발일지 드디어 점점 본격적인 프로젝트 주에 들어가는 것 같다 오늘 오전에도 회의를 진행하면서 맞춰야하는 부분들을 정하고, 워크플로우도 작성하였다 오늘까지도 회의가 계속 되서 제대로 코드를 짜는건 아마 내일부터가 되지 않을까 싶지만(이러고 또 내일 할일 겁나 생기면 ㅠ..) 어제랑 오늘동안 제일 구현시켜보고 싶었던(일단 성공이 우선적으로 되어야하는 코드) 기능을 틈틈히 짜놓았다 오늘 구현시킨 기능은 사용자가 input창에 본인이 작성하고 싶은 애니메이션의 제목을 타이핑했을때, dbms에서 실시간으로 해당 키워드를 조회하도록 로직을 짜고 유저가 그 키워드를 클릭하면 그 value값이 들어가도록 세팅하는 테스트를 해보았다 코드를 짜다보면 한번씩 이렇게 에너지가 쪽 빨리면서 자신감이 뚝 떨어질때가 있는데 오늘이 그 날.. 2023. 2. 10.