eatthefrog

비동기 처리를 위한 Promise + then 방식과 async + await 방식의 차이점Promise + then: 비동기 작업의 결과를 기다린 후 .then() 콜백 함수를 통해 다음 작업을 이어가는 방식으로, 작업이 많아지면 코드가 길어지고 복잡해질 수 있습니다.async + await: await 키워드를 사용해 비동기 작업이 완료될 때까지 실행을 일시 정지시킴으로써, 비동기 코드를 마치 동기적인 코드(순차적 코드)처럼 읽기 쉽게 작성해 줍니다.에러 처리: Promise는 .catch()로 에러를 잡지만, async/await는 일반적인 try-catch 문을 그대로 사용할 수 있어 에러 관리가 더 직관적이고 편리합니다. 구분Promise + thenasync + await가독성체이닝이 길어지..

문제 상황npm start 이후, Node.js 애플리케이션에서 MongoDB에 연결할 때 다음과 같은 경고 메시지가 나타났다.[MONGODB DRIVER] Warning: useNewUrlParser is a deprecated option:useNewUrlParser has no effect since Node.js Driver version 4.0.0 and will be removed in the next major version[MONGODB DRIVER] Warning: useUnifiedTopology is a deprecated option:useUnifiedTopology has no effect since Node.js Driver version 4.0.0 and will be remo..

1. 전체 흐름 요약1) vite.config.ts 로드2) setup.ts 실행3) 테스트 파일 로드 + Mock 적용4) beforeEach 실행5) 개별 테스트(it) 실행6) afterEach → cleanup2. 설정 단계 – vite.config.tstest: { globals: true, environment: 'jsdom', setupFiles: './src/test/setup.ts',}역할JSDOM 환경 제공전역 테스트 API 활성화테스트 실행 전에 setup 파일 실행3. Setup 단계 — src/test/setup.tsimport '@testing-library/jest-dom';import { cleanup } from '@testing-library/react';afterE..

1단계 : 환경설정1. 패키지 설치하기yarn add -D vitest //테스트 프레임워크yarn add -D @testing-library/react // React 컴포넌트와 Hooks 테스트yarn add -D @testing-library/jest-dom // DOM 관련 어설션 확장yarn add -D @testing-library/user-event //사용자 상호작용 시뮬레이션yarn add -D jsdom //Node.js 환경에서 브라우저 DOM 시뮬레이션테스트 패키지 설명1. vitest : 테스트 실행 엔진import { describe, it, expect } from 'vitest';// descibe : 테스트 그룹 ( { } 안에 관련 테스트를 묶는 컨테이너 )// i..

1. 역할의 차이- Jest/ Vitest (Test Runner) : 테스트를 실행주는 환경이다. 테스트 파일을 찾고, 실행하고, 성공/실패 여부를 알려준다.- RTL (Tesing Utility) : 리액트 컴포넌트를 조작하는 도구다. 버튼을 클릭하거나, 화면에 글자가 있는지 확인하는 기느을 제공한다. 2. Test Runner 비교: Jest VS VitestJest 특징: Meta(페이스북)에서 만들었으며, 오랫동안 리액트 생태계의 표준이었습니다. 'Create React App'의 기본 설정이기도 했습니다.장점: 레퍼런스가 방대하고 안정적입니다. 거의 모든 상황에 대한 문서가 존재합니다.단점: 설정이 다소 복잡할 수 있으며, 최신 빌드 도구인 Vite와 함께 쓸 때 속도가 느리고 설정 충돌이 날..

1. Vitest + @testing-library/react-hooks (renderHook)장점Vite 프로젝트와 통합 용이빠른 실행 속도 (ESM 네이티브)설정 최소화TypeScript 지원 우수renderHook으로 hooks 격리 테스트 가능모킹 API가 Jest와 유사단점생태계가 Jest보다 작음일부 Jest 플러그인 미지원 가능 2. Jest + @testing-library/react-hooks장점넓은 생태계와 문서많은 플러그인/예제팀 내 익숙함 가능성단점Vite와 설정 복잡도 증가ESM 변환 오버헤드실행 속도가 Vitest보다 느릴 수 있음Vite 프로젝트에서 설정 비용3. React Testing Library (최신 버전의 renderHook)장점별도 패키지 불필요 (RTL 내장)컴포..

Manual Testing : Error-prone: It’s hard to test all posiible combiniations and scenariosAutomated Testing: Very techinincal but allows you to test ALL building blocks at once 유닛 테스트: The most common / important kind of testTest the inidivisual building blocks (funtions, components) in isolationProjects typically contain doaens or hundereds of unit testes통합 테스트: Also imporant, but focus on unit t..