오늘은 리액트 를 통해 디비에 값을 뿌리는 작업을 진행 하겟당!
전에 작업한 링크
https://asdf1326.tistory.com/7
리액트 express 를 사용하여 MySQL 연동하기
오늘은 리액트 node js express 를 사용하여 MySQL 을 연동할것이다. 근데 오늘 몸상태가 최악..ㅠ 1. 프로젝트 생성 나는 vscode와 웹스톰을 번갈아가면서 쓴다 ㅎ 이번에는 vscode 로 진행을 하였다.~ 터
asdf1326.tistory.com
일단 필요한 구조를 설명하자면
클라이언트 폴더, 서버 폴더 분리해서 직접 생성 한 디비를 연결작업을 진행해보겠다~!
클라이언트 생성명령어 npx create-react-app 폴더명칭 --template typescript
서버측은 위에 링크 참고
위에 폴더를 차례대로 생성 후 일단 디비를 생성
스키마 하나 새로 생성 후 use nodejs 로 데이터베이스 선택
위에처럼 생성
데이터 추가 후 명령어로 테이블 확인
index.js
const express = require("express");
const app = express();
const mysql = require("mysql");
const PORT = process.env.port || 3000;
const db = mysql.createPool({
host: "127.0.0.1",
user: "root",
password: "0000",
database: "nodejs",
});
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.header("Access-Control-Allow-Headers", "x-access-token, Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.get("/list", (req, res) => {
const sqlQuery = "SELECT *FROM BOARD;";
db.query(sqlQuery, (err, result) => {
res.send(result);
});
});
app.listen(PORT, () => {
console.log(`running on port ${PORT}`);
});여기서 주의할점이 가끔 cors 에러가 뜨곤 한다 미리 사전의 방지를 하는것이 좋다!
header에 추가적인 조치를 취해준다. 응답 헤더부분에 추가적으로 넣으면 된다. 내가 추가한 값이 제대로 들어가있다~
원래는 다른 코드를 써서 조작을해야 안전하게 하나의 도메인만 받는게 좋다 * 로 설정해둔 오리진 부분은 사실 많이 쓰지 않는 방식이다.!
인터넷 검색으로 치면 많은 설명들이 나온다 꼭 개발이 아닌과정에서는 확인 후 사용해주자~
이제 서버측은 셋팅이 끝낫당.!
클라이언트쪽으로 넘어가서 만들어보자~
클라이언트 소스확인 가능한 깃허브 주소 : https://github.com/asdf132645/client
GitHub - asdf132645/client
Contribute to asdf132645/client development by creating an account on GitHub.
github.com
import { Component } from "react";
import Axios from "axios";
import Table from "react-bootstrap/Table";
import Button from "react-bootstrap/Button";
const Board = ({
id,
title,
registerId,
registerDate,
}: {
id: number;
title: string;
registerId: string;
registerDate: string;
}) => {
return (
<tr>
<td>
<input type="checkbox"></input>
</td>
<td>{id}</td>
<td>{title}</td>
<td>{registerId}</td>
<td>{registerDate}</td>
</tr>
);
};
/**
* BoardList class
*/
class BoardList extends Component {
state = {
boardList: [],
};
getList = () => {
Axios.get("http://localhost:3000/list", {})
.then((res) => {
const { data } = res;
this.setState({
boardList: data,
});
})
.catch((e) => {
console.error(e);
});
};
/**
*/
componentDidMount() {
this.getList();
}
/**
* @return {Component} Component
*/
render() {
// eslint-disable-next-line
const { boardList }: { boardList: any } = this.state;
return (
<div>
<Table striped bordered hover>
<thead>
<tr>
<th>선택</th>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
</tr>
</thead>
<tbody>
{
// eslint-disable-next-line
boardList.map((v: any) => {
return (
<Board
id={v.BOARD_ID}
title={v.BOARD_TITLE}
registerId={v.REGISTER_ID}
registerDate={v.REGISTER_DATE}
/>
);
})
}
</tbody>
</Table>
<Button variant="info">글쓰기</Button>
<Button variant="secondary">수정하기</Button>
<Button variant="danger">삭제하기</Button>
</div>
);
}
}
export default BoardList;npm install axios 로 모듈 설치해주고
우리는 서버 포트는 3000이다. 명확하게 클라이언트 포트도 나눠주자!
요로코롬 start 할때 포트 8000 으로 이어주자~ 그래야 겹치지 않고 서로다른 포트에서 연결이 잘되니깐!
이제 마지막으로 화면을 확인하고 네트워크를 봐주자~
잘나온다 ! 네트워크도 확인 해보자!
응답값이 아주이쁘게 들어가있다.!! 뷰만 할때는 못느낀건데.. 컴포넌트 반복문 쓸때 좀 낮설다.. map 함수를 써서 반환 시키는게 참 낮설다... 뷰는 v-for 써주고 key 써주면 아주 이쁘게 잘들가는뎅.. 참 낮설어...! 암튼이게 문제가 아니고 다음에는 테이블내용 추가 수정등을 해볼것이다~ 그리고 리덕스도 차근차근 적용하고~ 라우터도 해볼것이다~ 이것으로 코인의 백엔드 조작 탐방 일기 끄읏~~~
다음 일기에서 계속~!~
'react > 리액트 + Express' 카테고리의 다른 글
| 리액트 csr + Tailwind css 프로젝트 생성(사용) (0) | 2023.12.22 |
|---|---|
| 리액트 성능최적화 (0) | 2023.12.17 |
| (Clean Architecture)클린 아키텍처 - feat(React) (0) | 2023.12.12 |
| node express 개념설명 (1) | 2023.12.08 |
| 리액트 express 를 사용하여 MySQL 연동하기 (4) | 2022.12.28 |
