[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()를 적는 이유가 궁금해서 조금 더 찾아..
[Javascript] client.js:1 The above error occurred in task removePost Cannot read properties of undefined (reading 'data') RangeError [ERR_HTTP_INVALID_STATUS_CODE]: Invalid status code: 10
2023. 11. 22. 21:50
개발/Error note
게시글을 삭제하는데 개발자 도구 브라우저 콘솔에서 위와같은 에러가 떴다. function* removePost(action) { console.log('removePost::', action); try { const result = yield call(removePostAPI, action.data); yield put({ type: REMOVE_POST_SUCCESS, data: result.data, }); yield put({ type: REMOVE_POST_OF_ME, data: action.data, }); } catch (err) { console.error(err); yield put({ type: REMOVE_POST_FAILURE, data: err.response.data, }); } ..
[Next.js] create-next-app으로 프로젝트 만들고 기본 라우팅까지 잡아보기
2023. 7. 13. 07:01
개발/Javascript
//프로젝트명 npx create-next-app next10-jsmeetup npx cra 하는것처럼 만들어주고 필요없는 스타일, pages 내용 제거 후에 cd 명령어를 사용해서 내 프로젝트의 루트 디렉터리로 이동해준다. cd next10-jsmeetup npm run dev package.json에 scripts를 보고 개발버전이니까 npm run dev로 파일을 실행시켜준다. next.js는 따로 라우터 설정없이 폴더를 기준으로 라우팅을 잡는다. _app.js는 각 페이지가 초기화될 때 로딩되는 파일이다. 때문에 공통 레이아웃, 글로벌 CSS를 적용할 수 있다. index.js는 / 경로가 된다. news.js는 /news 경로가 된다. / 밑에 하위폴더 설정하는 다른방법 news라는 폴더를 만들..
[Javascript] 웹팩 변경사항 바로바로 적용하기 (webpack-dev-server)
2023. 6. 7. 18:32
개발/Javascript
npm i -D webpack-dev-server일단 데브디펜던시로 webpack-dev-server를 받는다. devServer: { devMiddleware: { publicPath: "/dist" }, static: { directory: path.resolve(__dirname) }, hot: true, },기존 webpack.config.js에 devServer 설정부분을 추가해준다. 기존에 빌드했던 dist 폴더 제거 "scripts": { "dev": "webpack serve --env development" },package.json내 스크립트 부분 변경 npm run devnpm run dev를 이용해 다시 빌드를 해주고 컴파일이 완료됐다는걸 터미널에서 확인한 후 localhost:80..
[Javascript] VSCode에서 개발환경 구축하기
2023. 5. 31. 21:18
개발/Install, setting, etc
여어 티-하~ (티스토리 하이라는 뜻) 이사오면서 노트북생활을 내려놓고 데스크탑을 맞췄슴다. = 컴퓨터가 백지상태 그래서 다시 셋팅을 하기로 했서요. 일단 운영체제가 윈도우라 윈도우 기준으로 포스팅 nvm 설치하기 GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go. A node.js version management utility for Windows. Ironically written in Go. - GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironic..