Typescript (11) 썸네일형 리스트형 [vitest] beforeEach와 beforeAll의 차이점 - 실수하기 쉬운 환경변수 테스트 예제 1. beforeAll 실행 시점: 해당 describe 블록 내의 모든 테스트가 실행되기 전에 딱 한 번만 실행용도모든 테스트에서 공통으로 사용할 리소스를 한 번만 설정할 때 데이터베이스 연결과 같이 비용이 많이 드는 설정변경되지 않는 상수나 설정값 초기화describe('Database Tests', () => { let connection; beforeAll(async () => { // DB 연결은 한 번만 수행 connection = await Database.connect(); }); it('test 1', () => { /* ... */ }); it('test 2', () => { /* ... */ });}); 2. beforeAll 실행 시점: 각각의 테스트 케이스가 실.. [vitest] 테스트 코드 작성 시 검증(Assertion) 전략 비교 - 엄격한 비교 vs 유연한 비교 1. 들어가며테스트 코드 작성 시 검증(Assertion)은 코드의 예상대로 작동하는지 확인하는 핵심 과정입니다. 효과적인 테스트는 꼼꼼한 검증에서 비롯되며, 다양한 상황에 맞춰 적절한 검증 방식을 선택하는 것이 중요합니다. 때로는 엄격한 비교가 필요하고, 때로는 유연한 비교가 더 적합할 수 있습니다. 이 글에서는 Vitest를 사용하여 테스트 코드를 작성할 때, 엄격한 비교와 유연한 비교라는 두 가지 주요 검증 전략을 비교 분석하고, 각각의 장단점과 사용 시점을 제시하여 상황에 맞는 최적의 검증 전략을 선택하는 방법에 대해 알아보겠습니다.2. 두 가지 검증 전략 비교2.1 엄격한 비교 (Strict Comparison)엄격한 비교는 예상 결과와 실제 결과가 정확히 일치하는지 확인하는 방법입니다. Vit.. [TypeScript] 유틸리티 타입 - ReturnType 가이드 TypeScript를 사용하다 보면 함수의 반환 타입을 활용해야 할 때가 많습니다. 이럴 때마다 매번 타입을 정의하는 것은 번거롭고, 코드 유지보수에도 좋지 않죠. TypeScript의 내장 유틸리티 타입인 ReturnType을 사용하면 이러한 문제를 깔끔하게 해결할 수 있습니다. 1. ReturnType이란 무엇일까요?ReturnType은 함수의 반환 타입을 추론하여 새로운 타입을 생성해주는 유틸리티 타입입니다. 쉽게 말해, "이 함수의 반환 타입이 뭐지?"라는 질문에 대한 답을 자동으로 찾아주는 똑똑한 친구라고 생각하시면 됩니다. 2. ReturnType의 정의ReturnType은 다음과 같이 정의되어 있습니다.type ReturnType any> = T extends (...args: any) =>.. [vitest] Framer Motion 컴포넌트 테스트 구현하기 - Vitest와 Proxy 패턴 활용 ( feat. react ) Framer motion ( 요즘은 motion 이란 이름으로 더 알려져 있는) 라이브러리를 사용해서 화면 애니메이션을 구현하다보니...테스트 시에 어찌해야할 지 감이 오지 않았습니다. 하지만 생각해보니 단위 테스트는 비즈니스 로직과 핵심 기능을 검증하는 것이 목적 이므로 할 필요가 없다는 결론에 도달했습니다😅😅😅 그렇지만 proxy 패턴을 써보았다는 거에 의의를 두고... 아래 내용은 남겨두도록 하겠습니다 다른 분께서 포스팅해놓은 글에서 힌트를 얻어 다행히 Framer motion 테스트를 할 수 있게 되었습니다😂https://dev.to/tmikeschu/mocking-framer-motion-v4-19go Mocking framer-motion v4Testing Library has ch.. [Next.js] Next.js 15의 새로운 Form 컴포넌트 가이드 기존 form 과의 주요 차이점 로딩 UI의 프리페칭 가능 ( 화면 미리 불러오기 )form 제출 시 부드럽게 페이지 전환 (깜빡임 없음) : 클라이언트 사이드 네비게이션preventDefault() 기본 수행쿼리 파라미터 를 name 속성에 맞춰 자동으로 붙여줌 기본 작성법import Form from 'next/form'function SearchForm() { return ( 검색 )} input name='query' 은 자동으로 쿼리 파라미터를 붙이는 기능입니다.url이 이렇게 됩니다 ......./search?query='인풋에서 쓴 내용' 컴포넌트의 동작은 액션 프로퍼티가 문자열인지 함수인지에 따라 달라집니다. 1. 액션이 문자열인 경우 은 .. [Next.js] redirect 함수, notFound 함수는 try/catch 밖에서 사용해야 합니다 1. Next.js의 redirect 함수는 특별한 타입의 에러(NEXT_REDIRECT)를 throw하는 방식으로 작동합니다. 2. try/catch 블록 안에서 redirect를 사용하면 redirect가 던진 에러가 catch 블록에서 잡혀버리고redirect 는 동작하지 않게 됩니다. 3. 클라이언트 컴포넌트의 경우, useRouter를 사용하는 것이 더 적절할 수 있음 4. 추가로 notFound() 함수도 아래와 마찬가지 패턴으로 처리해야 합니다. import { redirect } from 'next/navigation';// ... 생략 ... let isRedirect = false; try {// ... 생략 ... isRedirect = true; } catch (err.. [Next.js] Next.js의 환경 변수 파일 우선순위와 용도 1. 환경변수 로드 순서 : 우선순위 (높음 -> 낮음)시스템 환경 변수 .env.$(NODE_ENV).local .env.local (.env.test.local 제외) .env.$(NODE_ENV) .env $(NODE_ENV)는npm run devnpm run build / npm run startnpm test 에 따라 자동으로 할당되는 값이며 일반적으로 development, production, test 세가지 값을 가질 수 있습니다. 그래서 # 개발 환경에서 실행 시 우선순위1. .env.development.local2. .env.local3. .env.development4. .env# 프로덕션 환경에서 실행 시 우선순위1. .env.production.local2. .env.local3.. [Next.js] layout.js 와 templete.js 의 차이점 1. Layout.js공유 UI를 여러 페이지에서 재사용페이지 전환시 리렌더링되지 않음한번 마운트된 후 계속 유지되는 특성상태가 유지됨헤더, 네비게이션 바와 같은 지속적으로 유지되어야 하는 UI 요소에 사용리렌더링되지 않아 성능상 이점2. Templete.js매 페이지 전환시 새로운 인스턴스 생성상태가 유지되지 않음 (not preserved)매번 새로 마운트됨페이지 뷰 추적 , 페이지 전환 애니메이션, 입력 값 초기화가 필요한 경우에 사용컴포넌트 격리가 필요할 때도 사용템플릿은 매번 새로 마운트되어 메모리 관리 필요 // Layout.tsx'use client'export default function Layout({ children }) { console.log('Layout 마운트됨!') // 최.. 이전 1 2 다음
