본문 바로가기

분류 전체보기368

[jest]목킹하는 법

대부분 테스트 코드를 짜다보면, 테스트하고자 하는 코드에대해서 관심없는 코드까지 동작이 어우러지는 테스트를 해야한다. 예를 들어서, 다른 커스텀 훅을 임포트해서 동작하는 커스텀 훅을 테스트한다던지. react-redux의 useSelector를 사용하는 커스텀 훅을 테스트할 때가 이런 상황이다. react-redux의 useSelector를 사용해서 store에 접근해서 데이터를 받아오고, 이를 가공해서, 컴포넌트에 데이터를 공급해주는 커스텀 훅을 테스트할 때는 useSelector를 반드시 목킹해줘야 한다. 그래야 실제로 테스트하는 커스텀 훅의 관심 동작만을 테스트할 수 있다. 테스트 코드를 목킹하는 방법을 찾는 것처럼 삽질도 없다. jest의 목킹방법 아래 코드면 끝난다. jest.fn() useSe.. 2022. 11. 18.

[redux-saga-test-plan]redux-saga-test-plan

https://www.npmjs.com/package/redux-saga-test-plan#integration-testing expectSaga().provide().put().run() expectSaga() provide() put() run() 2022. 11. 15.

[Formik] 리액트 폼 라이브러리

https://formik.org/ Formik React hooks and components for hassle-free form validation. The world's leading companies use Formik to build forms and surveys in React and React Native. formik.org 눈물없이 리액트와 리액트 라이브러리에서 폼 빌드해주는 라이브러리이다. 3가지 장점 - 검증과 에러 메시지 - 폼 제출 다루기 - 폼 상태 안/밖으로 values 얻기 Redux-Form 대신 쓰는 이유는? - Redux-Form is 22.5 kB minified gzipped (Formik is 12.7 kB) - 폼은 본질적으로 임시적이고 로컬로 상태관리하면 된.. 2022. 11. 13.

[Redux] useSelector useDispatch 훅 정의

useSelector() Redux store state에서 데이터를 추출할 수 있게 해준다. useSelector는 함수형 컴포넌트가 렌더링될 때마다 실행될거다. useSelector는 Redux store를 구독하고 있고, action이 dispatch될 때마다 useSelector가 실행될거다. 사용법 useDispatch 2022. 11. 11.

[리덕스] Redux-Toolkit 사용 API 정리

Redux-Toolkit? 아래의 요구사항을 해결하기위한 패키지이다. 리덕스의 불편사항을 어느정도 해결해준다. - 너무 많은 보일러플레이트 코드 - 복잡한 리덕스 store설정 - 다른 유용한 패키지를 추가하고 싶다 createAction() Redux의 action type을 정의하는 생성자 함수임. import { createAction } from '@reduxjs/toolkit' const increment = createAction('counter/increment') let action = increment(); // { type: 'counter/increment' } action = increment(3) // return { type: 'counter/increment', payload:.. 2022. 11. 10.

[사가]API 정리

createSagaMiddleware Redux middleware를 만든다. 그리고, Redux store에 사가를 연결한다. import createSagaMiddleware from 'redux-sage'; const sagaMiddleware = createSagaMiddleware(); export const store = configureStore({ reducer: {...}, middleware: [sagaMiddleware], devTools: true }) sagaMiddleware.run(rootSaga$); sagaMiddleware.run(generator 함수, ...사가에서 제공되는 인자) 사가를 동적으로 실행한다. applyMiddleware단게 후에만 run으로 사용할 수 .. 2022. 11. 8.

[Redux-saga]왜 그냥 제너레이터만 안 쓰고, 사가로 제너레이터 처리를 해야하는가?

2022. 11. 7.

[Typescript] <T>가 뭐니?

2022. 11. 6.

[Typescript] 타입가드란? 사용법

이해해보자 export interface ErrorResponse {} export const isErrorResponse = (x: unknown): x is ErrorResponse => { return (typeof x === 'string' || typeof x === 'object') && x !== null; }; 2022. 11. 6.

[Javascript] for문에서 let과 var의 동작 분석

개요 for문에서 i를 반복하면, i는 차례로 0,1,2,3,4가 된다. 그러면, for문 밖에서 i를 참조하면, 5가 출력될거다. 왜냐하면, var로 선언된 i는 전역 변수이기 때문이다. 👇 아래 코드처럼, for문이 전부 실행된 후에 setTimeout이 끝나서, 큐에서 콜스택으로 console.log(i) *5가 들어간다. 이미 반복문이 다 돌고난 후여서, var로 선언된 전역변수 i는 5이다. 그래서 아래처럼 전부 5가 응답되는 원리이다. 그래서 다시 원리를 알아보면, 호이스팅때문이다 ❌ -> 호이스팅 때문이 아니라, 스코프문제이다. 변수 선언 스코프문제임. var, let var는 함수 스코프임 let은 블록 스코프임 var는 함수 내부에 선언하면 밖에서 참조할 수 없다. var를 함수 외부에 .. 2022. 11. 3.