CodingCredit

🧐 Hooks testing? 리액트 프로젝트에서 react-hooks를 사용한다면, 공통된 로직이든 상태관련 로직이든 다양한 custom hook을 만들어 사용하게된다. 따라서 reducer나 component 테스팅뿐만 아니라 이러한 custom hook들이 의도대로 작동하는지도 테스팅해주는 것이 좋다. 하나의 component에서 사용되는 hook이거나 간단한 로직의 hook이라면 직접 테스팅하는 것이 쉽겠지만, 복잡한 로직의 hook이나 API요청이 있는 hook등은 직접 테스팅하는 것이 조금은 복잡할 수 있다. testing-library/react-hook 라이브러리를 사용하면 이러한 hook들을 쉽게 테스팅할 수 있다. 📚 testing-library/react-hooks testing-li..

🧐 Redux는 테스트하기 쉽다? 리액트로 프로젝트를 진행하면서, 전역상태관리를 위해 리덕스를 사용하는 이유중 하나는 테스트하기 쉽다라는 것이다. 테스트코드를 직접 작성해보기 전에는 어떤 점에서 쉽다는 건지 잘 이해가 되지 않았지만, 테스트코드를 작성하면서 테스팅이 용이하다고 느낀점은 아래의 2가지였다. 하나의 Store로 관리하기 때문에 리덕스로 관리하는 components들을 테스팅하기 쉽다. 리듀서는 순수함수로 구성되고, 라이브러리들이 잘 관리되어있어서 리듀서 테스팅, 미들웨어를 적용한 테스팅이 쉽다. 이번 글에서는 Redux의 Reducer들을 테스트한 내용을 기록해보도록 하겠다. 📚 Reducer testing 리듀서 테스팅은 state와 action을 테스트 케이스에 따라 넘겨주고, 그에 맞게..

드.디.어 4주프로젝트의 모달창을 리팩토링했다. 😆 아직 모달창을 띄우는 모든 컴포넌트를 리팩토링한건 아니구, 리덕스에 redux-saga를 세팅하고 채팅창 나가기버튼과 회원탈퇴 컴포넌트에 적용해놨다. 아주 잘된다. 속이 시원하다. 리팩토링하면서 공부하고 배운 과정들을 기록해보겠다!! 🧐 리팩토링 왜 한거야? 리팩토링의 목적부터 먼저 말하면 아래와 같다. 모달창을 OPEN할 때 callback함수를 dispatch해서, 모달창의 예/아니오 버튼에 따라 다른 callback 함수를 실행시키자!! 사실, 프로젝트를 진행하면서도 위를 구현해야 했다. 그러나 당시에는 데드라인이 정해져있었기때문에 추가로 redux-middleware를 공부해서 적용할 만한 시간이 없었다. 따라서 방법이 없을까 궁리하다가 아래와 ..

Redux의 state와 React의 component를 연걸하는 방법에는 다음 두가지 방법이 있다. connect parameter를 통해 mapStateToProps, mapDispatchToProps와 같은 메소드를 이용하는 방법 Redux hooks의 useSelector(), useDispatch() 메소드를 이용하는 방법 이 중, Redux hooks가 좀더 최근에 나온 방법이고 직관적인 방법이다. useSelector() useSelector()는 컴포넌트와 state를 연결하는 역할을 한다. 컴포넌트에서 useSelector메소드를 통해 store의 state에 접근할 수 있다. const { postList } = useSelector(store => store.post.postList)..

redux는 강력한 상태관리 라이브러리다. React와 함께 자주쓰이기지만, React에 종속된 라이브러리는 아니며, Augular, jQuery, vanilla JavaScript 등과 함께 다양하게 쓰일 수 있다. Flux 구조 Flux는 Facebook에서 만든 client-side web applications을 구축할 때 사용하는 application architecture(앱 구조), design pattern(디자인 패턴)이다. MVC (Model–View–Controlle)구조 의 단점을 보완할 목적으로 개발된 Flux는 대규모 프로젝트에서 너무 복잡해지는 MVC구조의 단점을 보완하는 단방향 데이터 흐름(unidirectional data flow)의 구조이다. 리덕스는 Flux의 구현체라..