공대키메라

전번에 필자가 redux-saga를 공부했었는데, 이런 문제가 있다. redux로 이제 store를 생성해서 사용 했는데 이게 deprecated되어서 redux-toolkit을 사용하라고 버젓이 적혀있다. 이것을 또 놓치고 그냥 가기에는 키메라의 마음에 너무 걸린다 끼에엑!@ 고로... 이번 시간에는 redux-toolkit에 대해 알아보고 이것을 어떻게 기존 코드를 변경시켜서 redux team에서 추천하는 redux-toolkit으로 도배할 것이다 (가즈아!) 참고한 사이트는 다음과 같다. 출처 https://www.youtube.com/watch?v=9MMSRn5NoFY&ab_channel=EdRoh https://redux-toolkit.js.org/ https://redux-toolkit.js..

지난 시간에 redux-saga를 어떻게 code splitting 을 적절하게 적용해서 함께 사용할 수 있는지 알아보았다. (궁금하면 여기 클릭!) 이번 시간에는 Next.js란 무엇인지 알아보고, 처음 프로젝트틀 한번 세팅해볼 것이다. 참고한 사이트는 다음과 같다. 출처: https://nextjs.org/learn/foundations/about-nextjs https://nextjs.org/learn/basics/create-nextjs-app https://nextjs.org/learn/basics/assets-metadata-css/assets 1. Next.js란? CSR sv SSR 에 대해 알아본 적이 있는데(궁금하면 여기 클릭), 그때는 간단하게 Next.js에 대해 소개했었다. Nex..

지난 시간에 redux-saga에 대해 간단히 알아보았다. (궁금하면 여기 클릭!) 이번 시간에는 다시 좀 더 나은 예제로 다시 연습해보려고 한다. 사실 전에 예시는 무언가 reducer도 나뉘어 있지 않아서 작업을 하는데 있어서 사용함에 있어서 매우 불편했다. 이번에는 좀 더 깔끔하게 구조를 잡고 학습할 것이다. reducer와 redux-saga를 다시 잘 적용하면서 말이다. 참고한 내용은 다음과 같다. 출처: https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC https://react.vlpt.us/basic/23-immer.ht..

지난 시간에 Redux-thunk에 대해 알아보았다. (궁금하면 여기 클릭!) 이번 시간에는 Redux-thunk와는 좀 다른 Redux-saga에 대해서 알아보겠다. 참고한 사이트는 다음과 같다. 참고: https://redux-saaga.js.org/ https://kyounghwan01.github.io/blog/React/redux/redux-saga/#%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%B2 https://react.vlpt.us/redux-middleware/10-redux-saga.html 1. redux-..

지난 시간에 Redux code splitting 을 combine reducer로 어떻게 적용하는지 알아보았다. (궁금하면 여기 클릭!) 이번에는 정말로 Redux thunk와 Redux Saga에 대해 알아보고 적용할 것이다. 필자가 참고한 사이트는 다음과 같다. 참고: https://www.redhat.com/ko/topics/middleware/what-is-middleware https://react.vlpt.us/redux-middleware/ https://redux.js.org/usage/writing-logic-thunks https://redux.js.org/usage/writing-logic-thunks#thunk-overview https://react.vlpt.us/redux-mi..

지난 시간에 Redux의 간단 사용법을 공식 사이트에서 소개하는 대로 사용해보았고(여기 클릭!), 개념에 대해서 알아보았다.(여기 클릭) 이번 시간에는 Redux에 대해 부족했던 설명으로 Code Splitting 하는 방법, 이를 합치는 Combine Reducer를 사용하는 방법과 함께 Redux-thunk, Redux Saga에 대해서 알아볼 것이다. 이 내용에서 정리할 내용은 다음 사이트를 참고했다. 참고: https://redux.js.org/usage/structuring-reducers/splitting-reducer-logic https://javascript.plainenglish.io/simple-application-of-redux-combinereducers-in-react-6ac3..

저번 시간에 Redux에 대해서 간단히 사용하는 방법을 공부해보았다. (궁금하면 여기 클릭!) Redux를 저번에 간단하게만 알아본 것 같아서 이번 시간에는 개념에 대해서 알아볼 것이다. 내가 정리하는 내용은 전부 공식 사이트에 있는 것이다. 이것을 필자는 해석하고 설명한 것 밖에 없다! 사실 이러한 행위가 내 학습을 위한 것이기도 하다. 궁금한 분은 출처 사이트에서 모든 내용을 더 자세히 확인할 수 있다. 출처 : https://ko.redux.js.org/tutorials/essentials/part-1-overview-concepts 1. 리덕스 용어와 개념 1.1상태 관리(State management) Redux의 용어와 개념에 대해 알기 전에 공식 사이트에서는 다음 Component를 보여주는..

이전 시간에는 CSR과 SSR에 대해서 간단히 알아보았다. (궁금하면 클릭!) 금일은 Redux에 대해서 알아보고 이를 적용하는 법을 공부하려고 한다. 다음은 참고한 내용이다. 출처 : https://react-redux.js.org/ https://redux.js.org/understanding/thinking-in-redux/motivation https://react-redux.js.org/tutorials/quick-start 1. Redux란 무엇인가? Redux에 대한 설명을 Redux 공식 사이트에서 확인할 수 있었다. React Redux는 Redux를 위한 공식적인 React UI binding layer다. 당신의 React component들이 Redux store로 부터 데이터를 읽..

지난 시간에는 React Router의 기능에 대해 좀 더 알아보았다. (궁금하면 여기 클릭!) 먼저 Redux에 대해 알아보려고 했는데, 먼저 알고 넘어가야할 듯한 중요한 개념을 찾았다. 그래서 이번시간에 CSR 과 SSR에 대해 알아보고 SSR은 그러면 어떻게 React에서 구현하는지 알아보도록 하겠다. 참고한 사이트는 다음과 같다. 출처: Dream Coding Ellie : 서버사이다 렌더링(https://www.youtube.com/watch?v=iZ9csAfU5Os) https://velog.io/@leejyart/React-%EB%A1%9C-SSR-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 https://korinkorin.tistory.com/78 https://ww..

저번 시간에는 useReducer와 React Router 에 대해 간단히 알아보았다. (궁금하면 클릭!) 이번 시간에는 React Router에 어떤 기능이 있는지 알아보도록 하겠다. 많은 기능이 있지만 최대한 내가 써먹을 수 있을 만큼 알아보도록 하겠다. 그럼 후비고~ 다음 내용은 모두 React Router 홈페이지에 있으니 자세한 내용은 이곳을 참고하길 바란다. 출처: https://reactrouter.com/docs/en/v6/getting-started/tutorial https://mygumi.tistory.com/414 https://abangpa1ace.tistory.com/209 https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%A..