Node js, React 파일 관리 시스템 만들기 (2)

프로젝트 전체 링크

 

이전 - (1) Project Setting

현재 - (2) fetch로 GET 요청하고 응답 받기

다음 - (3) 파일과 폴더 목록 불러오기

 

깃허브에서 코드 확인하기

---

GET 방식으로 웹 서버에 데이터를 요청하고 응답받을 수 있다.

 

먼저 server/routes 폴더 아래에 nodetest.js를 추가한다.

현재 express를 이용해서 서버를 만들고 있다. 

express의 Router를 이용하면 code를 분리할 수 있다.

React에서 요청이 오면 connect!!를 출력하고, 응답으로 result : success를 주는 코드다.

//nodetest.js

const express = require("express");
const router = express.Router();

router.get("/", (req, res) => {
  console.log("connect!!");
  res.send({ result:"success" });
  
  return;
});

module.exports = router;

 

라우터가 추가되었으므로 server.js에서 nodetest를 사용하겠다고 선언해야 한다.

아래와 같이 코드를 바꾼다.

//server.js

const express = require('express');
const app = express();
const nodetest = require('./routes/nodetest');

const cors = require('cors'); /* cors 정책 */
app.use(cors()); 

app.use('/nodetest', nodetest);
app.listen(3002, () => console.log('Node.js Server is running on port 3002...'));

 

CORS 정책 때문에 cors를 설치하고 cors처리하는 코드도 추가하였다.

npm install cors --save

---

React의 App.js에 아래의 코드를 추가한다.

fetch를 이용하여 "Server URL/route된 js 이름"으로 GET 요청을 보낸다.

response는 nodetest에서 res가 보낸(send) 응답이다.

이 응답을 json으로 만들어 출력해보자.

const nodeTest = () => {
  fetch(`http://192.168.55.120:3002/nodetest`)
  .then((response) => response.json())
  .then((data) => console.log(data));
}

...

<button onClick={nodeTest}>서버 연결</button>

 

이제 서버를 실행한다.

 

서버 연결 버튼을 눌러보자.

 

nodetest가 send한 결과를 react가 응답받은 것을 알 수 있다.

---

REQUEST Query

 

nodeTest 함수에서 변수를 server로 보내보자.

const nodeTest = () => {
  let str = "hello";
  let num = 1234;
  fetch(`http://192.168.55.120:3002/nodetest?str=${str}&number=${number}`)
  .then((response) => response.json())
  .then((data) => console.log(data));
}

 

string 타입의 str와 number 타입의 num 변수를 ?로 추가하여 server로 보낼 수 있다.

그리고 & 를 이용하여 2개 이상의 변수를 보낼 수 있다.

 

nodetest에서는 request의 query를 이용하여 값을 받을 수 있다.

값이 제대로 받아졌는지 확인하기 위해 log를 출력하고, typeof를 이용하여 변수의 type도 확인해보자.

(node 코드가 반영되려면 재실행해야 한다.)

//nodetest.js

...

router.get("/", (req, res) => {
  let getStr = req.query.str;
  let getNum = req.query.num;

  console.log(`getStr : ${getStr}, type : ${typeof getStr}`);
  console.log(`getNum : ${getNum}, type : ${typeof getNum}`);
  
  res.send({ result:"success" });

  return;
});

getStr과 getNum은 react에서 보낸 str과 num에서 보낸 값이지만, num의 경우에도 string인 것을 알 수 있다.

즉, query로 받은 값은 모두 string이 된다.

 

따라서 number로 인식하기 위해서는 아래와 같이 Number를 이용하여 string을 number로 변경해야 한다.

let getNum = Number(req.query.num);

 

request에서 받은 값의 type을 주의해야 한다.

 

최종 코드는 아래와 같다.

 

Node js

//nodetest.js

const express = require("express");
const router = express.Router();

router.get("/", (req, res) => {
  let getStr = req.query.str;
  let getNum = Number(req.query.num);

  console.log(`getStr : ${getStr}, type : ${typeof getStr}`);
  console.log(`getNum : ${getNum}, type : ${typeof getNum}`);
  
  res.send({ result:"success" });

  return;
});

module.exports = router;

 

//server.js

const express = require('express');
const app = express();
const nodetest = require('./routes/nodetest');

const cors = require('cors');
app.use(cors());

app.use('/nodetest', nodetest);
app.listen(3002, () => console.log('Node.js Server is running on port 3002...'));

 

React 

//App.js
import React, { useState } from "react";

import FileUpload from "./components/FileUpload";
import MyTable from "./components/MyTable";

const csvObjectDefault = {
  HEIGHT: 0,
  WIDTH: 0,
  csv: [],
};

const nodeTest = () => {
  let str = "hello";
  let num = 1234;
  fetch(`http://192.168.55.120:3002/nodetest?str=${str}&num=${num}`)
  .then((response) => response.json())
  .then((data) => console.log(data));
}

const App = () => {
  const [csvObject, setCsvObject] = useState(csvObjectDefault);
  return (
    <div>
      <button onClick={nodeTest}>서버 연결</button>
      <button onClick={() => console.log(csvObject)}>print csv</button>
      <div className="App">
        <FileUpload setCsvObject={setCsvObject} />
        <MyTable csvFile={csvObject}/>
      </div>
    </div>
  );
};

export default App;

---

이전 - (1) Project Setting

다음 - (3) 파일과 폴더 목록 불러오기