리액트 node 서버 연결(2)

리액트 package.json 에서 proxy 설정

{
  "name": "front",
  "version": "0.1.0",
  "private": true,
  "proxy":"http://127.0.0.1:8000/", // 서버로 설정한 호스트 
  .
  .
  .

노드 파일에서 간단히 json형태의 데이터를 보내는 server.js 설정

import express from 'express';
import cors from 'cors';

const server = express();
const PORT = 8000;

server.use(express.json()); // json형태 파일을 주고받기 위해
server.use(express.urlencoded());
server.use(cors();

server.get('/',(req,res)=>{
  res.json({name:'hong'});
});

server.listen(PORT,()=>console.log(`server running! ---> ${PORT}`));

노드 서버로 axios.get

import { useEffect, useState } from 'react';
import './App.css';
import axios from 'axios';

function App() {
  const [name, setName] = useState('');

  useEffect(() => {
    axios.get('http://127.0.0.1:8000/') //axios는 결과값이 객체로 전송
      .then((res)=>console.log(res.data))
      .catch((err)=>console.log(`에러 -> ${err}`));

  }, [])
  
  return (
    <div>
      front App
    </div>
  );
}

export default App;

결과 : json 데이터 잘 받음