React

React와 Node.js 방명록 개발(1): 프로젝트 개요 및 환경 설정

atomicdev 2024. 11. 2. 12:25
728x90

프로젝트 개요 및 환경 설정

내용 요약
이 강의에서는 프로젝트의 전체 개요와 개발 환경 설정을 진행합니다. 방명록 애플리케이션에서 구현할 주요 기능과 사용 기술 스택을 살펴보고, 프로젝트에 필요한 개발 환경을 구축합니다. Node.js와 MySQL을 설치하고 기본 프로젝트를 설정하며, Visual Studio Code와 필수 확장 도구 설치 및 GitHub 리포지토리 설정을 통해 코드 형상관리를 시작합니다.

1. 프로젝트 개요 설명

  • 프로젝트 목표: 방명록 애플리케이션을 개발하여 글 작성, 글 목록, 상세보기, 수정 및 삭제 기능을 구현합니다.
  • 기능 소개:
    • 글 작성: 작성자명과 메시지를 입력하고 저장.
    • 글 목록: 글 번호, 작성 시간, 제목, 작성자를 보여주는 리스트 페이지.
    • 상세보기: 글 내용과 작성자, 작성시간을 보여주며 수정/삭제 기능 제공.
    • 글 수정: 글 내용을 수정하고 저장.
  • 사용 기술 스택:
    • Frontend: React, Redux (Toolkit), React Query
    • Backend: Node.js, Express
    • Database: MySQL
    • UI: Shadcn (Tailwind CSS)
    • Dev Tools: Visual Studio Code, GitHub

2. Node.js 설치 및 프로젝트 초기 설정

  1. Node.js 설치
    • Node.js 공식 사이트에서 최신 버전의 Node.js를 다운로드하여 설치합니다.
    • 설치 확인: 터미널에서 node -v와 npm -v 명령어를 입력해 설치된 버전을 확인합니다.
  2. 프로젝트 폴더 생성
    • 원하는 폴더 위치로 이동하여 터미널에서 아래 명령어를 입력합니다. 
      mkdir guestbook-app 
cd guestbook-app 
npm init -y
    • npm init -y를 통해 package.json 파일이 자동으로 생성됩니다.
  3. 필수 패키지 설치
    • Express 설치 (백엔드 프레임워크) 
    • npm install express
       
    • MySQL과 연동을 위해 mysql2 패키지를 설치합니다. 
      npm install mysql2
       

3. MySQL 설치 및 데이터베이스 설정

  1. MySQL 설치
  2. 데이터베이스 생성
    • MySQL 콘솔에 접속하여 데이터베이스와 테이블을 만듭니다. 
      CREATE DATABASE guestbook; 
USE guestbook; 
CREATE TABLE messages ( 
	id INT AUTO_INCREMENT PRIMARY KEY, 
    author VARCHAR(50), 
    message TEXT, 
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );

  3. MySQL 연결 테스트
    • Node.js로 MySQL에 연결하는 샘플 코드를 작성해 봅니다.
    • index.js 파일을 생성하고 아래 코드를 추가합니다: 
      const mysql = require('mysql2');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'your_username',
  password: 'your_password',
  database: 'guestbook'
});

connection.connect(err => {
  if (err) throw err;
  console.log('Connected to MySQL database.');
});

    • # MySQL 연결 테스트

      node index.js

       

index.js 실행화면

4. Visual Studio Code 및 필수 확장 도구 설치

  1. Visual Studio Code 설치
  2. 필수 확장 도구 설치
    • Tailwind CSS IntelliSense
    • Prettier - Code Formatter
    • ESLint
    • GitLens - Git supercharged

5. GitHub 리포지토리 설정 및 기본 Git 사용법(옵션)

  1. GitHub 리포지토리 생성
    • GitHub 계정에 로그인 후 새로운 리포지토리를 생성합니다.
  2. 프로젝트를 Git으로 초기화 및 연결
    • 프로젝트 폴더에서 아래 명령어를 실행하여 Git 초기화 및 리모트 연결을 설정합니다. 
      git init git remote add origin https://github.com/your_username/guestbook-app.git
       
  3. Git 기본 사용법
    • 변경 사항을 추가하고 커밋합니다. 
      git add . git commit -m "Initial commit"
       
       
    • 리포지토리에 푸시합니다. 
      git push origin main
       
       

방명록 애플리케이션을 구축


요약

이번 강의에서는 방명록 애플리케이션의 개요와 사용 스택을 소개하고, 개발 환경을 설정했습니다. Node.js와 MySQL 설치부터 프로젝트 초기 설정, VS Code 환경 설정, GitHub 리포지토리 연결까지 진행하며 개발 준비를 완료했습니다.

다음 강의에서는 React 프로젝트를 생성하고 기본적인 페이지 컴포넌트를 구축하는 방법을 알아보겠습니다.

 

 

728x90