-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
현영님 질문이 있습니다.
22.05.01 23:43 작성 조회수 206
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;
답변을 작성해보세요.
1
인표
질문자2022.05.02
우선 페이커를 떼어냈을 때 정상 작동한 것을 확인해서, 다음 강인 인피니티 스크롤 강의쪽으로 넘어가 작업하니 정상작동이 됩니다.
더미데이터에 임의의 데이터를 넣었다는 것은 변함이 없고.. 데이터를 함수형으로 리턴 후 페이지에 뿌리는 작업도 에러의 원인과는 상관없다는 생각이 드는데.. 오히려 정상작동 되는게 더 의아하네요..
조현영
지식공유자2022.05.02
일단 에러 자체는 사실 정상작동에 영향을 끼치는 에러가 아닙니다. 저 에러는 서버에서의 html과 클라의 html이 다르다는 것인데 당연히 다를 수밖에 없습니다. faker를 사용했으니까요. faker는 랜덤성이 있기 때문에 서버에서 faker를 호출한 것과 클라에서 faker를 호출한 내용이 다르게 되고 저런 에러가 뜨게 됩니다.
답변 1