INMATE / express 서버에서 웹 불러오기

서버측에서 특정 url로 사용자가 접속하면 해당되는 웹을 가져와 보여주는 기능을 구현했다.

 

server 디렉터리에 있는 index.js를 보자

const express = require('express');
const mysql = require('mysql');
const cors = require('cors');
const path = require('path')
const app = express();
const port = 3307;

const db = mysql.createConnection({
  host: '127.0.0.1',  //  localhost라고 하게 되면 에러가 뜬다. 127.0.0.1과 localhost는 같다는거 같다.
  user: 'root',
  password: 'oo991128',
  database: 'INMATE',
  port: port  //  DB가 사용하는 포트 이용
});
db.connect();

app.use(cors());

//  기본 주소로 접속 시 서버는 아래의 동작을 한다.
app.get("/restaurant_list", (req, res) => {
  //  mysql에서 query를 이용해 Table의 정보를 SELECT해오는 query를 입력
  db.query("SELECT id,lat,lng,name,adress,number FROM restaurant_list", (err, result) => {
    if (err) {
      res.send(err, 'check');
    }
    res.send(result);
  })
});
app.use(express.static(path.join(__dirname, '../build')));
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../build/index.html'))
})
app.listen(port, () => {
  console.log(`running on port ${port}`);
});

기존에 있던 DB로드 코드들은 위에 위치해주었다.

굳이 위에 위치해준 이유는 아래에 놓게 되면은 /restaurant_list 라는 주소로 이동시제대로 DB데이터들이 로드가 되지 않는 경우가 있었기 때문이다.

 

app.use(express.static(path.join(__dirname, '../build')));
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../build/index.html'))
                                    //  이쪽에 가져올 파일을 적어둔다
})

저 app.get다음에 나오는 *의 의미는 React 쪽에서 라우팅할 수 있게 해주는 표시이다.