juni

Jest / vitest 기반 유닛 테스트 코드 작성 및 테스트참고 사이트https://velog.io/@thdrldud369/Vite-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-jest-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0 Vite 프로젝트에 Jest 추가하기Vite로 만들어진 React 프로젝트에 Jest를 추가하는 방법에 대한 설명velog.io 하지만 jset를 사용하려는데 에러가 발생했습니다.Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\sangj\OneDrive\바탕 화면\sparta\onboarding\node_modules\strip-ansi\index.js from..

NextAuth.js 사용하기NextAuth.js는 Next.js에서 인증과 세션 관리를 쉽게 할 수 있는 라이브러리입니다. OAuth, 이메일 인증, 자격 증명 기반 인증 등 다양한 인증 방식을 지원합니다. NextAuth.js를 사용하면 세션 관리를 간단하게 할 수 있어요. npm install next-auth 설정 (pages/api/auth/[...nextauth].js):import NextAuth from "next-auth";import Providers from "next-auth/providers";export default NextAuth({ providers: [ Providers.GitHub({ clientId: process.env.GITHUB_CLIENT_ID,..

1. refetch:즉시 데이터를 다시 가져옵니다: refetch는 호출된 즉시 쿼리를 다시 실행하여 데이터를 갱신합니다.사용자 상호작용에 적합: 특정 이벤트(예: 버튼 클릭, 사용자 액션) 후 데이터를 즉시 갱신해야 할 때 적합합니다.단일 호출: 해당 컴포넌트에서 refetch()를 호출하면, 쿼리의 데이터를 한 번만 갱신합니다.적합한 경우:데이터가 특정 사용자 액션 이후 즉시 새로 고쳐져야 하는 경우.예를 들어, 사용자가 버튼을 눌러 직접 데이터를 다시 가져오게 하는 상황.2. invalidateQueries:쿼리를 무효화하고 필요할 때 다시 실행: 쿼리가 "더 이상 유효하지 않다"고 표시되며, react-query가 적절한 시점(예: 컴포넌트가 다시 마운트되거나, 페이지 포커스가 바뀔 때)에 쿼리를..

세팅 목표Vite + Typescript 기반 프로젝트 설치zustand, tanstack query, tailwind css(또는 styled-components), react-router-dom 세팅환경변수 세팅 및 폴더구조 구성하기json placeholder를 이용하여 외부 통신 테스트 하기JWT 기술분석 : access, refresh token의 개념과 관리전략 blog 작성회원가입, 로그인, 마이페이지 페이지 컴포넌트 구현필수기능 : 회원가입, 로그인, 프로필 변경tailwind 또는 styled-components를 이용한 스타일링JWT 인증서버를 활용하여 access token 기반 페이지 권한 처리(라우팅 제어) vite를 ts로 설정yarn create vite . --template..