[코낭] MySQL, Node.js 연동하여 데이터 조회하고 가져오기

React, MySQL, Node.js를 이요하여 사용 중인 MySQL에서 원하는 데이터를 가져와 보도록 하자.

🚀 데이터 조회

root폴더에 server폴더를 만들고 그 안에 server.js파일을 만든다.
server.js 파일은 node.js이기 때문에 작업할 때 수정돼서 확인하려면 서버를 껐다가 다시 켜주어야 한다.
터미널에서 server 폴더 경로로 가서 'node server' 명령어를 입력하면 서버가 실행된다.

server.js 파일을 만든 후 express, cors, mysql 라이브러리 등을 npm으로 설치해주고 나의 DB에 맞는 정보를 입력해주면 된다.

// MySQL 연결
const db = mysql.createPool({
    host: "127.0.0.1", // 호스트
    user: "root",      // 데이터베이스 계정
    password: "",      // 데이터베이스 비밀번호
    database: "star",  // 사용할 데이터베이스
});

app.use(cors({
    origin: "*",                // 출처 허용 옵션
    credentials: true,          // 응답 헤더에 Access-Control-Allow-Credentials 추가
    optionsSuccessStatus: 200,  // 응답 상태 200으로 설정
}))

// post 요청 시 값을 객체로 바꿔줌
app.use(express.urlencoded({ extended: true })) 

// 서버 연결 시 발생
app.listen(PORT, () => {
    console.log(`server running on port ${PORT}`);
});

url에 접속해서 조회된 데이터도 확인이 가능하고 위에서 콜백으로 작성한 res.send 코드로 터미널에서도 조회된 데이터를 확인할 수 있다.

🚀 데이터 가져오기

axios 라이브러리를 이용하여 간단하게 호출해 볼 수 있다.
axios의 get 파라미터로 url을 입력하면 해당 경로에서 데이터를 가져올 수 있다.
MySQL로부터 데이터를 받을 수 있다.

<Button onClick={() => {
    // npm i axios | yarn add axios
    axios.get("http://localhost:3001/api/company")
        .then((res: any) => {
            console.log(res);
        }).catch((err: any) => {
            console.log(err);
        })
}}>api 호출하기</Button>

위 방식은 단순히 get방식으로 조회만 해보았지만 post, put, delete 방식도 있다.

[참고] https://itprogramming119.tistory.com/entry/React-MySQL-Nodejs-%EC%97%B0%EB%8F%99%ED%95%98%EC%97%AC-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A1%B0%ED%9A%8C%ED%95%98%EA%B3%A0-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0#:~:text=%5B%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0%5D&text=axios%EC%9D%98%20get%20%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0%EB%A1%9C,%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A5%BC%20%EB%B0%9B%EC%9D%84%20%EC%88%98%20%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4.&text=React%EC%99%80%20MySQL%2C%20Node.js,%EC%98%A4%EB%8A%94%20%EA%B2%83%EA%B9%8C%EC%A7%80%20%ED%99%95%EC%9D%B8%ED%95%98%EC%98%80%EC%8A%B5%EB%8B%88%EB%8B%A4.

---

🚀 서버의 데이터 가져오기

1. React가 서버에 데이터를 요청하는 방법

• 자바스크립트 기반 프론트엔드에서 서버의 데이터를 받아오는 방법은 superagent, request, fetch, axios 등이 있다.
• 이 중 axios는 클라이언트와 서버에서 동일하게 작동하고 다양한 브라우저를 지원하기 때문에 편리하다.
• axios는 http클라이언트 라이브러리인데 비동기 방식으로 http 데이터 요청을 진행한다.
  - 동기 방식: 요청과 결과로 이루어지는 실행흐름의 단위가 딱딱 맞아떨어진다는 의미로 바통터치를 예로 든다.
  • 비동기 방식: 요청과 결과로 이루어지는 실행흐름의 단위가 맞춰지지 않는다는 의미이다. 이전에 요청한 작업의 결과 여부에 관계없이 나열된 순서대로 요청을 날린다.