atomicdev 님의 블로그

"React Query로 서버 상태 관리하기: 효율적인 데이터 페칭과 캐싱"1시간 분량 강의안 (React Query 기초)강의 목표React Query의 개념과 필요성을 이해한다.React Query의 주요 기능(데이터 페칭, 캐싱, 뮤테이션)을 학습한다.React Query를 활용한 서버 상태 관리 방법을 실습한다.강의 목차1. React Query란 무엇인가? (10분)React Query의 정의React Query는 React 애플리케이션에서 서버 상태를 관리하고 데이터 페칭과 캐싱을 간단하게 만들어주는 라이브러리입니다.React Query의 주요 특징데이터 동기화: 클라이언트와 서버 간의 데이터를 동기화.자동 캐싱: 데이터가 변경되지 않으면 캐시된 데이터를 사용하여 네트워크 요청 감소.리트라이와..

방명록 작성 및 목록 페이지 구현내용 요약 및 학습 목표글 작성 페이지 구현하기입력 폼과 저장/취소 버튼을 추가하여 사용자가 메시지와 작성자명을 입력할 수 있도록 설정Redux와 React Query를 사용하여 서버와 연동글 목록 페이지 구현하기작성된 글을 리스트 형식으로 출력제목을 클릭하면 상세보기 페이지로 이동할 수 있도록 링크 설정Redux와 React Query로 서버 데이터 연동하기Redux와 React Query를 활용해 글 작성과 목록 데이터를 서버와 연동하여 실시간으로 표시실습 세부 내용글 작성 페이지 구현: 입력 폼과 저장/취소 버튼 추가 (src/components/WriteForm.js)Form 컴포넌트 생성: 사용자가 입력한 글을 서버로 전송하기 위해 form을 구현합니다.Redux..

Redux Toolkit과 React Query 설정 및 데이터 상태 관리 내용 요약 및 학습 목표:Redux Toolkit으로 전역 상태 관리 설정하기Redux Toolkit의 주요 개념 소개Redux 설치 및 프로젝트에 기본 설정Slice 생성 및 전역 상태 관리와 액션 정의하기React Query로 서버 상태 관리와 데이터 패칭 구현하기React Query의 개념과 이점 설명React Query 설치 및 초기 설정서버 상태와 클라이언트 상태의 차이점 이해서버와 연결해 데이터 패칭 및 캐싱 설정하기Redux와 React Query를 함께 사용하기Redux와 React Query를 효율적으로 결합하여 상태 관리하기상태의 종류별(클라이언트 상태와 서버 상태)로 Redux와 React Query의 역할 분..

방명록 웹 애플리케이션 개발: React와 Node.js를 활용한 풀스택 프로젝트이 강좌에서는 MySQL, Node.js, React, Tailwind CSS, Redux Toolkit, React Query를 활용하여 방명록 애플리케이션을 구축합니다. 기본적인 데이터베이스 설정부터 백엔드 API 구축, 프론트엔드 구현, 상태 관리, 그리고 최종 배포까지 차근차근 따라가며 진행할 수 있습니다.강의 1: 프로젝트 개요 및 환경 설정내용 요약프로젝트의 전체 개요 설명 (방명록의 기능과 개발 스택)개발 환경 설정: Node.js, MySQL 설치 및 프로젝트 기본 설정Visual Studio Code 및 필수 확장 도구 설치GitHub 리포지토리 설정과 Git 기본 사용법강의 2: MySQL 데이터베이스 설계..

React에서 서버 상태 관리를 마스터하기 (React Query와 SWR 활용)서버 상태 관리는 현대의 React 애플리케이션에서 매우 중요한 역할을 하며, 데이터 페칭, 캐싱, 서버와 클라이언트 간 동기화를 원활하게 합니다. 이번 포스트에서는 서버 상태 관리를 효율적으로 처리하는 두 가지 인기 라이브러리인 React Query와 SWR을 소개하고, 이들이 제공하는 기능과 각각의 장단점을 비교해 보겠습니다.1. 서버 상태 관리 개요React에서 서버 상태를 관리한다는 것은 API를 통해 데이터를 가져오고, 이 데이터를 UI와 동기화하는 것을 의미합니다. 서버 상태 관리를 잘하면 성능을 최적화할 수 있고, 사용자 경험이 크게 향상됩니다. React Query와 SWR은 이러한 작업을 보다 쉽게 처리할 수..

Zod + Zustand + React Query로 인증(Auth) 구현하기 (feat. ErrorBoundary & AxiosInstance)이번 섹션에서는 AxiosInstance를 활용하여 인증된 요청을 효율적으로 처리하는 방법을 설명합니다. 일반적으로 JWT 토큰을 사용한 인증은 로그인 후 accessToken을 HTTP 요청의 헤더에 추가해야 합니다. 이를 수동으로 처리하는 것은 번거롭기 때문에 AxiosInstance를 사용하여 이 작업을 자동화할 수 있습니다.AxiosInstance를 사용한 인증 요청 처리AxiosInstance 설정axios는 interceptors를 제공하여 요청이 발생하기 전, 또는 응답이 반환되기 전에 특정 로직을 추가할 수 있습니다. 이 기능을 사용해 요청마다 JW..