본문 바로가기

Dot24

React에서 Cypress로 테스트하기 바닐라 자바스크립트에서 cypress를 통해 테스트를 진행한 경험은 있지만, react에서는 아직 적용해보지 못했다. 이번 프로젝트에서 테스팅 도구로 cypress를 적용했는데, 초기 설정부터 stub response(mock)를 활용한 간단한 network request까지 알아보겠다. 1. Cypress 패키지 추가 및 초기 환경 설정 2. Stub Response를 활용한 간단한 Network Request 예제 1. Cypress 패키지 추가 및 초기 환경 설정 먼저 관련 패키지들을 추가한다. // shell yarn add -D cypress eslint-plugin-cypress cypress-react-selector eslint-plugin-cypress: cypress 테스트 파일 내에서.. 2021. 7. 28.
[UX] 사례 배민상회 모바일 웹 멜론 모바일 앱 2021. 4. 14.
[우아한테크코스] 코드 리뷰 과정 코드 리뷰 1. 미션 시작하기 버튼을 누르면, 미션 원본 저장소에 본인 깃허브 아이디의 브랜치가 생성된다. 2. 원본 저장소(woowacourse/javascript-lotto)에서 Fork를 눌러 미션을 자신의 계정으로 복사해온다. Fork - github repository를 그대로 복사하는 기능 3. 자신의 remote 저장소(github - jum0/javascript-lotto)에서, 특정 브랜치(jum0)를 local 저장소(내 컴퓨터)로 가져온다. git clone -b {본인_아이디} --single-branch {본인의_저장소_url} ex) git clone -b jum0 --single-branch https://github.com/jum0/javas.. 2021. 2. 28.
순수 함수 / 비순수 함수 순수 함수 동일한 인수가 전달되면 언제나 동일한 값을 반환하는 함수(=외부 상태에 의존하지 않는 함수) 특징 외부 상태에 의존하지 않고, 오직 매개변수를 통해 함수 내부로 전달된 인수에만 의존해 반환 값을 만든다 함수 외부 상태를 변경하지 않는다 let cnt = 0; // 순수 함수 - increase는 동일한 인수가 전달되면 언제나 동일한 값을 반환 function increase(n) { return ++n; } cnt = increase(cnt); console.log(cnt); // 1 cnt = increase(cnt); console.log(cnt) // 2 비순수 함수 함수의 외부 상태에 따라 반환 값이 달라지는 함수(=외부 상태에 의존하는 함수) 특징 함수 외부 상태에 의존하거나 외부 상.. 2021. 2. 23.