React로 게시판 만들기(2)

https://koop.tistory.com/44

React로 게시판 만들기(1)

- 지난 포스팅에서 UI를 만들었고, 이번에는 DB를 연결하여 리스트, 글쓰기 기능을 구현.

- 아예 새로운 app을 생성하여 시작

 

- npx create-react-app sk-react-board ⇒ 새로운 앱 생성

- cd sk-react-board ⇒ 앱 위치로 이동

- npm i express ⇒ 설치 : 서버
- npm i mysql ⇒ 설치 : DB
- npm i axios ⇒ 설치 : 비동기
- npm i cors ⇒ 설치 :  서버와 클라이언트 간의 자원공유 관리
- npm i json ⇒ 설치 : json
- npm i nodemon ⇒ 설치 : 자동감지 서버 재시작 도구 (소스코드의 변경이 발생하면 자동으로 서버 재시작)
- npm i react-router-dom ⇒ react 표준 라우팅 라이브러리 (컴포넌트간의 전환이 일어날때 화면 전환)

설치 완료

 

 

- DB, user, 스키마 생성

--root 계정으로 실행
create database db_react;
create user 'react'@'localhost' identified by 'mysql';
grant all privileges on db_react.* to react@localhost;
ALTER USER 'react'@'localhost' IDENTIFIED WITH mysql_native_password BY 'mysql';
FLUSH PRIVILEGES;


--react 계정으로 실행
use db_react;

--게시글 테이블 생성
create table sk_board (
	id bigint auto_increment primary key,
	title varchar(30),
	contents text,
	writer varchar(20),
	reg_date timestamp DEFAULT now(),
    	views INT DEFAULT 0;
);


insert into sk_board(title, contents, writer) values('한 번 배워서 어디서나 사용하기','기술 스택의 나머지 부분에는 관여하지 않기 때문에, 기존 코드를 다시 작성하지 않고도 React의 새로운 기능을 이용해 개발할 수 있습니다.','red');
insert into sk_board(title, contents, writer) values('상태를 가지는 컴포넌트','컴포넌트는 this.props를 이용해 입력 데이터를 다루는 것 외에도 내부적인 상태 데이터를 가질 수 있습니다. 이는 this.state로 접근할 수 있습니다.','orange');
insert into sk_board(title, contents, writer) values('애플리케이션','props와 state를 사용해서 간단한 Todo 애플리케이션을 만들 수 있습니다.','yellow');
insert into sk_board(title, contents, writer) values('외부 플러그인을 사용하는 컴포넌트','React는 유연하며 다른 라이브러리나 프레임워크를 함께 활용할 수 있습니다. 이 예제에서는 외부 마크다운 라이브러리인 remarkable을 사용해 <textarea>의 값을 실시간으로 변환합니다.','green');
insert into sk_board(title, contents, writer) values('자습서를 시작하기 전에','우리는 이 자습서에서 작은 게임을 만들겁니다. 게임을 만들고 싶지 않아서 자습서를 건너뛰고 싶을 수 있습니다. 그래도 한번 해보세요!','blue');
insert into sk_board(title, contents, writer) values('브라우저에 코드 작성하기','먼저 새 탭에서 초기 코드를 열어주세요. 새 탭은 비어있는 틱택토 게임판과 React 코드를 보여줄 것입니다. 우리는 자습서에서 React 코드를 편집할 것입니다.','navy');
insert into sk_board(title, contents, writer) values('React란 무엇인가요?','React는 몇 가지 종류의 컴포넌트를 가지지만 우리는 React.Component의 하위 클래스를 사용해보겠습니다.','purple');

select * from board;

--댓글 테이블 생성
create table comments (
    id bigint auto_increment primary key,
    post_id bigint not null,
    user varchar(20) not null,
    content text not null,
    created_at timestamp default now(),
    foreign key (post_id) references sk_board(id) on delete cascade
);

desc comments;

 

 

- 앱-> src -> server 폴더 생성 후, server.js 파일 생성

// server.js
// 설치한 라이브러리 변수로 받아오기
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const cors = require('cors');

//express 사용하기 위한 app 생성
const app = express();

//express 사용할 서버포트 설정
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(bodyParser.json());

//DB 접속
const db = mysql.createConnection({
    host : 'localhost',
    user: 'react',
    password: 'mysql',
    port:'3306',
    database:'db_react'
});

// express 접속
app.listen(PORT, ()=>{
    console.log(`server connecting on : http://localhost:${PORT}`);
});

//db 연결
db.connect((err)=>{
    if(!err){
        console.log("success");

    }else{
        console.log("fail");
    }
});

 

 

- server 폴더 내에서 node server 명령어 실행 후, 성공적으로 연결 되었는지 확인

PS D:\sk\react\sk-react-board\src\server> node server
server connecting on : http://localhost:5000
success

 

 

- 앱-> src -> components 폴더 생성 후, BoardHome.jsx, BoardDetail.jsx, BoardList.jsx, BoardModify.jsx, BoardWrite.jsx, Comment.jsx BoardStyle.css 파일들 생성

- package.json에 다음 proxy 설정 추가

"proxy": "http://localhost:5000/"