2024/07/31 4

[NEXT.JS] Zustand

개요Zustand는 간단하면서도 강력한 상태 관리 라이브러리입니다. React 애플리케이션에서 전역 상태를 쉽게 관리할 수 있게 해주며, Redux와 비교했을 때 훨씬 더 간단하고 직관적인 API를 제공합니다.Zustand는 독일어로 "상태"를 의미하며, React의 Hooks를 기반으로 합니다.  특징간단한 APIZustand는 매우 간단한 API를 제공하여, 몇 줄의 코드만으로 상태를 정의하고 사용할 수 있습니다.이는 Redux와 같은 복잡한 설정 없이도 쉽게 상태 관리를 할 수 있게 해줍니다.import create from 'zustand';const useStore = create(set => ({ count: 0, increment: () => set(state => ({ count: st..

[NEXT.JS] SWR

개요SWR(Stale-While-Revalidate)은 React Hooks를 사용하여 데이터 가져오기와 캐싱을 간단하게 만들어주는 라이브러리입니다. Next.js와 함께 사용하면 매우 효율적인 데이터 페칭을 구현할 수 있습니다. SWR은 Vercel에서 개발한 라이브러리로, 최신 데이터 페칭 전략을 제공합니다.  특징자동 캐싱 및 재검증 (Stale-While-Revalidate)SWR의 이름에서 알 수 있듯이, 데이터가 오래되었는지 여부에 따라 자동으로 데이터를 캐싱하고, 백그라운드에서 재검증합니다.이는 데이터의 신선도를 유지하면서 빠른 응답을 제공합니다.import useSWR from 'swr';import axios from 'axios';const fetcher = url => axios.ge..

[NEXT.JS] Axios

개요Axios는 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경에서 모두 사용할 수 있는 도구입니다. 주로 비동기 HTTP 요청을 쉽게 관리하고 처리하는 데 사용됩니다.  특징Promise 기반Axios는 Promise API를 사용하여 비동기 요청을 처리합니다.이를 통해 콜백 헬(callback hell)을 피하고, 비동기 코드를 더 읽기 쉽게 작성할 수 있습니다.axios.get('/api/data') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); 인터셉터 (Interceptors)요청(request) 또는 응답(response)이 처리되기 전에..

[NEXT.JS] Express.js

개요Express.js는 Node.js를 위한 간결하고 유연한 웹 애플리케이션 프레임워크로, 특히 웹 서버와 API를 개발하는 데 널리 사용됩니다. Express는 미들웨어와 라우팅 기능을 제공하며, Node.js의 기능을 확장하고 개발자가 웹 애플리케이션을 더 쉽게 구축할 수 있도록 돕습니다.  특징간결함과 유연성- Express는 매우 가볍고 간결한 프레임워크로, 필요한 기능만 포함하고 있어 사용자가 원하는 대로 확장하고 맞춤화할 수 있습니다.- 프레임워크가 복잡하지 않아 학습 곡선이 비교적 낮습니다. 미들웨어Express의 핵심 개념 중 하나는 미들웨어입니다. 미들웨어는 요청과 응답 객체를 통해 각기 다른 작업을 수행하는 함수의 연속입니다.다양한 서드파티 미들웨어를 사용할 수 있으며, 필요에 따라 ..