기록하고 싶은 것들

최근 1차 면접에서 받았던 질문이 있었다. Flux 패턴에 대해서 아시나요? 들어 본 것 같지만, 개념에 대해서 잘 몰랐기 때문에 솔직하게 모른다고 답변했다. 면접이 끝난 후, 질문들을 정리하던 와중에 궁금증이 들어 검색을 해보니 모르면 안됐다. 리덕스를 사용해 본 사람으로서 Flux 패턴에 대해서 인지하지 못하고 있었던 사실이 너무 부끄러웠고, 이를 기억하기 위해 관련 개념을 기록해보고자 한다. 등장 배경 기존 애플리케이션은 MVC (Mode, View, Controller) 패턴을 보편적으로 사용하였다. Model에 데이터를 저장하고, Controller를 이용하여 Model의 데이터를 관리(CRUD)하는 패턴이다. 이 때, 데이터가 변경 시 Model에서 View로 전달이 되고, View를 통해 데..

Redux로 리팩토링하려는 이유 작성했던 일기장은 useContext, useReducer를 이용하여 전역적으로 상태 관리를 해주었다. useContext를 사용하면, 컨텍스트를 상태값 / 액션으로 나누어서 리렌더링 문제를 해결해야하고, 상태값, 액션을 따로 Provider로 적용해야하기 때문에 코드가 지저분해 보이기도 하였다. 또한 useReducer 의 경우 새로운 상태 값을 생성 할 때 해당 Context 내부에 포함된 컴포넌트들이 상태값의 일부에만 관심이 있더라도 강제로 re-render 되기 때문에 성능 문제가 발생 할 수 있었다. Redux 를 사용하면 저장소 상태의 특정 부분만 사용하고 해당 값이 변경 될 때만 re-render 할 수 있다. 따라서 상태관리 방식을 useContext에서 R..

오늘은 Redux 상태관리 실습의 추가적인 기능을 구현해보았다. actions/index.js action 부분에서는 Action 객체를 생성하는 액션 생성자 사용하여서 코드를 작성하였다. addCart의 경우는 새롭게 추가될 itemId를 받아서 itemId와 1개의 수량을 나타내는 payload 객체, 알맞은 타입을 반환해주었다 removeFromCart의 경우는 삭제에 필요한 itemId를 받아서, itemId를 나타내는 payload 객체와, 알맞은 타입을 반환했고, setQuantity의 경우 수정할 itemId와 수량을 받아서, itemId와 수량을 나타내는 payload 객체와 알맞은 타입을 반환해 주었다. pages/ShoppingCart.js Action 객체를 Reducer로 전달해 주..

오늘은 리덕스를 이용하여 상태관리를 해보는 실습을 진행하였다. 시작하기에 앞서서, 한 곳에 모든 코드를 작성하지 않고, Redux코드를 action, reducers, store 디렉토리로 분리해주면서 코드를 작성했다. Store.js 리덕스 확장프로그램을 사용할 경우 발생하는 에러를 방지해주는 composeEnhancers를 선언해주고, createStore 메서드를 활용해 Reducer를 연결하며, composeEnhancers 로 에러를 방지해주며 Store를 생성해준다. inititalReducer.js Dispatch에게서 전달받은 Action 객체의 type값에 따라서 상태를 변경시키는 함수를 작성한다. 카트에 item을 추가하는 ADD_TO_CART, 카트에서 item을 제거하는 REMOVE..