에러 발생시점: 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;

안녕하세요. 강의를 따라가고 있는데 일기를 새로 작성하기를 해도 왜 일기 리스트에는 업데이트가 안 되는 지 궁금합니다.     https://codesandbox.io/s/determined-cartwright-oep0ii?file=/public/index.html    

안녕하세요 3:45에 fetch then대신  try catch로 바꿔 봤는데 이렇게 사용하면 될까요? const getData = async () => { try { const response = await (await fetch(`https://jsonplaceholder.typicode.com/comments`)).json(); console.log(response); } catch (err) { console.log(err); } };

안녕하세요! 우선 좋은 강의 제공해주셔서 감사해요.   다름이 아니라, 강의 영상 28:47 부분과 같이 다이어리 리스트가 화면에 떠야 하는데 뜨지 않는 에러가 발생했고, 스스로 해결이 안 돼서 도움을 요청하려고 글을 쓰게 되었어요.   개발자도구 요소 탭에서도 리스트가 뜨지 않더라구요. 코드 마지막 부분 즉 export default DiaryList; 바로 앞 부분에 console.log(diaryList);도 입력해 보았는데 콘솔 창에는 undefined라고 출력이 되었어요. 코딩 공부가 처음이다보니 에러를 해결하기 위해 무엇부터 손을 대야 할 지도 모르겠고 질문조차 어떻게 해야 할 지 모르겠네요..ㅎㅎ  

안녕하세요. 강의를 잘 듣고 있습니다. 6:49 부모 컴포넌트에서 데이터를 자식 컴포넌트로 이동하는데 만일  자식끼리 데이터를 useState로 해야 한다면 redux를 이용하면 될까요?

제로초님 nodebird에서 comment 관계에서는 user.hasmany(comment) post.hasmany(comment)  이렇게 관계를 설정하였는데 이는 아무 유저가 comment 작성이 가능하게 하기위해 이렇게 하였고    상품구매 리뷰에서는 상품을 구매한 사람에 한해서만 comment를 작성해야만 하니 comment는 user, product의 belongsToMany로 관계 설정을 해줘야 한다고 판단했는데   맞을까요?  

강의 내용과 조금 떨어진 질문입니다. 크롬 개발자 툴에 컴포넌트를 보여주는것과 프롭스,훅스 등을 보여주는 창이 가로로 나뉘어져 보여지고 있는데, 이걸 윈터루드님처럼 위아래로 나뉘어지게 하려면 어떻게 해야하나요?

안녕하세요! img src 주소 관련 질문드리겠습니다! process.env.PUBLIC_URL + `/... 경로`를 하셨는데 src에 그냥 /assets/emotion1.png를 해도 잘 나오는데 상관없는거죠?? 

안녕하세요 zerocho님. 항상 친절하게 답변주셔서 감사합니다. 몇가지 질문이 있습니다.   1. getServerSideProps에서는 브라우저에서 쿠키를 들고 next.js 서버로 오기 때문에 cookie를 가지고 올 수 있다고 이해했는데 getStaticProps는 빌드 시에 실행되기 때문에 cookie를 들고있지 못한걸로 이해했는데 맞나요? 만약 그렇다면 getStaticProps에서 사용하는 API는 인증이 필요하지 않은 API만 사용해야하나요?   2. getServerSideProps는 SSR이라 이를 이용하게되면 화면이 전체 깜빡임이 일어날거라고 생각했는데 실제로는 일어나지 않더라구요. 혹시 이유를 알고 계신지 궁금합니다.

저만 그런건지 모르겠지만 아래 환경에서 jest.fn() is not function 에러가 발생하고 있습니다. 1. Express.JS 사용 중 2. ES6 문법을 사용 중 3.  package.json 에 "type":"module" 옵션 추가 4. 그로 인해 import 구문의 './파일명.js' 로 작성해야함 5.  package.json 의 script 항목의 "test" : "jest" 를 아래로 변경 "node --experimental-vm-modules node_modules/jest/bin/jest.js"    에러 발생 원인은 '.js' 부분 떄문이라고 추측하지만 정확하지 않습니다. 떠힌 Jest NODEModules 기능은 실험적 기능이며, 몇몇 기능이 지원되지 않는 것이라고 추측하고 있습니다.따라서 dev 환경에서는 ES6 를 쓰도록 별도로 셋업하고 ES5 로 빌드 하는 과정이 필요한 것이 아닌가 싶었습니다.git clone https://github.com/unchaptered/express-web my-app 혹은npx degit unchaptered/express-web my-appcd my-appnpm i를 이용해서 프로젝트를 셋업하고 작성하시면 됩니다.커뮤니티에도 올려두었는데 문제 되는 부분 있으면 댓글 부탁드립니다.  ES6 Express Jest Boilerplate Template ES6 익스프레스 보일러플레이트 탬플릿 - 인프런 | 자유주제 (inflearn.com)

강의에서는 useRef 를 사용하면 된다고 하셨는데, 그 이유가 무엇인지에 대한 설명이 없으셔서  let 이나 var 는 불가능한가 해서 테스트해보니 값이 증가하지 않더라구요. 왜 그런지 이유가 궁금합니다.     // const dataId = useRef(0);   let dataId = 0;   const onCreate = (author, content, emotion) => {     const created_date = new Date().getTime();     const newItem = {       author,       content,       emotion,       created_date,       id: dataId,     };     dataId += 1;     setData([newItem, ...data]); };

강의 너무 잘듣고 있습니다! 하지만 Props 정말 알듯 모를듯 아리송하네요.. 질문드립니다! 1. 파일명은 무조건 대문자 시작인가요??  2. 각 컴퍼넌트에 return 뒤에는 하나 이상일 경우 ()가 오고 한 줄 일경우에는 <> </>로도 가능할까요? 3. children 이라는 Props는 고정된 이름인가요? 다른 child같은걸로는 변경 불가능하죠?? 변경해서 하니까 오류가 나더라구요! 4. <button count={count}> 이렇게 속성으로 준 Props와 객체로 선언해서 넘겨주는 Props를 동시에 사용 못하나요?? const Counter = (props,{ counterValue3 }) => { const [count, setCount] = useState(counterValue3); // props 매개변수로 받아 프로퍼티로 전달 방법   이런식으로 말이죠..  

강의 잘 보고 있습니다. 질문이 있는데요, useEffect()로 Mount 를 구현하였고, 콘솔에 로그를 Mount를 출력하였습니다. 그런데, 이상하게, Mount 로그가 두번씩 출력됩니다. 동작은 이상없지만, 두번 출력되는게 이상해서요~ 제가 무엇을 잘못했는지 궁금합니다. useEffect(()=>{   console.log("Mouint!"); }, []); 즐거운 하루 보내세요.

react-redux에서 발생하는 오류인듯 한데 구글링 해보니 수업 코드와 너무 달라지는데 어떻게 해결해야 할까요? 코드일부 import { useDispatch } from 'react-redux'; import {loginUser} from '../../../_actions/user_action'; function LoginPage() {   const dispatch = useDispatch(); 깃:https://github.com/kim-seungmin/boiler_plate

제로초님 제가 react-query useQuery Hook을 사용하여 데이터를 받아왔습니다. 이 데이터 값들을 버튼 onClick 함수를 만들어서 버튼을 클릭할 때마다,   useQuery api 요청을 콜을 해 주고 싶습니다. 그래서 찾아보니 useQuery refetch 를 알게되었고, refetch 함수를 onClick 함수에 넣어주었는데, 동작을 하지 않네요 ㅠㅠ.   useQuery api를 버튼을 클릭할 떄 마다 api call 을 해주고 싶은데 어떻게 해줘야 할까요...

antd같은 ui 컴포넌트를 사용안하면 한 컴포넌트 안에서 styled component가 차지하는 코드량이 상당히 많을 것 같은데 실무에서도 styled component의 코드길이에 상관없이 해당 컴포넌트에 다 적는지 아니면 따로 폴더에 분리해서 import하는지 궁금합니다. 

안녕하세요. 강사님, 강의 잘 듣고 있습니다.   다름이 아니라, useEffect 부분 따라하고 있는데 다르게 작성한 부분이 없는데 useEffect 부분이 항상 2번씩 호출되서 콘솔에 찍힙니다.  다른 예제 할때도 이게 계속 반복되는데 혹시 왜 그런걸 까요? 

안녕하세요. 이제 막 React를 시작한 초보 개발자 입니다. 강의 11분에 리스트를 undefined 했을때 어떤 부분에서 에러가 나는지 강사님과 같은 화면을 보고싶으면 어떻게 해야하나요?  저는 위와 같은 화면이 뜨지 않고 빈 화면만 표기가 됩니다. 그리고 콘솔에 에러 표기도 DiaryList.js 가 아닌 bundle.js 로 표기가 되는데ㅠ 강사님처럼 상세 에러 화면을 보려면 어떻게 해야 하나요? 궁금합니다!

안녕하세요. 강의 잘 보고 있습니다. 다름 아니라 defaultProps 부분과 관련해서 여쭤보고 싶은 게 있어서요.   지금 강의에서는 props가 undefined으로 올 때 등을 대비해서 defaultProps을 지정해주시는데, 혹시 이 방법 말고 diaryList에 바로 디폴트 값(빈 배열)을 할당하면 안 될까요? (ex. {diaryList = []}) => {...} ) 기본값 매개 변수로 지정할 수도 있을 것 같아서 여쭤봅니다. 아니면 혹시 차이점이 있을까요?   감사합니다!

안녕하세요. 강의 보면서 기초 개념 다지는 중인 학생입니다 :)   다름이 아니라 일기 작성 시 제목과 내용 본문 입력 후, 점수를 별도로 선택하여(이벤트 발생) 저장하면 데이터가 잘 넘어가는데, default로 설정한 점수에서 점수를 별도로 선택하지 않고 제목과 내용만 입력 후 저장하면 데이터가 넘어가지 않은 채 undefined로 콘솔에 확인이 됩니다.ㅠㅠ   간략하게는 제목, 내용, 점수 모두 지정해서 저장하면 잘 나옴. A 제목, 내용만 쓰고 디폴트 점수로 저장하면 점수가 undefined로 됨. 입니다! B   어디가 문제인지 하루종일 들여다봐도 문제를 찾을 수가 없어서 질문드려요ㅠㅠ