atomicdev 님의 블로그

삭제 기능과 페이징 구현내용 요약 및 학습 목표삭제 기능 구현상세보기 페이지에서 삭제 버튼을 통해 글을 삭제하는 기능 추가삭제 요청 후 목록 페이지로 이동하는 흐름 학습페이징 기능 구현글 목록에 페이지 번호 추가 및 페이지 전환 기능 구현백엔드 API에서 페이징 처리 설정React Query를 사용해 페이지 데이터 패칭 및 페이지 전환 기능 구현실습 세부 내용1. 삭제 기능 구현: 글 상세보기에서 삭제 버튼 추가삭제 요청 구현: Axios를 사용해 백엔드에 삭제 요청을 보내고, 성공 시 목록 페이지로 이동합니다.// PostDetail.jsimport React from 'react';import { useParams, Link } from 'react-router-dom';import { useQuer..

상세보기 및 수정 페이지 구현내용 요약 및 학습 목표상세보기 페이지 구현특정 글의 내용을 확인하는 상세보기 페이지 구현글의 작성 내용, 작성자명, 작성 시간 등을 표시React Query를 통해 특정 글의 데이터를 API로부터 가져오기글 수정 페이지 구현글 수정 페이지에서 기존 내용을 수정할 수 있도록 구현작성 내용, 작성자명 등 기존 데이터를 폼에 채워서 수정 가능수정 후 저장/취소 버튼으로 데이터 반영 및 페이지 이동 설정React Router로 페이지 라우팅 설정React Router를 사용해 상세보기와 수정 페이지로 이동각 페이지 간의 데이터 연동 설정하여 UX 개선실습 세부 내용상세보기 페이지 구현: 글 내용, 작성자, 작성시간 표시데이터 패칭: 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 데이터베이스 설계..

미들웨어 간소화Redux Toolkit의 createAsyncThunk 사용Redux Toolkit의 createAsyncThunk를 사용하면 비동기 작업과 관련된 코드가 크게 간소화됩니다. 이번 포스팅에서는 React 애플리케이션 생성부터 실행까지의 세부 과정과 파일 구조를 함께 설명하며, Redux Toolkit을 사용하여 비동기 작업을 어떻게 쉽게 구현할 수 있는지 살펴보겠습니다.1. React 애플리케이션 생성 및 Redux Toolkit 설치먼저 Redux Toolkit을 사용할 애플리케이션을 생성합니다.npx create-react-app my-redux-toolkit-appcd my-redux-toolkit-appnpm install @reduxjs/toolkit react-redux2. 전..

Redux Toolkit을 사용한 호환성 개선: 설치부터 실행까지이번 포스팅에서는 Redux Toolkit을 사용하여 React와 Redux 간의 호환성을 어떻게 개선할 수 있는지 알아보겠습니다. 실습을 통해 애플리케이션을 처음부터 구축하고, 모든 설정 과정을 자세히 설명하겠습니다.1. React 애플리케이션 생성 및 Redux Toolkit 설치먼저, Redux Toolkit을 사용할 React 애플리케이션을 생성하고 필요한 패키지를 설치합니다.npx create-react-app my-redux-toolkit-appcd my-redux-toolkit-appnpm install @reduxjs/toolkit react-redux위 명령어를 사용하여 my-redux-toolkit-app이라는 이름의 Re..

Redux Toolkit을 사용한 성능 최적화Redux Toolkit을 사용하여 복잡한 설정 과정을 간소화하고, 각 기능을 사용하여 성능을 최적화하는 방법을 알아보겠습니다. 이번 포스팅에서는 React 애플리케이션 생성부터 실행까지의 세부 과정과 파일 구조를 함께 설명하겠습니다.1. React 애플리케이션 생성 및 Redux Toolkit 설치먼저 Redux Toolkit을 사용할 애플리케이션을 생성합니다.npx create-react-app my-redux-toolkit-appcd my-redux-toolkit-appnpm install @reduxjs/toolkit react-redux2. 전체 파일 구조애플리케이션의 전체 파일 구조는 다음과 같습니다:my-redux-toolkit-app/├── sr..

리덕스의 기본 컴포넌트 개념과 사용 방법이번 포스팅에서는 Redux의 핵심 개념인 스토어(Store), 액션(Action), **리듀서(Reducer)**를 설명하고, 이를 어떻게 사용하는지 실습 예제와 함께 알아보겠습니다. Redux는 React 애플리케이션에서 상태 관리를 효율적으로 처리할 수 있는 라이브러리로, 이 포스팅을 통해 Redux의 기본 구조와 활용법을 이해할 수 있습니다.1. 리액트 애플리케이션 생성 및 Redux 설치하기먼저 React 애플리케이션을 생성하고 Redux를 설치하는 방법을 알아보겠습니다.React 애플리케이션 생성npx create-react-app my-redux-appcd my-redux-appRedux 및 Redux Toolkit 설치 Redux와 Redux Tool..

Redux Toolkit의 createAsyncThunk를 사용한 비동기 처리와 미들웨어 간소화이번 포스팅에서는 Redux Toolkit의 createAsyncThunk를 사용하여 비동기 처리를 간소화하고, 미들웨어 설정을 어떻게 개선할 수 있는지를 Before -> After 형식으로 설명하겠습니다. createAsyncThunk는 비동기 작업을 위한 간편한 방법을 제공하여 코드의 복잡성을 줄이고 유지보수를 쉽게 만듭니다.1. 비동기 처리를 위한 미들웨어 사용의 필요성Redux에서 비동기 작업(예: API 호출)을 처리하기 위해서는 미들웨어가 필요합니다. 기존 Redux 방식에서는 Redux Thunk나 Redux Saga와 같은 미들웨어를 설정해야 하며, 이는 코드의 복잡성을 증가시키는 원인이 됩니다..