728x90

프론트엔드백엔드연동 2

React와 Node.js 방명록 개발(9): 삭제 기능과 페이징 구현

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

React 2024.11.02

React와 Node.js를 사용한 웹 애플리케이션(게시판) 개발 강좌(21)

프로젝트 최적화 및 빌드: React 프로젝트 빌드 과정 및 배포 준비이번 강의에서는 React 프로젝트를 빌드하고, Node.js 백엔드와 프론트엔드를 연동하여 배포를 준비하는 과정을 다룹니다. 이를 통해 최종 웹 애플리케이션을 최적화하고, 프로덕션 환경에서 실행할 수 있도록 설정합니다.1. React 프로젝트 빌드 과정React는 개발 환경에서 개발 서버를 사용해 빠른 개발 사이클을 지원하지만, 실제로 배포할 때는 정적 파일로 빌드하여 서버에 배포해야 합니다. 빌드 과정은 이러한 정적 파일을 생성하고, 최적화된 버전을 만듭니다.1.1 React 빌드 명령어프로젝트가 준비되었으면 npm을 사용해 빌드합니다.npm run build 이 명령어를 실행하면 build 폴더가 생성되고, React 애플리케이션..

728x90