웹 개발 (6) 썸네일형 리스트형 [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 .. "vite-tsconfig-paths" resolved to an ESM file. ESM file cannot be loaded by `require`. See https://vite.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps] 이 오류는 vite-tsconfig-paths 패키지가 ESM(ECMAScript Module) 형식으로 작성되어 있으며, CommonJS 형식의 require로 로드할 수 없다는 것을 나타냅니다. 해결방법 1. ESM(ECMAScript Module) 로 구성되어 있는지 확인import 문을 쓰고 있으므로 ✔ 2. Node.js 버전이 ESM을 지원하는지 Node.js 12 이상이므로 ✔ 3. package.json 파일에 "type": "module" 로 ESM 설정이 되어있는지여기서 빠져 있었다😡 앞으로 테스트 도구를 사용할 때는 기본 package.json 설정에 꼭 "type": "module", 을 추가해야겠다...😂vitest ui 보기 성공 ㅠ [Next.js] react 와는 다른 이미지 import 방법 설명과 Image 컴포넌트 활용하기 Next.js에서 import로 이미지를 가져올 때, 해당 이미지는 객체 형태로 임포트됩니다. 이 객체는 다음과 같은 속성들을 포함합니다 src: 실제 이미지 경로height: 이미지 높이width: 이미지 너비기타 메타데이터그러므로 src={logo.src} 로 접근해야 하며,react 에서 사용했던 것 처럼 src={logo} 이런 식으로 작성할 경우 이미지 바인딩이 불가능하게 됩니다. import Link from "next/link";import logo from "@/assets/logo.png";export default function MainHeader() { return ( );} 더 나은 방법으로는 Image 컴포넌트를 사용하는 .. [TanStack Query / React Query] staleTime과 gcTime 이해하기: 데이터 캐싱 1. stale data 데이터의 사용 기간이 지났고, 다시 가져올 준비가(refetch) 되 있는 상태입니다여전히 데이터는 캐시 안에 있습니다데이터를 다시 검증해야 한다는 뜻데이터 새로 고침(refetch) 은 오래된 데이터( stale data )에 대해서만 트리거됩니다자동으로 데이터 새로 고침을 하는 트리거는 컴포넌트 remount 나 브라우져 창의 refocus가 있습니다staleTime 은 데이터의 최대 수명이라고 생각하면 됩니다그러므로 데이터 새로고침 기능을 컨트롤하고 싶다면 이와 관련된 useQuery 의 옵션 중 하나인 staleTime 을조절하면 됩니다(staleTime 이 2초 (2000 ms) 라면 2초 동안에는 데이터 새로 고침이 되지 않습니다 staleTime 은 default 로.. [javascript] FormData form 태그 안의 복수의 input 창 입력값을 한번에 추출하기 1. FormData 란? FormData는 HTML 폼의 데이터를 쉽게 구성하고 전송할 수 있게 해주는 웹 API입니다. 2. 장점 파일 업로드를 포함한 폼 데이터를 쉽게 처리멀티파트/폼데이터 형식으로 자동 인코딩체크박스나 다중 선택과 같은 복수 값 처리가 용이 예시코드 Email Password Confirm Password First Name Last Name .. [javascript] 내 위치의 경도, 위도 정보 알아보기 (navigator.geolocation.getCurrentPosition) 웹 브라우저에서 제공하는 위치 정보 메소드 중 아래의 메소드를 사용하면 됩니다.navigator.geolocation.getCurrentPosition(success, error, options) GeolocationPosition의 coords 속성 상세 설명`coords` 객체는 사용자의 지리적 위치에 대한 상세 정보를 제공합니다. 주요 속성은 다음과 같습니다:1. `accuracy`: 35937.106310649929 - 위도와 경도 값의 정확도를 미터 단위로 나타냅니다. - 이 경우 약 35.9km의 오차 범위를 가집니다.2. `altitude`: null - 해수면 기준 고도를 미터 단위로 나타냅니다.3. `altitudeAccuracy`: null - 고도 값의 정확도를 미.. 이전 1 다음
