[Next.js] Server ErrorError: Error serializing `.initialState.post.loadPostError
2024. 2. 6. 21:26
개발/Error note
데이터를 가져오는중 sagas 에러처리부분에 오류가 생겼다.TypeError: Cannot read properties of undefined (reading 'data') 라서 그냥 별 생각없이 err.response.data부분에 옵셔널 체이닝을 걸었다. 그런데 갑자기.. 생전 처음보는 에러로 바뀌어버렸다. 읽어보니 undefined는 JSON에서 직렬화를 할 수 없으니 null이나 다른 값을 뱉어내라는 말이었다. yield put({ type: LOAD_USER_POSTS_FAILURE, error: err.response?.data ?? null, });err.response.data를 err.message로 바꾸는 방법도있지만 서버에서 전송될 에러데이터를 객체로 받고싶어서 체이닝 + 널병합 연산..
[Eslint] 'React' must be in scope when using JSXeslintreact/react-in-jsx-scope
2024. 1. 10. 06:03
개발/Error note
Eslint 설정을 마치고나니 'React' must be in scope when using JSX 오류가 떴다. Eslint가 없을때는 React를 임포트 해주지않아도 Next 에서 알아서 인식을 해줬는데, Eslint 설정이 들어가고 나서는 스코프 오류가 생긴다. 해결방법1 import React from 'react' 상단에 react를 임포트를 해준다 해결방법 2 "rules": { "react/react-in-jsx-scope": "off" } eslintrc에 해당 규칙을 추가해준다
[Redux-Saga & Next.js] getServerSideProps에서 dispatch 수행하기 (store.dispatch(END), store.sagaTask.toPromise())
2023. 12. 21. 21:41
개발/Javascript
// SSR export const getServerSideProps = wrapper.getServerSideProps( (store) => async () => { store.dispatch({ type: LOAD_USER_REQUEST, }); store.dispatch({ type: LOAD_POSTS_REQUEST, }); //saga에서 END 액션불러오기 store.dispatch(END); //saga에서 success될때까지 기다려주는 액션 await store.sagaTask.toPromise(); } ); 강의에서 CSR에서 dispatch하던 부분을 SSR로 바꾸는 도중 store.dispatch와 store.sagaTask.toPromise()를 적는 이유가 궁금해서 조금 더 찾아..
[Next.js] 에서 Unhandled Runtime ErrorError: Text content does not match server-rendered HTML.See more info here: https://nextjs.org/docs/messages/react-hydration-error
2023. 11. 1. 20:20
개발/Error note
오류상황 더미데이터 생성 디펜던시 @faker-js/faker 를 사용한 후 아래와 같은 오류가 발생했다. (faker는 사용하면 안됩니다..!) Text가 서버랜더링 때와 일치하지 않는다는 뜻 같았다. 비슷하게 css로도 해당 오류를 본 적이 있었고, fakerjs 홈페이지에 해결방법이 있었다. 해결방법 faker.seed(123); faker를 수행하는 코드부분 위쪽에 .seed 함수를 먼저 불러주면 되는데, 공식문서 설명으로는 일관된 결과를 유지해 주는 함수라고 적혀져있다. 그 덕분에 서버랜더링 이후에도 오류가 발생하지 않는 것같다. 123말고 문자열을 적어봤는데 다시 오류가 떠서.. 숫자를 해봤더니 숫자는 괜찮더라. (시퀀스 느낌이라 그런가?) 무튼 그냥 공식문서 샘플대로 123을 적어두는게 좋을..
[원티드 7월 프리온보딩] 직접 만져보는 Next.js해부학 교실 - CSR / SSR with Next.js 후기 (with 오종택)
2023. 7. 17. 20:36
개발/Inafolio
오종택 챌린지메이커님의 강의를 들을 수 있었다. 프리온보딩 커리큘럼은 사전과제와 총 4번의 강의가 있다. 사전과제 1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. - CSR(Client Side Rendering)는 말그대로 클라이언트측에서 랜더링을 하는것. - 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내주고 클라이언트는 그것을 받아 랜더링을 시작한다. - SPA(Single Page Application) : 단일 페이지로 구성된 애플리케이션 SPA는 CSR방식으로 랜더링하기 때문에 단 한번만 리소스(HTML, CSS, JS)를 로딩하고 이후엔 데이터를 받아올 때만 서버와 통신하고 기존페이지의 내부를 수정해서 보여준다. 2. 장점 -..