CodingCredit

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

🧐 절대경로 import ? 보통 디렉토리구조가 복잡하지 않다면 import 시 상대경로로 설정해도 큰 불편함이 없다. 그러나 디렉토리 구조가 복잡할수록 상대경로가 길어지고 보기 안좋아지게 되는데, 나의 경우 테스트코드를 작성하면서 절대경로로 import할 필요성을 느끼게되었다. 디렉토리구조는 아래와 같다. ├── _test/ ㄴ_reducer/ ㄴ todo.test.ts ㄴ components/ ㄴ hooks/ ... ├── src/ ㄴ _reducer/ ㄴ todo.ts ㄴ components/ ㄴ hooks/ ...src폴더와 같은 deps에 _test폴더가 존재하기때문에 _test폴더의 파일에서 src폴더의 파일들을 import하기 위해서는 조금은 어지러운 상대경로를 설정해야했다. 따라서 이를 간..

🧐 왜 jest환경에서 import를 사용하기위해서 따로 설정이 필요할까? 이유는 jest가 node환경에서 실행되기 때문이다. 즉 Webpack같은 번들러의 결과물을 실행하는 것이 아니라 파일의 코드 그대로 실행한다. 따라서 ES6나 기타 문법을 사용하고 싶다면 테스트 환경에서 사용하는 babel.config.js 또는 babelrc 파일을 설정해야 합니다. ❓ 바벨 설정 파일 차이 .babelrc : 하위 디렉토리나 파일에서 특정 플러그인이나 변환(규칙)을 실행할 때 사용 babel.config.js : 여러 패키지 디렉토리를 가진 프로젝트에 설정할 때 사용 babel.config.json : babel.config.js 사용에 의한 API 노출로 인해 이에 대한 노출 방지와 복잡도를 줄이기 위해 정..

💩 Jest 초기환경 설정에서의 에러들 테스트코드 작성을 위한 공부 중 발생한 jest 초기환경 설정에서의 에러들을 기록하기위해 글을 작성한다. Unexpected token "

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

어제부터 4주 프로젝트에서 구현한 모달창을 리팩토링하기위해 redux middlware를 로컬에서 적용해보고 있다. 목표: 모달창의 예/아니오에 따른 콜백함수를 리덕스에 전달하여 실행시키기 현재는 Modal component에 콜백함수를 직접 넣어서 예/아니오에 따라 실행시키고 있는데 기능은 어찌저찌 되지만... Modal component에 온갖 콜백함수가 들어가게되고 컴포넌트가 너무 무거워진다는 생각이 들었다. 공부를 좀 하다가 middleware를 써서 함수를 dispatch하면 되겠다는 생각이 들었다. redux-toolkit을 사용했기때문에 기본으로 내장되어있는 redux-thunk를 먼저 사용해봤다. export const modalCallback = createAsyncThunk('m..