bkdragon's log

테스트를 연습하기 위해 간단한 todo app을 react + typescript + jest + redux를 사용해서 만들어보았다. 직접 해본 결과 redux test 과정은 크게 두가지이다. reducer 테스트 action 객체 생성 테스트 (dispatch 테스트) 이 두가지 테스트를 통해 redux의 기능이 정상 작동하는 것을 브라우저를 사용해 직접 테스트하지 않아도 알 수 있다. reducer 테스트 store/_reducer/todo.ts reducer를 이렇게 작성했다. const TodoSlice = createSlice({ name: 'todo', initialState: [] as StateProps, reducers: { addTodo: (state: StateProps, actio..

CORS를 정복해보자. SOP 동일 출처 정책 Same Origin Policy 동일한 출처에서만 리소스를 공유할 있게 하는 정책이다. 동일한 출처의 기준은 Protocol, Host, Port가 같을 때이다. 출처에 대한 비교와 차단은 브라우저의 기능이다. CORS 교차 출처 리소스 공유 Cross-Origin Resource Sharing 다른 출처의 리소스 공유에 대한 허용/비허용 정책이다. 허용하는 간략한 과정은 다음과 같다. 클라이언트에서 요청을 보낼 때 헤더에 Origin을 보낸다. 요청을 받은 서버는 응답 헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 보낸다. 클라이언트에서 Origin과 서버가 보내준 ACAO를 비교하고 유효할 경우에만 리소스를 받아온다. 깊게..

병렬 처리 Promise를 병렬로 처리하는 법을 알아보자. Promise.all 을 사용하면 2개 이상의 Promise를 병렬로 처리할 수 있다. 아래는 Promise를 반환하는 함수 4개이다. 마지막 함수만 reject를 반환한다. const f1 = () => { return new Promise((res, _) => { setTimeout(() => { res('1번 완료'); }, 1000); }); }; const f2 = () => { return new Promise((res, _) => { setTimeout(() => { res('2번 완료'); }, 2000); }); }; const f3 = () => { return new Promise((res, _) => { setTimeout(..

Redux Toolkit Redux를 편하게 사용할 수 있는 도구이다. Redux의 보일러 플레이트 코드를 줄이고 immer, reselect, redux-thunk 등의 부가 라이브러리를 통해 편의성을 증가시켰다. 우선 얼마나 코드가 줄어드는지 확인 해보자. 기존 코드 oldCounter.ts // 액션 타입에 들어갈 값 const INCREASE = 'counter/INCREASE' as const; const DECREASE = 'counter/DECREASE' as const; const INCREASE_BY = 'counter/INCREASE_BY' as const; // 액션 생성 함수 export const increase = () => ({ type: INCREASE, }); export ..

Cookie란? 쿠키는 특정 웹사이트를 방문했을 때 그 웹 사이트가 사용하는 서버를 통해 로컬(브라우저)에 저장되는 작은 데이터이다. Cookie가 필요한 이유? 맛있으니까 HTTP 통신은 무상태성이라는 특성을 가지고 있다. 풀어서 설명하면 통신간의 상태 정보를 저장하지 않는다. 이로 인해 서버의 자원은 많이 절약되지만 매 요청마다 새로운 사용자로 인식하기 때문에 계속 로그인을 해야하거나 장바구니에 담긴 상품이 사라지는 등의 부작용이 생길 수 있다. cookie는 이러한 부작용을 해결할 수 있다. Cookie가 저장되는 과정 클라이언트가 서버에 어떠한 요청을 하게 되면 서버는 쿠키를 생성하고 생성한 쿠키를 응답 헤더에 넣어서 보낸다. 응답을 받은 후 로컬(브라우저)에 쿠키를 저장한다. 사용자 인증이나 검..

async 함수에서 await 키워드를 만나면 await가 붙은 함수를 일단 실행 시킨다. 이 함수는 Promise를 반환하는 비동기 함수 일 것이다. 해당 함수의 프로미스가 이행되면 await의 위치에서 async 함수의 동작을 중지하고 마이크로 태스크 큐로 이동한다. 콜 스택에 남은 동작을 실행한다.(없을 수 있다.) 콜 스택이 비면 이벤트 루프에 의해 마이크로 태스크 큐의 async 함수가 멈춘 지점을 기억한 채로 돌아온 다음 await 이후로 다시 실행 된다. 코드를 보며 동작을 확인 해보자. async function f() { console.log(1); let promise = new Promise((resolve, reject) => { console.log(1.5); setTimeout(..

Flux는 사용자 입력을 기반으로 Action이 생성되고 Dispatcher 이를 받아와 해석한 후 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름으로 애플리케이션을 만드는 아키텍처이다. 단방향으로 데이터 흐름을 일관성 있게 관리함으로 예측가능성을 높힌다. Flux 는 세 가지 핵심 원칙을 기반으로 한다. 단방향 데이터 흐름 : Flux 애플리케이션의 데이터는 action, dispatcher, store, view로 한방향으로 흐른다. 이로 인해 데이터의 흐름을 체계적으로 유지하고 애플리케이션의 상태를 더 쉽게 추론할 수 있다. 중앙 집중식 제어 : 애플리케이션 상태의 제어는 dispatcher에서 중앙 집중식으로 이루어진다. dispatcher는 view에서 작업을 수신..

MSW는 서비스 워커(Service Worker)를 사용하여 네트워크 호출을 가로채는 API 모킹(mocking) 라이브러리이다. 백엔드 api가 만들어지기 전에 mock 데이터를 이용해 통합 테스트를 해 볼 수 있다. 브라우저 환경 노드환경 모두 사용할 수 있다. 서비스 워커 서비스 워커는 웹 응용 프로그램, 브라우저, 그리고 (사용 가능한 경우) 네트워크 사이의 프록시 서버 역할한다. 서비스 워커의 개발 의도는 여러가지가 있지만, 그 중에서도 효과적인 오프라인 경험을 생성하고, 네트워크 요청을 가로채서 네트워크 사용 가능 여부에 따라 적절한 행동을 취하고, 서버의 자산을 업데이트할 수 있다. 또한 푸시 알림과 백그라운드 동기화 API로의 접근도 제공한다. 설치 및 세팅 설치 npm install ms..

단위테스트는 하나의 모듈을 기준으로 독립적으로 진행되는 가장 작은 단위의 테스트를 말한다. 프론트엔드에선 하나의 컴포넌트를 테스트 하는 것으로 봐도 된다. 컴포넌트의 원하는 요소가 렌더링 되었는지 사용자 상호작용에 알맞게 반응하는 지 등을 테스트 하면 된다. 단위 테스트에서 실제 기능까지 테스트할 필요는 없다. BDD는 프론트의 단위 테스트(및 통합 테스트)에 사용하기 좋은 패턴이다. Behavior Driven Development, 행동(시나리오) 주도 개발을 뜻한다. TDD를 기반으로 두며, 시나리오 기반으로 테스트 코드를 작성하며 함수 단위 테스트를 권장하지 않는다. 시나리오는 개발자가 아닌 사람이 봐도 이해할 수 있을 정도의 레벨을 권장한다. BDD는 Describe - Context - It ..

프론트엔드 테스트 코드를 작성할 때 Jest와 React-testing-library (이하 RTL)을 사용한다. RTL RTL은 CRA로 설치하면 기본적으로 설치되어있다. RTL을 사용하면 사용자가 컴포넌트를 사용하는 것처럼 테스트를 작성할 수 있다. 컴포넌트를 렌더링하고 쿼리를 이용해 원하는 요소를 찾고 클릭 등의 상호작용을 제어 할 수 있다. 간단한 예시를 살펴보자. import {render, screen} from '@testing-library/react' import userEvent from '@testing-library/user-event' import '@testing-library/jest-dom' import Fetch from './fetch' test('loads and dis..