728x90

방명록프로젝트 3

React와 Node.js 방명록 개발(7): 방명록 작성 및 목록 페이지 구현

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

React 2024.11.02

React와 Node.js 방명록 개발(4): 방명록 CRUD API

Node.js와 Express로 API 구현 (2) - 방명록 CRUD API이번 강의에서는 방명록의 CRUD API를 구체적으로 구현하고, Postman을 통해 각 API가 올바르게 작동하는지 테스트하는 방법을 배웁니다. 실습 위주로 진행하며, API 요청과 응답의 전체 흐름을 따라갈 수 있도록 설명합니다.1. 방명록 작성 (Create) API 구현기능 설명:사용자가 작성한 이름과 메시지를 데이터베이스에 저장하는 API입니다.라우트 설정POST 요청을 통해 방명록을 작성합니다. server.js 파일에 다음 코드를 추가하세요.app.post('/api/guestbook', (req, res) => { const { name, message } = req.body; const sql = 'INSER..

React 2024.11.02

React와 Node.js를 활용한 풀스택 프로젝트(방명록)

방명록 웹 애플리케이션 개발: 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 2024.11.01
728x90