원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금) 📍소프트웨어 테스트란? 예전에는 개발자는 개발만 담당하고, 테스트는 별도의 테스트팀이 맡았으나, 최근에는 개발자가 자동화된 테스트를 이용해 소프트웨어 테스트까지 맡는 것이 보편화됨 ✅자동화된 테스트의 이점 1. 컴퓨터가 실행하므로 사람보다 빠름 2. 정해진 스크립트에 따라 일관성있게 동작하므로 human error를 줄일 수 있다 3. 개발중에 빠른 피드백을 받을 수 있다 (TDD) ⭐개발 생산성 향상 가능! 📍소프트웨어 테스트 종류 1. Unit Test (유닛 테스트) - 가장 low-level 테스트 - 가장 작은 범위를 테스트 - 개별 함수, 메서드, 클래스, 컴포넌트 등의 동작을 테스트 2. Integration Test..

📍Cypress 란? - JavaScript 테스팅 라이브러리 - 오픈소스 - E2E Test, Component Test 등이 가능 📍Cypress 설치 및 실행 - 참고 https://docs.cypress.io/guides/overview/why-cypress Why Cypress? | Cypress Documentation What you'll learn docs.cypress.io npm i -D cypress npx cypress open 이후 cypress Launchpad가 실행된다 공식 문서에 따르면, 뭘 골라야 할지 확실하지 않을 떄는 E2E Testing을 고르면 된다! - 언제든지 다시 변경할 수 있다 그리고 설정 창에서도 기본대로 continue를 클릭한다 그러면 브라우저를 고를 ..

📍TDD란? - Test Driven Development (TDD) : 테스트 주도 개발 - 켄트 백의 저서에서 처음 등장한 개념 - 테스트를 먼저 만들고, 테스트를 통과하기 위한 코드를 짜는 개발 방법 ⭐원하는 대로 동작하는지 빠르게 피드백을 받는 것 (더 자주, 더 빨리 피드백 받기) - 최소 기능이 동작하는 것을 확인하면 리팩토링 📍계산기 앱을 TDD로 구현하기 ✅필수 구현 기능 - 사칙연산 - 2개의 숫자를 다루는 계산기 ✅개발 과정 1. UI없이 사칙연산되는 프로그램만 만들기 - 일단 console.log 가 포함된 코드 작성 - 그 다음, 내부 로직을 완성(클래스를 구현하는 등) 2. input으로 사용자 입력 받고 이벤트 처리하기 3. 숫자 UI 추가하고 이벤트 처리하기 4. UI 레이아웃..

📍참고 https://redux-toolkit.js.org/rtk-query/usage/automated-refetching#definitions Automated Re-fetching | Redux Toolkit RTK Query > Usage > Automated Refetching: cache invalidation management redux-toolkit.js.org 📍Tags 정의 - re-fetching 목적으로 캐싱 및 무효화 동작을 제어하기 위해 특정 데이터 집합에 붙이는 이름 - 데이터가 mutation의 영향을 받을지 여부를 결정하기 위해 붙이는 label 개념 생성 시점 - createApi를 호출할 때 tagTypes 프로퍼티에 정의할 수 있다 - 예) createApi({ //..

📍store 객체를 확인해보고 싶을 때 1️⃣/store/index.ts 에서 마지막에 window.store = store 해서 전역에서 store에 접근할 수 있게 바인딩 2️⃣그리고 크롬 콘솔창에서 store.getState() 실행하면 store 객체 확인 가능 - queries - mutations 등 프로퍼티 존재 fetch 실행하는 컴포넌트 렌더링 후 store.getState() 실행하면 query 이름과 데이터 자세히 확인 가능 📍이는 Redux Devtools 로도 확인 가능!!

📍참고 https://redux-toolkit.js.org/tutorials/rtk-query/#advanced-example RTK Query | Redux Toolkit redux-toolkit.js.org 📍개요 RTK Query는 같은 쿼리를 subscribe하는 모든 컴포넌트가 항상 동일한(최신화된) 데이터를 가질 수 있도록 보장한다. 또한, HTTP 요청을 자동으로 중복 제거(de-dupes)하므로, 성능 최적화를 위해 진행중인 요청을 확인하거나 할 필요가 없다. 즉, 앱에서 다른 컴포넌트들이 동일한 쿼리로 컴포넌트의 state를 fetch해도, HTTP 요청은 1번만 발생한다.