React / react , express 연결하기

아직 프론트엔드에 익숙하지 않다..

React , express 를 둘다 실행하고 데이터를 불러오는 것을 공부해봤다.

 

1. 작업할 디렉토리를 생성하고 프론트에서 쓸 리엑트를 생성해준다.

$ mkdir my-app
$ cd my-app
$ npx create-react-app client

client 에서 리엑트 실행해서 잘켜지나 확인

$ cd client
$ npm run start

 

 

2 다시 루트로 와서 express를 설치해준다.

• Express > node.js 프레임워크
• nodemon > 코드 수정시 서버를 껐다켰다 안해도 되는 모듈
• cocurrently > 리엑트, 익스프레스 스타트 명령어를 동시에 시켜줄 모듈

npm install express nodemon concurrently

 

 

3. client 와 동등한 위치에 server 폴더를 만들어주고 index로 쓸 server.js 와 api로 쓸 폴더와파일을 만들었다.

api는 이렇게 만드는건지 잘모르겠다..공부해야지..

// api.js

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

router.get('/', (req, res) => {
  res.send(
    {
      product: [
        {
          id: 1,
          no: 1,
          name: "cica",
          price:10000
        },
        {
          id: 2,
          no: 2,
          name: "test2",
          price:20000
        },
        {
          id: 3,
          no: 3,
          name: "test3",
          price:30000
        }
      ]
    }
  );
});

module.exports = router;

// server.js
// express 모듈 불러오기
const express = require("express");

// express 객체 생성
const app = express();
const api = require('./api/api');

app.use('/api', api);

// 기본 포트를 app 객체에 설정
const port = process.env.PORT || 5000;
app.listen(port);

// 미들웨어 함수를 특정 경로에 등록
app.use("/api/data", function (req, res) {
  res.json({ greeting: "Hello World" });
});

console.log(`server running at http ${port}`);

서버를 실행하고 api 로 가면 api.js의 데이터가 잘 나온다.

 

4. 루트디렉토리 package.json 에 concurrently 설정해준다. 그럼 루트에서 npm start 하면 둘다 켜진다.

"scripts": {
    "server": "cd server && nodemon server",
    "client": "cd client && npm start",
    "start": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
  },

 

 

5. 아직 리엑트와 익스프레스가 연결되지 않았다. 서로 다른 서버가 동작중이다.

    리엑트에서 node로 cors 문제해결을 위해 proxy를 사용한다.

    node에서는 CORS를 설치해 설정해준다.

 

- react proxy 설정

# client 디렉토리에서 설치
npm i http-proxy-middleware

client에 있는 package.json에 하단에 추가해준다.

"proxy": "http://localhost:5000/"

 

- node cors 설정

# server 디렉토리에서 설치

npm install cors

// server.js

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

 

6. 이제 프론트에서 백엔드에 접근이 가능하니 데이터를 불러와본다.

   ajax를 하기 위해 fetchAPI 말고 리엑트는 axios를 많이 사용한다고 한다. 사용법은 비슷한것 같지만 아직 익숙하지 않다.

npm i axios

async await 로 비동기 통신을 한다.

데이터를 잘받아오나 보기 위해 useEffect로 로드 되었을때 callApi를 한번 실행해본다.

// client/src/app.js

import axios from "axios";
import { useEffect } from 'react';

function App() {
  const callApi = async () => {
    await axios.get("/api").then((res) => { console.log(res.data.product) });
  };

  useEffect(()=>{
    callApi();
  }, []);
  
  return (
    <div className="App">
	    ...
    </div>
  );
}

export default App;

콘솔을 보면 배열로 잘가지고온다 ㅎㅎ

난 코린이라 고작 요거 해보려고 오랜시간이 걸렸다..

express의 라우팅설정..

axios공부..

async await 공부..

CORS, proxy 공부..

restAPI공부..

맞게 공부한건지 모르겠다..ㅋㅋㅋ 이제 저 받아온 데이터를 뿌려주는걸 공부해야겠다..