문법 문제 페이지에 접속할때 initializeClickExampleAndSubmitAndAnswer액션과 getGrammarById액션이 2번씩 반복되고 있었습니다. getGrammarById는 서버에 Grammar 조회를 요청하는데, 이로인해 서버에서 동일한 grammar 조회 쿼리가 2번 발생하고 있었습니다. 원인을 파악하고자 하나의 라우터에서 순서대로 실행되는 GrammarBookPage > GrammarBookContainer > GrammarBook > GrammarContainer 컴포넌트들을 뜯어봤습니다. 자세히보니 GrammarBookPage가 매핑된 라우터의 URL로 직접 접속하거나 새로고침해도 액션들이 한 번씩 더 디스패치되고 있었습니다. GrammarBookContainer컴포넌트에..
React
오류 발견 리액트 앱 실행시 콘솔창에 다음과 같은 오류 로그가 나타납니다. A non-serializable value was detected in an action, in the path: `register`. Value: ƒ register(key) { _pStore.dispatch({ type: _constants__WEBPACK_IMPORTED_MODULE_2__["REGISTER"], key: key }); } 오류 원인 로그만 보면redux는 state, action에 직렬화가 불가능한 값을 전달할 수 없어 발생하는 오류입니다. 하지만 기능은 정상적으로 작동합니다. 더 찾아본 결과, redux-persist의 고유 문제인것 같습니다. non-serializable value error · Is..
리액트를 공부하며 애플 홈페이지의 아이폰15 소개 페이지를 따라 만드는 중이다.애플에는 글자가 특정 스크롤 위치에 반응하며 fade in되는 애니메이션이 있다.아래 글을 참고해(+뤼튼) 스크롤시 특정 위치에서 fade in되도록 만들었다.https://shylog.com/react-custom-hooks-scroll-animation-fadein/ React Custom Hooks로 scroll animation 만들기 FadeIn편 | 수줍은 동그래 블로그해당 글은 김주성님의 세미나를 듣고 작성한 글 입니다. React Custom Hooks로 scroll animation 만들기 FadeIn편 작년에 React Hooks이 정식 릴리즈 된 이후 많은 사람들이 Hooks을 사용하고 있습니다. Hooks..
