Portfolio

react-hot-toast

react-hot-toast - The Best React Notifications in Town - react-hot-toast

Add beautiful notifications to your React app with react-hot-toast. Lightweight. Smoking hot by default.

실험 환경: Next js 13 with TS // node 18.14.0

First, make sure your development environment meets the following requirements: Node.js 16.8 or later. MacOS, Windows (including WSL), and Linux are supported. Note: While the pages directory requires Node.js v14 or later, the app directory requires Node v16.8.0 or later.

https://beta.nextjs.org/docs/installation


npx create-next-app@latest --experimental-app

react-hot-toast는 useEffect()를 사용한다. 따라서 사용하고자 하는 파일의 맨 윗줄에 'use client’를 작성하여 클라이언트 컴포넌트임을 알려야한다.


"use client";

import toast, { Toaster } from "react-hot-toast";

export default function Page() {
// toast.[sucess||error||Promise 등등 붙여서 사용하면됨)
  const test = () => toast("Here is your Toast");

  return (
    <>
      <div>
        <button onClick={test}>Make me a toast</button>
        <Toaster />
      </div>
    </>
  );
}

SweetAlert

뭐여 2가 있네? 1의 경우 ‘관리가 제대로 이루어 지지 않고 있다’ 라는 의견이 stackoverflow에 있더라구요!

SweetAlert

NPM combined with a tool like Browserify or Webpack is the recommended method of installing SweetAlert. Then, simply import it into your application: You can also find SweetAlert on unpkg and jsDelivr and use the global swal variable. After importing the files into your application, you can call the swal function (make sure it's called after the DOM has loaded!)

https://sweetalert.js.org/guides/

SweetAlert2

Show success message $ npm install sweetalert2 Or grab from jsdelivr CDN // ES6 Modules or TypeScript import Swal from 'sweetalert2' // CommonJS const Swal = require('sweetalert2') Swal.fire({ title: 'Error!', text: 'Do you want to continue', icon: 'error', confirmButtonText: 'Cool' }) Integrations with major JS frameworks When the user clicks a button, the Promise returned by Swal.fire() will be resolved with the SweetAlertResult object: Key Description isConfirmed The "Confirm" button was clicked, the value will contain the result isDenied The "Deny" button was clicked, the value will be false.

https://sweetalert2.github.io/

실험 환경: Next js 13 with TS (상동), node 18.14.0

Installation | Next.js

https://beta.nextjs.org/docs/installation


npx create-next-app@latest --experimental-app

sweetalert1

onClick도 ‘use client’를 필요로한다.


"use client";

import swal from "sweetalert";

export default function Page() {
  const temp = () => {
    swal("test!");
  };

  return (
    <>
      <h1>page2</h1>
      <button onClick={temp}>swal test</button>
    </>
  );
}

sweetalert2


"use client";

import Page2test from "./components/Page2Test";
import Swal from "sweetalert2";

export default function Page() {
  const temp = () => {
    Swal.fire("tes!!t");
  };

  return (
    <>
      <h1>page2</h1>
      <Page2test />
      <button onClick={temp}>swal test</button>
    </>
  );
}

react-query

React Query

Created by Tanner Linsley and ui.dev "This is the fastest way to learn how to build enterprise-level applications with React Query and support my open source work. Win.

https://react-query-v3.tanstack.com/

react에서 client의 state를 관리할 순 있어도 server side의 state를 관리하기란 까다롭다.

캐싱, 최신 데이터인지 확인, 중복 요청 방지 등등 신경 써야 할 일들이 많기 때문이다.

React-query는 이러한 어려움을 해결하게 도와준다.

Help you remove many lines of complicated and misunderstood code from your application and replace with just a handful of lines of React Query logic.

Make your application more maintainable and easier to build new features without worrying about wiring up new server state data sources

Have a direct impact on your end-users by making your application feel faster and more responsive than ever before.

Potentially help you save on bandwidth and increase memory performance

Install


$ npm i react-query

modal, toast, react-query

sweetalert1

sweetalert2