Develop Note by J.S.

1. TDD TDD (Test Drive Development)는 테스트 주도 개발이라고 합니다. 테스트를 먼저 작성하고 테스트의 패스여부를 기준으로 개발을 진행하는 것입니다. 테스트가 모두 통과 될 때까지 테스트 -> 코드 작성 -> 테스트를 반복합니다. TDD는 초기에 테스트 코드를 작성해야하는 초기투자시간이 필요한 단점이 있지만, 코드의 품질 향상 및 장기적인 측면에서 개발과 테스트를 동시에 함으로 써 오류를 조기에 잡아내어 궁극적으로는 개발속도가 향상 될 수 있습니다. 2. BDD BDD (Behavior Driven Development)는 행동 주도 개발이라고 합니다. 사용자의 행위에 기준을 두고 테스트하며 개발을 진행하는 것입니다. BDD는 TDD의 한 종류로 볼 수 있는데, TDD에서 사용..

Cypress에 MSW(Mock Service Worker) 를 적용하여 테스트 하는 환경 세팅 방법입니다 . cypress/support/e2e.ts (or index.ts : cypress 버전에 따라 다름)에서 기존에 mockup api를 정의한 /src 디렉토리 내 mocking 파일을 불러와 Worker를 시작합니다. 1. e2e.ts import './commands'; import { setupWorker } from 'msw'; import authMocking from '@/services/mocking/auth.mocking'; // 경로문제발생! export const mocking = setupWorker(...authMocking); before(() => { // MSW 워커를 ..

프론트엔드 개발자가 가장 많이 번거롭다고 느끼는 부분은 개발 과정에서의 테스트라고 생각합니다. 사용자의 액션이 너무 다양하고 예측 불가능한 상황이 발생되기에 언제든 예외상황이 발생 할 수 있기 때문에 다양한 테스트 케이스를 수행할 필요합니다. 또한 중복코드의 리팩토링으로 인하여 모듈화 된 코드의 수정 사항 발생 시 해당 모듈을 사용하고 있는 전체 코드의 테스트가 필요해집니다. 이때 사용자 입장에서 개발된 서비스를 테스트 하는 것을 E2E(end to end) Test 라고 합니다. 소개 드릴 Cypress는 WEb Testing Tools이며, Vite + Vue3 개발에 적용하여 소개 드리고자 합니다. 1. Vite로 Cypress 설치 $npm init vue@latest vite 초기화 시 Add ..

MSW(Mock Service Worker) Service Worker의 네트워크 Proxy 기능을 활용하여 API 테스트를 위한 API 모킹(Mocking) 라이브러리 입니다. Front-end 개발 시 Back-end 개발 완료까지 기다리지 않고 API 명세서만 있다면 가상의 API 응답을 구성하여 Front-end 개발 및 API 테스트와 Back-end 개발을 동시에 진행하여 프로젝트 개발 소요 시간을 단축 시킬 수 있게 도와줍니다. MSW 라이브러리 설치 npm install -D msw 1. Service Worker 구성 먼저 제 게시글 중 Service Worker 구성에 대한 게시글을 꼭 먼저 보신 후 진행해주세요 이후 registerServiceWorker.ts에서 아래와 같은 코드를 ..