리액트와 데이터베이스를 연결해보자!
복습하기
-
My-SQL의 GUI 도구 이름은 phpMyAdmin!
-
XAMPP 도구를 실행시켜서 apache
-
localhost/phpmyadmin 접속!
-
테이블 만들기!
-
seed 데이터 만들기
삽입에 들어가서 null 값을 입력하여 seed data를 3개정도 만들어준다.
- 데이터 입력되었는지 확인하기
구조 > 모두 체크 > 선택한 것을 보기!
데이터가 저장된 모습을 볼 수 있다.
개발환경 세팅하기
터미널을 2개로 나누어 프론트와 백엔드 터미널을 따로 사용하도록 했다!
프론트 세팅
작업할 폴더에 backend, frontend 폴더를 각각 생성하고
frontend에는 create-react-app . 을 사용해서 CRA방식으로 프로젝트를 세팅하였다.
초기화 작업
-
App.css
-> default 모두 삭제 -
index.css
-> margin 0 만 삭제
== 여백 없애는 효과만 삭제하기! -
App.js
-> 모두 초기화 하고, 간단한 텍스트만 남김
import React from 'react'
export default function App() {
return (
<div>
hello
</div>
)
}
import React from 'react'
export default function App() {
return (
<div>
hello
</div>
)
}
백엔드 세팅
npm init
npm 모듈 생성을 위한 명령어를 입력한다.
npm init을 하면 node_modules폴더와 package.json 파일이 생성된다.
server.js 는 npm모듈을 설치하면 생기는 파일이 아니고, 프론트와 백엔드서버 연결해주는 node 서버를 만들기 위해 새로 생성한 파일이다.
mysql 명령어와 라우터를 위한 모듈 추가
npm install mysql express
1. npm install mysql
- mysql은 node.js가 My-SQL 데이터베이스가 상호작용할 수 있도록 돕는 모듈이다.
- mysql을 통해 node.js 서버에서 데이터를 삽입,조회,수정,삭제할 수 있다.
2. npm install express
- express 모듈은 Node.js에서 웹 서버를 구축하고, HTTP 요청을 처리할 수 있게 해주는 웹 프레임워크이다.
- 라우팅: 클라이언트의 HTTP 요청(예: GET, POST 등)에 대한 경로를 설정하고, 해당 경로에 맞는 응답을 제공한다.
- 미들웨어: 요청과 응답 사이에서 추가적인 처리를 할 수 있도록 미들웨어 기능을 제공한다. 예를 들어, 요청 본문을 파싱하거나, 인증을 처리하는 등의 작업을 할 수 있다.
- 서버 실행: Express를 사용하여 Node.js 서버를 쉽게 시작하고 클라이언트 요청을 받을 수 있다.
package.json에 잘 설치되었는지 확인!
백엔드에서 브라우저로 입력, 삭제 등 라우팅을 하는 역할을 express가 해줄거고,
local상에서 데이터 교환이 안 되기 때문에 cors를 사용하는 것이다.(cors에 대한 내용은 아래에 설명)
서버생성
- server.js에 코드 작성하기
const express = require('express') //express 기본 라우팅
const app = express() //express 기본 라우팅
const port = 9070
app.listen(port, ()=>{
console.log('Listening...')
})노드 서버의 포트를 임의로 만들어주었다.
- 서버 실행방법
노드 서버는 코드 수정을 하면 자동으로 반영되지 않아 종료 후 서버를 재실행 해야하는 불편함이 있다. 그래서 코드를 수정하면 자동으로 재실행되는 모듈을 설치하도록 했다.
npm install nodemon --save-dev
잘 설치되었는지 확인!
서버를 실행할 때 긴 문장을 사용하지 않고 간편하게 실행하는 방법!
package.json에서 scripts 코드를 추가하기!
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "nodemon ./server.js"
}"dev" : "nodemon ./server.js" 를 한 줄 추가했고,
이 문장을 추가함으로써, 터미널에 npm run dev 라고 입력하면 서버가 실행된다.
app crashed -wating for file changes before starting...
오류가 났던 이유는 server.js에서 콜백함수를 쓰는 과정에서 오타가 있었다.
오타를 수정하니 해결이 됐다.
- cors 모듈 설치하기
npm install cors
마찬가지로 설치 후에 package.json에 잘 설치되었는지 확인!
cors란 서버 측에서 특정 출처에서 온 요청을 허용할 수 있도록 설정하는 방법이다. 서버가 특정 도메인에서 오는 요청을 허용하면, 브라우저가 그 요청을 허용하게 된다.
- server.js에 cors 코드 추가하기
(server.js 전체코드)
const express = require('express') //express 기본 라우팅
const app = express() //express 기본 라우팅
const port = 9070
const cors = require('cors')
app.use(cors())
app.listen(port, ()=>{
console.log('Listening...')
})코드를 추가한 뒤 npm run dev해서 정상실행 되는지 확인!
- php와의 연결을 도와주는 My-SQL 연결하는 코드 추가하기
//server.js
const mysql = require('mysql')
mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'front'
})
- 데이터 베이스를 불러오는 코드가 잘 실행되는지 확인하는 코드 입력하기
app.get('/', (req,res)=>{
//특정 경로로 요청된 정보를 처리
res,json('Excused from Backend!')
})특정 경로 '/'로 요청된(reqest) 정보를 처리(response) 라고 이해하면 된다.
- 데이터를 잘 가지고 오고 있는지 확인하는 방법
localhost:포트번호
(결과)
- node.js에 mysql 연동해주는 모듈의 문법을 적용해서 쿼리 작성하기
데이터베이스의 테이블을 가지고 올 수 없기 때문에 node.js에서 json파일 형식으로 바꾸어서 사용해야 한다. 따라서
const express = require('express') //express 기본 라우팅
const app = express() //express 기본 라우팅
const port = 9070
const mysql = require('mysql')
const cors = require('cors')
app.use(cors())
app.use(express.json())
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'front',
})
app.get('/', (req,res)=>{
//특정 경로로 요청된 정보를 처리
//res.json('Excused from Backend!')
//mysqli_query(연결객체,쿼리) -> 연결객체.query(쿼리, 데이터처리)
const sql = 'select * from users;'
db.query(sql,(err, data)=>{
if(err) return res.json(err)
return res.json(data)
})
})
app.listen(port, ()=>{
console.log('Listening...')
})(결과)
프론트에 라우터 설치 및 컴포넌트 생성하기
라우터 설치하기
npm install react-router-dom
리액트 라우터를 설치하고 package.json 확인하기
컴포넌트 생성하기
여러개의 컴포넌트를 생성할 예정이기 때문에 src 폴더 안에 components 폴더를 생성하고 그 안에 js 파일을 생성했다.
//app.js
import React from 'react'
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import ListUsers from './components/ListUsers'
export default function App() {
return (
<div>
<h2>hello</h2>
<BrowserRouter> {/*브라우저의 라우터 범위를 설정*/}
<Routes>
<Route path='' element={<ListUsers/>} />
</Routes>
</BrowserRouter>
</div>
)
}
//ListUsers.js
import React from 'react'
import '../App.css'
export default function ListUsers() {
return (
<div>
<h3>List users</h3>
<table>
<thead>
<tr>
<th>NAME</th>
<th>ID</th>
<th>PWD</th>
</tr>
</thead>
</table>
</div>
)
}
//App.css
table{
border-collapse: collapse;
}
table,th,td{
border: 1px solid orange;
padding: 10px
}
(결과)
axios 모듈 설치하기
리액트는 mysql과 직접적인 연결이 불가능하다. 그런데 프론트 언어이지만 백엔드 데이터베이스와 소통이 가능한 스크립트 언어인 node를 이용해서 데이터베이스를 가지고 올 것이다.
npm install axios
axios는 http 비동기 통신 라이브러리이다.
브라우저와 노드서버를 연결해주는 역할을 한다.
예를 들어 데이터를 가져오는 GET이나 데이터를 전송하는 POST 를 다룰때 사용할 수 있다.
package.json 파일 확인
기능생성하기
이제 기본적인 세팅은 다 되었으므로 회원가입, 유저 정보 수정 및 삭제를 할 수 있는 기능에 대한 코딩을 시작할 수 있다!
코딩 순서는 복습하기 과정에서 가져온 시드데이터를 불러오는 것 -> components인 CreateUsers.js, ListUsers.js, UpdateUser.js 파일과 server.js 파일을 오가며 데이터를 추가, 수정, 삭제가 가능하도록 하는것이다.
데이터 불러오기
//server.js
//get은 가져오기를 할 때 쓰는 메소드
app.get('/', (req,res)=>{
//특정 경로로 요청된 정보를 처리
//res.json('Excused from Backend!')
//mysqli_query(연결객체,쿼리) -> 연결객체.query(쿼리, 데이터처리)
const sql = 'select * from users;'
//db.query == 데이터베이스에 데이터를 전달하는것
db.query(sql,(err, data)=>{
if(err) return res.json(err)
return res.json(data)
})
})server.js에서 데이터를 불러오는 코드를 작성했다.
app.get에서 get은 데이터를 가져오기를 할 때 쓰는 메소드이다.
특정 경로: '/'로의 이동은 Express 모듈로 인해 경로이동(라우터)이 실행될 것이다.
(req,res)=>{}는 클라이언트로부터 요청받은 객체와 클라이언트에 응답할 객체를 뜻하는데 req는 url파라미터나 데이터를 담고있고, res는 데이터를 내보내는 역할을 한다.
콜백함수의 {}안에는 쿼리문을 필요로 하는데 어떤 데이터를 사용할 것인지 테이블 안의 내용을 설정하고, 데이터베이스에 데이터를 전달하고 클라이언트에게 응답하는 역할을 한다.
따라서
const sql = 'select * from users;' 라는 문장은
users라는 데이터 베이스 안에 있는 모든 데이터를 선택해서 sql안에 담았다는 뜻이고,
db.query(sql, (err,data)=>{
if(err) return res.json(err)
return res.json(data)
})
는 요청받은 데이터에 에러가 있으면 화면에 에러를 출력하고, 만약 아니라면 data를 출력한다는 내용을 전달하는 역할을 한다.
//app.js
import React from 'react'
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import ListUsers from './components/ListUsers'
export default function App() {
return (
<div>
<h2>React + MySQL</h2>
<BrowserRouter> {/*브라우저의 라우터 범위를 설정*/}
<Routes>
<Route path='/' element={<ListUsers/>} />
</Routes>
</BrowserRouter>
</div>
)
}app.js에서는 화면에 보여질 영역의 라우터를 설정해야 한다.
react-router-dom에서 BrowserRouter, Routes, Route를 import 하고 라우터 안에 경로와 element를 담는다.
//ListUsers.js
import React, { useEffect, useState } from 'react'
import axios from 'axios'
import {Link, useNavigate} from 'react-router-dom'
import '../App.css'
export default function ListUsers() {
const [data,setData] = useState([])
const navigate = useNavigate()
useEffect(()=>{
axios.get('http://localhost:9070') //fetch
//.then(res => console.log(res.data))
.then(res=>setData(res.data))
.then(err=>console.log(err))
}, [])
return (
<div>
<h3>List users</h3>
{/*<Link to='create'></Link>*/}
<button onClick={()=>{ navigate('create') }}>ADD</button>
<table>
<thead>
<tr>
<th>NAME</th>
<th>ID</th>
<th>PWD</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
{
data.map( user => (
<tr key={user.idx}>
<td>{user.u_name}</td>
<td>{user.u_id}</td>
<td>{user.pwd}</td>
<td>
<button
onClick={()=> navigate(`update/${user.idx}`)}
>EDIT</button>
<button
onClick={()=> deleteData(user.idx)}
>DELETE</button>
</td>
</tr>
) )
}
</tbody>
</table>
</div>
)
}
ListUser.js에서는 데이터를 받아올 때 map을 사용해서 배열에 담겨있는 사용자의 데이터를 가져올 수 있도록 한다.
또한 버튼을 클릭했을 때 경로를 이동할 수 있도록 navigate를 사용했고, 유저의 정보를 수정하거나 삭제할 때 원하는 사용자의 정보만 변경될 수 있도록 user.idx를 이용해서 특정 데이터만 선택될 수 있도록 했다.
사용자 생성 페이지
시드데이터가 불러와져서 잘 출력되는 것을 확인했다면 데이터를 phpmyadmin에서 직접 추가하지 않고, 웹페이지에서 입력했을 때 데이터베이스에 저장될 수 있도록 기능을 추가했다.
이번 공부를 하면서 기억해야 할 순서!
1. 서브페이지 컴포넌트 생성
2. app.js에 라우터 생성
3. 서버에 데이터 보내기/삭제하기/수정하기 등 코드 입력하기
4. 서브페이지 컴포넌트로 다시 돌아와서 서버와 연결하는 코드(ex. axios) 입력하기
이 순서를 반복한다!
