React (34) 썸네일형 리스트형 [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.. [motion] React에서 useScroll 훅 가이드 - 옵션과 사용법 정리 useSpring은 스프링 애니메이션을 구현하는 데 사용되는 훅입니다. 이 훅은 값을 변경할 때 자연스러운 스프링 물리 효과를 적용하여 부드러운 애니메이션을 제공합니다. useSpring의 사용 방법과 설정 옵션을 공식 문서를 바탕으로 정리해 보겠습니다.사용 방법1. 직접적인 값 설정useSpring을 초기 값과 함께 사용하여 스프링 애니메이션을 생성할 수 있습니다.예: const x = useSpring(0)와 같이 초기 값을 설정하고, x.set(100)으로 값을 변경하면 스프링 애니메이션으로 100으로 전환됩니다.즉시 값을 변경하고 싶다면 x.jump(100)을 사용할 수 있습니다.2. 다른 모션 값 추적다른 모션 값을 전달하여 그 값이 변경될 때마다 스프링 애니메이션을 적용할 수 있습니다.예: c.. [Tailwind] tailwind의 필수 라이브러리 clsx, tailwind-merge, cva, Headwind Tailwind CSS와 함께 tailwind-merge, cva (Class Variance Authority), clsx를 조합하여 사용하는 방식은각각의 라이브러리가 제공하는 기능을 결합하여 효율적인 UI 컴포넌트 관리를 가능하게 합니다. 1. clsx기능: 조건부로 className을 처리하는 데 사용됩니다. 객체나 배열을 통해 조건에 따라 클래스를 추가하거나 제거할 수 있습니다예시import clsx from 'clsx';// orimport { clsx } from 'clsx';// Strings (variadic)clsx('foo', true && 'bar', 'baz');//=> 'foo bar baz'// Objectsclsx({ foo:true, bar:false, baz:isTrue(.. [번역] 프로젝트를 강화할 수 있는 17개 React 라이브러리 Let's Code Future 님의 25.01.20일자 포스트 의 번역글입니다 https://medium.com/@letscodefuture/top-16-modern-react-libraries-to-supercharge-your-next-big-project-78e912e95014 Top 16+ Modern React Libraries To Supercharge Your Next Big ProjectReact continues to dominate the front-end world, with its ecosystem growing stronger each year. To help you build modern and efficient…medium.com React는 매년 더 강력해지는 에코시스템과.. [Medium 번역글] 시니어 개발자가 되기 위한 18가지 React 기술 보호되어 있는 글입니다. [medium 번역글] Next.js 서버 액션을 사용한 1년: 배운 교훈 보호되어 있는 글입니다. [Next.js] svgr/webpack과 vitest를 사용한 SVG 테스트 ( vitest 에서 svg 경로를 못 읽는 이슈 ) 왜 이러는 지 한참을 삽질하다 이렇게 직접 tsx안에 적어주니 통과를 합니다...???? 이 때 깨달았습니다.@svgr/webpack 사용하면 vitest 에서 svg 경로 오류가 생기는구나 하고.... 아예 랜더링에서 막히고 있습니다... 랜더링을 못하니 아예 해당 Hear 컴포넌트 전체를 테스트 할 수가 없어졌는데요모킹으로 넘겨서 테스트 랜터링을 넘겨야겠다고 판단했습니다. 1. vite-plugin-svgr 설치npm install vite-plugin-svgr --save-dev 2. vitest.config.ts 에 vite-plugin-svg 추가// vitest.config.tsimport { defineConfig } from 'vitest/config'import react from .. [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.. 이전 1 2 3 4 5 다음
