juni

라이브러리ToastifyReact-Toastify가 대표적입니다.빠르고 쉽게 알림을 추가할 수 있도록 설계된 라이브러리입니다.미리 정의된 스타일과 기능이 제공되기 때문에, 설정이 간편하고 바로 사용할 수 있습니다.다양한 기능을 제공: 자동 닫힘, 애니메이션, 위치 설정, 클릭 이벤트 등.ToastPrimitivesToastPrimitives는 이름 그대로 **Primitives(기본 구성 요소)**를 제공하는 라이브러리입니다.알림의 기본 기능을 위한 저수준 구성 요소를 제공하며, 스타일링이나 동작을 사용자 정의할 수 있도록 설계되었습니다.설정과 스타일을 직접 커스터마이징하고 싶은 경우에 더 유용합니다.기본 스타일이나 고정된 기능이 제공되지 않으므로, 완전한 자유도를 원할 때 사용합니다.ToastPrimi..

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가 적절한 시점(예: 컴포넌트가 다시 마운트되거나, 페이지 포커스가 바뀔 때)에 쿼리를..

flex-shrink-0: 이 속성은 flex 요소가 축소되지 않도록 방지하여, 부모 요소의 크기에 따라 이미지가 축소되는 문제를 방지합니다.object-cover: 이미지를 크기에 맞게 채우도록 합니다. 이 속성을 통해 이미지의 비율을 유지하면서 지정된 크기 안에 맞출 수 있습니다.

프로젝트 세팅 및 장점을 살리기위한 복습 후 적용 예정! 이전에 SSG를 구현하기 위해서는 예전 getStaticPaths 함수 같은 게 필요.Next.js 13 버전에서는 generateStaticParams 함수로 바뀌었다. 1. SSG (Static Site Generation)개념Static Site Generation은 빌드 타임에 페이지를 생성하여 정적 파일로 저장하는 방식입니다.페이지를 정적으로 생성하여 성능이 매우 우수합니다.언제 사용해야 하나요?변하지 않는 콘텐츠: 자주 변경되지 않는 콘텐츠 (예: 블로그 포스트, 문서 페이지 등).빠른 로드 속도가 중요한 경우: 빌드 타임에 생성된 HTML을 제공하므로 페이지 로드 속도가 매우 빠릅니다.사용법generateStaticParams를 사용하..

클라이언트 컴포넌트와 서버 컴포넌트라우팅에 상관 없는 기타 버튼 , 네비게이션 등과 같은 경우는 app폴더 바깥의 components 폴더로 관리서버 컴포넌트// src>app>page.tsxexport default function Home() {  console.log("여기는 어디일까요?");  return (    div className="p-8">      안녕하세요! 내배캠 리액트.. 아니아니 넥스트입니다!    /div>  );} alert는 서버 컴포넌트에서 사용 불가 os.hostname은 서버 컴포넌트에서(Node.js 런타임 환경) 사용이 가능// src>app>page.tsxexport default function Home() {  // console.log("여기는 어디일까요?..

React 및 Next.js에서의 라우팅 구현 방법기존의 React.js를 사용하여 웹 애플리케이션을 만들 때는 react-router-dom을 이용해서 라우팅을 가능이렇게 중요한 라우팅에 대한 근본적인 시각, 전략이 next.js 13버전을 기점으로 변경.변경 전 : pages 폴더에 원하는 페이지의 파일 이름을 둠 변경 후 : app 폴더 밑에 폴더명을 기반으로 자동 라우팅이 됨. 그래서 app router라고 보통 말을 하는 것 랜더링 기법원시적 방법 MPA : 페이지 이동 및 렌더링 시 깜빡거리는 현상 -> UX 저하획기적 방법 SPA (Single Page Application ) : 브라우저에서 JS를 이용해 동적으로 페이지를 렌더링 -> root라는 id를 가진 div만 다운로드 (JS로 U..