초기 셋팅 코드 및 설치 명령어 모음집!!

TIL

초기 셋팅 코드 및 설치 명령어 모음집!!

윤미주 2024. 5. 19. 03:01

cmder 이용해 폴더 만들기

yarn create next-app 파일이름 --typescript

마지막에 @/* 를 활성화 시킬때는 tap키를 눌러주면 활성화 가능!!

tankstact-query
- yarn add @tanstack/react-query

react-toastify
- yarn add react-toastify

react-icons
- yarn add react-icons

// jwt 토큰 셋팅 도와주는 라이브러리
js-cookie
- yarn add --dev @types/js-cookie

// jwt 디코딩 도와주는 라이브러리
jsonwebtoken
- 설치 명령어: - yarn add --dev @types/jsonwebtoken - 설치 명령어: - yarn add jsonwebtoken

사용해보고 작성한 글: https://anywhereim.tistory.com/94

// 주소 입력받을 때 사요하는 라이브러리
react-daum-postcode
설치 명령어: - yarn add react-daum-postcode

// 훅 폼 쉽게 만들 수 있도록 도와주는 라이브러리
react-hook-form
설치 명령어: - yarn add react-hook-form

사용해보고 작성한 글 : https://anywhereim.tistory.com/93

QueryProvider

"use client";

import React from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();
export function QueryProvider({ children }: React.PropsWithChildren) {
  return (
    <>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </>
  );
}

layout

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { QueryProvider } from "./provider";
import { ToastContainer } from "react-toastify";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "주밍글",
  description: "Generated by create next app",
};

interface LayoutType {
  children: React.ReactNode;
}

export default function RootLayout({ children }: LayoutType) {
  return (
    <html lang="ko">
      <body className={inter.className}>
        <QueryProvider>
          <ToastContainer />
          {children}
        </QueryProvider>
      </body>
    </html>
  );
}

toast

import { toast } from "react-toastify";

export const addWish = () =>
  toast("toast 알림 문구 넣기", {
    position: "top-right",
    autoClose: 2000,
    hideProgressBar: true,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: undefined,
    pauseOnFocusLoss: false,
    theme: "light",
  });

파일구조

📦app
 ┣ 📜(login)
 ┣ 📜favicon.ico
 ┣ 📜globals.css
 ┣ 📜layout.tsx
 ┣ 📜page.tsx
 ┗ 📜provider.tsx