본문 바로가기

분류 전체보기369

[AWS] EC2로 클래식 콘솔 시작하기

https://docs.aws.amazon.com/ko_kr/AmazonECS/latest/developerguide/getting-started-ecs-ec2.html Amazon EC2를 사용하여 클래식 콘솔 시작하기 - Amazon Elastic Container Service Amazon EC2를 사용하여 클래식 콘솔 시작하기 Amazon Elastic Container Service(Amazon ECS)는 컨테이너를 손쉽게 시작 및 관리할 수 있게 하는 컨테이너 관리 서비스로서 속도와 확장성이 뛰어납니다. Amazon ECS docs.aws.amazon.com 2022. 11. 18.

[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.

티스토리툴바