리액트 express 를 사용하여 MySQL 연동하기

오늘은 리액트 node js express 를 사용하여 MySQL 을 연동할것이다. 근데 오늘 몸상태가 최악..ㅠ 

 

1. 프로젝트 생성 

나는 vscode와 웹스톰을 번갈아가면서 쓴다 ㅎ 이번에는 vscode 로 진행을 하였다.~

터미널 창을 킨후

npx create-react-app simple-react-board --template typescript

로 실행하면 파일이 생성되면

 

각종 파일들에 들어가서 다 변경해주고

필요한 모듈을 설치해준다.

npm i react react-dom typescript

npm i @types/react @types/react-dom @types/node

 

tsconfig.json 에 들어가서 

변경 나는 es6를 사용할거니깐!

 

이제 서버 프로젝트를 새로 생성해준다.

서버 프로젝트로 폴더 이동 후

npm init -y

생성 된걸 확인했으면 이제 관련 모듈들을 설치해주자

 

npm install express body-parser mysql

npm install nodemon

nodemon은 서버 코드가 수정됐을때 자동으로 서버를 재시작해주는 모듈

 

index.js 를 하나 만들어주고

const express = require('express');

const app = express();

const PORT = process.env.port || 8000;

app.listen(PORT, ()=>{

console.log(`running on port ${PORT}`);

});

 

node index.js  를 치면 실행

 

실행된게 보이면 성공

 

패키지json 에 스크립트에 코드추가

"start": "node index.js",

"dev": "nodemon index.js"

 

터미널에서 컨트롤 c 로 서버를 끄고 아래 명령어로 실행시킨다.

npm run dev

 

이렇게 나오면 성공~

데이터베이스 연동을 위해 index.js 수정

위로 변경 후 로컬호스트를 킨다.

/ 으로 첫 화면인 홈으로 진입시 seccess 적어둔게 잘뜬건 보인다 제대로 연동이 되었는지 확인을 한다!

Workbench 로 들어가서 쿼리를 실행해서 /으로 진입시 1값을 잘넣고 있는지 확인하자.

 

쿼리문 작성해서 보면 아주 잘넣어지고있다~

 

다음에는 클라이언트 프로젝트에서 axios 를 사용해보겟다 ~