inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] React로 NodeBird SNS 만들기

faker로 실감나는 더미데이터 만들기

현영님 질문이 있습니다.

해결된 질문

319

손서연

작성한 질문수 11

2

에러 발생시점: faker.js 사용 후입니다

에러 최대한 제 손으로 잡으려 했는데 이번 거는 찾기가 조금 힘들고 감이 안오네요.. 처음 npm run을 했을 때 화면에는 정상적으로 더미데이터가 들어오면서 에러도 같이 뜨는 상태입니다(에러를 끄면 컨텐츠와 댓글 등등의 기능 동작은 되네요)

간단하게 힌트만 주셔도 직접 해결 해보겠습니다 감사합니다

 

코드:

import {faker} from  '@faker-js/faker';
export const initialState = {
        mainPosts: [],
        imagePaths: [],
        addPostLoading: false,
        addPostDone: false,
        addPostFailure: null,
        removePostLoading: false,
        removePostDone: false,
        removePostFailure: null,
        addCommentLoading:false,
        addCommentDone: false,
        addCommentFailure: null
    }

  initialState.mainPosts = initialState.mainPosts.concat(
      Array(20).fill().map(() => ({
        id: shortId.generate(),
        User:{
            id:shortId.generate(),
            nickname: faker.company.companyName()
        },
        content: faker.lorem.paragraph(),
        Images: [{
            id: shortId.generate(),
         
        }],
        Comments:[{
            User:{
                id: shortId.generate(),
                nickname: faker.name.findName()
            },  
            content: faker.vehicle.vehicle()
        }]
    }))
)

 에러:

 

++  에러에 HYDRATE관련된 에러가 있어 우선은 리듀서폴더에 있는 index.js같이 첨부합니다

import { HYDRATE } from "next-redux-wrapper"
import { combineReducers} from 'redux'
import user from './user'
import post from './post'

const rootReducer = combineReducers({
    index: (state = {}, action) => {
      switch (action.type) {
        case HYDRATE:
          console.log('HYDRATE', action);
          return { ...state, ...action.payload };
        default:
          return state;
      }
    },
    user,
    post,
  });
   

export default rootReducer;

express react redux nodejs Next.js

답변 1

1

제로초(조현영)

여기서 페이커를 떼어내보면 다시 정상적으로 작동하는지 확인이 필요합니다.

0

손서연

우선 페이커를 떼어냈을 때 정상 작동한 것을 확인해서, 다음 강인 인피니티 스크롤 강의쪽으로 넘어가 작업하니 정상작동이 됩니다. 

더미데이터에 임의의 데이터를 넣었다는 것은 변함이 없고.. 데이터를 함수형으로 리턴 후  페이지에 뿌리는 작업도 에러의 원인과는 상관없다는 생각이 드는데..  오히려 정상작동 되는게 더 의아하네요..  

0

제로초(조현영)

일단 에러 자체는 사실 정상작동에 영향을 끼치는 에러가 아닙니다. 저 에러는 서버에서의 html과 클라의 html이 다르다는 것인데 당연히 다를 수밖에 없습니다. faker를 사용했으니까요. faker는 랜덤성이 있기 때문에 서버에서 faker를 호출한 것과 클라에서 faker를 호출한 내용이 다르게 되고 저런 에러가 뜨게 됩니다.

0

손서연

네 이해가 가네요. 디테일한 부분에 대해서는 제가 찾아보겠습니다. 답변 감사합니다.

넥스트 버젼 질문

0

78

2

로그인시 401 Unauthorized 오류가 뜹니다

0

89

1

무한 스크롤 중 스크롤 튐 현상

0

175

1

특정 페이지 접근을 막고 싶을 때

0

103

2

createGlobalStyle의 위치와 영향범위

0

96

2

인라인 스타일 리렌더링 관련

0

91

2

vsc 에서 npm init 설치시 오류

0

147

2

nextjs 15버전 사용 가능할까요?

0

158

1

화면 새로고침 문의

0

121

1

RTK에서 draft, state 차이가 있나요?

0

153

2

Next 14 사용해도 될까요?

0

452

1

next, node 버전 / 폴더 구조 질문 드립니다.

0

349

1

url 오류 질문있습니다

0

211

1

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

0

373

1

sudo certbot --nginx 에러

0

1275

2

Minified React error 콘솔에러 (hydrate)

0

470

1

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

0

247

1

프론트서버 배포 후 EADDRINUSE에러 발생

0

327

1

npm run build 에러

0

518

1

front 서버 npm run build 중에 발생한 에러들

0

382

1

서버 실행하고 브라우저로 들어갔을때 404에러

0

338

2

css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

0

288

1

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

0

239

2

해시태그 검색에서 throttle에 관해 질문있습니다.

0

201

1