React

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

atomicdev 2024. 11. 1. 17:50
728x90

방명록 웹 애플리케이션 개발: 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 데이터베이스 설계 및 초기화

내용 요약

  • MySQL 데이터베이스 및 테이블 생성
    • 방명록 테이블 구조 설계 (id, name, message, created_at)
  • SQL 쿼리 작성법 및 기본 CRUD 명령어 학습
  • MySQL Workbench 또는 CLI를 사용해 데이터베이스와 테이블 생성

강의 3: Node.js와 Express로 백엔드 서버 설정 및 API 구현 (1)

내용 요약

  • Node.js와 Express로 기본 서버 설정
  • express 및 mysql 라이브러리 설치
  • 데이터베이스 연결 설정 및 테스트
  • API 설계: 기본적인 CRUD (Create, Read, Update, Delete) 개념 소개

강의 4: Node.js와 Express로 API 구현 (2) - 방명록 CRUD API

내용 요약

  • 방명록 작성 (Create) API 구현
  • 방명록 목록 조회 (Read) API 구현
  • 방명록 수정 (Update) API 구현
  • 방명록 삭제 (Delete) API 구현
  • Postman을 사용한 API 테스트 방법

강의 5: React 프로젝트 생성 및 Tailwind CSS 설정

내용 요약

  • Create React App으로 프론트엔드 프로젝트 생성
  • Tailwind CSS 설치 및 기본 설정
  • Tailwind CSS을 활용한 기본적인 스타일링
  • Tailwind CSS의 유틸리티 클래스와  컴포넌트 활용법

강의 6: Redux Toolkit과 React Query 설정 및 데이터 상태 관리

내용 요약

  • Redux Toolkit을 사용하여 전역 상태 관리 설정
  • Redux Slice를 생성하여 상태 관리 및 액션 정의
  • React Query를 활용한 서버 상태 관리와 데이터 패칭
  • Redux와 React Query를 함께 사용하는 방법

강의 7: 방명록 작성 및 목록 페이지 구현

내용 요약

  • 글 작성 페이지 구현: 입력 폼과 저장/취소 버튼 추가
  • 글 목록 페이지 구현: 작성된 글을 리스트 형식으로 출력
  • Redux와 React Query를 통해 서버 데이터 연동
  • 목록에서 글 제목을 클릭하면 상세보기 페이지로 이동

강의 8: 상세보기 및 수정 페이지 구현

내용 요약

  • 상세보기 페이지 구현: 글 내용, 작성자, 작성시간 표시
  • 글 수정 페이지 구현: 기존 글을 수정할 수 있는 폼과 저장/취소 버튼
  • 각 페이지 간의 라우팅 설정 및 데이터 연동
  • React Router를 사용하여 상세보기 및 수정 페이지로 이동

강의 9: 삭제 기능과 페이징 구현

내용 요약

  • 삭제 기능 구현: 글 상세보기에서 삭제 버튼을 통해 데이터 삭제
  • 페이징 기능 구현: 글 목록에 페이지 번호 추가
  • 백엔드 API에서 페이징 처리, 프론트엔드에서 페이지 전환 처리
  • React Query로 페이징 데이터 페칭

강의 10: 배포 및 최종 점검

내용 요약

  • GitHub에 소스코드 푸시 및 관리 방법
  • 배포 준비: 서버와 클라이언트 코드 최적화
  • Node.js 서버를 Heroku, Vercel, 또는 AWS에 배포하는 방법
  • 최종 점검 및 실습 프로젝트 완성

React와 Node.js를 사용하여 방명록 애플리케이션을 제작

이 강좌를 통해 초보자도 쉽게 방명록 애플리케이션을 만들고, 풀스택 웹 개발의 기본적인 흐름을 이해할 수 있습니다.

 

 

 

728x90