Next.js / React 라이브러리 ( Toastify, ToastPrimitives, Lucide-React, next-themes, DialogPrimitive, zod, useForm, cookies-next )

라이브러리

Toastify

• React-Toastify가 대표적입니다.
• 빠르고 쉽게 알림을 추가할 수 있도록 설계된 라이브러리입니다.
• 미리 정의된 스타일과 기능이 제공되기 때문에, 설정이 간편하고 바로 사용할 수 있습니다.
• 다양한 기능을 제공: 자동 닫힘, 애니메이션, 위치 설정, 클릭 이벤트 등.

ToastPrimitives

• ToastPrimitives는 이름 그대로 **Primitives(기본 구성 요소)**를 제공하는 라이브러리입니다.
• 알림의 기본 기능을 위한 저수준 구성 요소를 제공하며, 스타일링이나 동작을 사용자 정의할 수 있도록 설계되었습니다.
• 설정과 스타일을 직접 커스터마이징하고 싶은 경우에 더 유용합니다.
• 기본 스타일이나 고정된 기능이 제공되지 않으므로, 완전한 자유도를 원할 때 사용합니다.

ToastPrimitives의 장점은, 프레임워크에 종속적이지 않고, 필요에 따라 더 세밀하게 커스터마이징할 수 있다는 점입니다. 하지만 그만큼 처음 사용할 때는 추가적인 설정이 필요할 수 있습니다.

 

• Toastify는 미리 정의된 스타일과 기능을 제공해 간편하게 사용할 수 있는 라이브러리입니다. 즉시 사용 가능한 알림을 원할 때 적합합니다.
• ToastPrimitives는 더 낮은 수준의 구성 요소를 제공하며, 완전히 커스터마이징 가능한 알림을 만들 때 유리합니다.

 

Lucide-React:

• **lucide-react**는 React에서 SVG 아이콘을 간편하게 사용할 수 있는 라이브러리입니다.
• 아이콘을 코드에서 쉽게 불러와 사용할 수 있으며, Feather Icons와 비슷하게 깔끔하고 모던한 아이콘들을 제공합니다.

import { Camera } from 'lucide-react';

const MyComponent = () => (
  <div>
    <Camera color="black" size={24} />
  </div>
);

export default MyComponent;

 

아이콘을 여러 스타일과 크기로 쉽게 커스터마이징할 수 있으며, 크기, 색상 등을 속성으로 제어할 수 있습니다.

 

next-themes

Next.js 프로젝트에서 다크 모드와 라이트 모드 같은 테마 기능을 쉽게 구현할 수 있도록 돕는 라이브러리입니다. 이를 사용하면 사용자가 웹사이트의 테마를 변경할 수 있으며, 테마 설정을 로컬 스토리지에 저장해 페이지를 새로 고쳐도 선택한 테마가 유지되도록 할 수 있습니다.

주요 기능:

1. 테마 설정: 다크 모드, 라이트 모드 또는 사용자 정의 테마 지원.
2. 로컬 스토리지 저장: 테마 설정을 브라우저에 저장해 유지.
3. 간편한 사용: useTheme 훅을 사용해 현재 테마를 쉽게 가져오고 변경 가능.

import { ThemeProvider } from 'next-themes'

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp;

import { useTheme } from 'next-themes'

export default function ThemeChanger() {
  const { theme, setTheme } = useTheme()

  return (
    <div>
      <button onClick={() => setTheme('light')}>라이트 모드</button>
      <button onClick={() => setTheme('dark')}>다크 모드</button>
    </div>
  )
}

이 라이브러리는 Next.js 환경에서 쉽게 다크 모드 등의 테마 변경 기능을 구현하고 관리할 수 있게 해 줍니다.

 

DialogPrimitive

@radix-ui/react-dialog라이브러리에서 DialogPrimitive라는 모듈을 가져오는 구문입니다. 이 라이브러리는 React에서 다이얼로그(모달 창)를 쉽게 구현할 수 있게 도와주는 Radix UI의 한 부분입니다.

구체적으로:

• @radix-ui/react-dialog: Radix UI에서 제공하는 React 컴포넌트 라이브러리로, 접근성 좋은 다이얼로그를 쉽게 만들 수 있게 합니다.
• DialogPrimitive: 이 모듈은 다이얼로그의 기본 기능들을 포함하고 있으며, 이를 통해 다이얼로그를 더 유연하게 구성할 수 있습니다.

이 코드를 사용하면 사용자 인터페이스에 모달 창을 추가하고, 그 안에 다양한 상호작용을 구현할 수 있게 됩니다.

 

zod, useForm

• import { zodResolver } from "@hookform/resolvers/zod";
  • react-hook-form과 zod를 함께 사용할 때, zodResolver는 zod의 스키마 기반 검증을 react-hook-form의 폼 검증 시스템에 통합해줍니다.
  • 즉, 폼 데이터를 zod 스키마에 맞춰 검증할 수 있도록 도와주는 역할을 합니다.
• import { useForm } from "react-hook-form";
  • useForm은 react-hook-form에서 제공하는 훅으로, React 컴포넌트 내에서 폼 상태를 관리하고 검증하는 데 사용됩니다.
  • 이 훅을 사용하면 폼을 쉽게 구성하고, 입력 값의 유효성 검사를 처리할 수 있습니다.
• import * as z from "zod";
  • zod는 데이터 검증을 위한 스키마 선언 라이브러리입니다. zod를 사용하여 폼 데이터의 구조와 유효성 규칙을 선언할 수 있습니다.
  • * as z는 zod에서 제공하는 모든 함수와 객체를 z라는 이름으로 가져오는 구문입니다.

폼의 데이터가 제출될 때 zod를 통해 검증된 후 react-hook-form이 그 결과를 처리할 수 있습니다. 예를 들어, 폼의 필드를 검증할 때 각 필드가 숫자인지, 문자열인지, 혹은 특정 형식에 맞는지를 zod 스키마로 정의할 수 있습니다.

const schema = z.object({
  username: z.string().min(3, "Username must be at least 3 characters long"),
  age: z.number().min(18, "You must be at least 18 years old"),
});

const { register, handleSubmit, formState: { errors } } = useForm({
  resolver: zodResolver(schema),
});

const onSubmit = (data) => {
  console.log(data);
};

schema는 zod로 정의된 스키마이고, useForm 훅에서 zodResolver를 사용하여 폼 검증을 처리합니다.

 

cookies-next

Next.js 환경에서 쿠키를 쉽게 다룰 수 있도록 도와주는 라이브러리입니다. 이 라이브러리는 서버 측과 클라이언트 측 모두에서 쿠키를 설정하고 읽을 수 있게 해줍니다. Next.js는 서버 측에서 실행될 수도 있고 클라이언트 측에서 실행될 수도 있기 때문에, 쿠키를 양쪽에서 다루는 것이 중요합니다. cookies-next는 이를 간편하게 처리할 수 있게 해줍니다.

주요 기능

1. 쿠키 설정: 서버나 클라이언트에서 쿠키를 설정할 수 있습니다.
2. 쿠키 읽기: 설정된 쿠키를 쉽게 읽을 수 있습니다.
3. 쿠키 삭제: 특정 쿠키를 삭제하는 기능도 제공합니다.

쿠키 설정 (서버 및 클라이언트)

import { setCookie } from 'cookies-next';

// 쿠키 설정
setCookie('token', 'my-access-token', { maxAge: 60 * 60 * 24 });

쿠키 읽기 (서버 및 클라이언트)

import { getCookie } from 'cookies-next';

// 쿠키 가져오기
const token = getCookie('token');
console.log(token); // "my-access-token"

쿠키 삭제

import { deleteCookie } from 'cookies-next';

// 쿠키 삭제
deleteCookie('token');

서버 측 및 클라이언트 측 모두 지원

Next.js는 서버와 클라이언트 환경을 모두 다루기 때문에, cookies-next는 서버 측에서 getServerSideProps나 getInitialProps 같은 함수 내에서도 작동하고, 클라이언트 측에서도 작동합니다.

import { getCookie } from 'cookies-next';

export async function getServerSideProps({ req, res }) {
  const token = getCookie('token', { req, res });

  return {
    props: {
      token,
    },
  };
}

cookies-next는 Next.js에서 클라이언트와 서버 양쪽에서 쉽게 쿠키를 설정하고 관리할 수 있도록 도와주는 유틸리티 라이브러리입니다. 이를 통해 인증 토큰, 사용자 설정 등을 간편하게 다룰 수 있습니다.