[React] 서버에 데이터요청하기(express/ axios)

[유튜브 강의 참고 정리] 라매개발자

<API> 

기본제공 fetch

라이브러리 axios (블로그는 이것 사용)

---

server가 없을때 임시로 만들기=>express 라이브러리 이용

1. 설치

npm i express

https://www.npmjs.com/package/express

express

 

2. 위 npm에서 express검색하면 나오는 설명을 참고한다.

아래 코드는 사이트위쪽에 위치) 파일에 코드 복붙

const express = require('express')
const app = express()

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(3000)

 

node로 터미널에서 나오는지 확인하려면:

코드중 아래처럼 console.log작성후

app.listen(3000, () => {
  console.log('server start!');
});

npde 파일명 을 터미널에 작성하면 server start! 가 나온다.

 

브라우저에서 확인:

http://localhost:4000/ 으로 접속하면 Hello world 가 출력되어있음(터미널 파일경로+node 파일명 쳐서 실행시켰는지 확인)

▼http://localhost:4000/api/todo

 

*POST: (body parser): client에서 body에 데이터를 담아보내면 꺼내쓰기 좋게 해주는 parser

npm 사이트에서 docs>body-parsing검색>req.body선택)

https://expressjs.com/en/api.html#req.body

Express 4.x - API Reference

코드위쪽에 추가함

app.use(express.json()); // for parsing application/json
app.use(express.urlencoded({ extended: true }));

---

<axios 사용하기>

1. 설치

npm i axios

 

2.import 해주기

import axios from 'axios';

 

 

---

CORS

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

 

CORS 오류

 

Access to XMLHttpRequest at 'http://localhost:3000/api/todo' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

client: localhost:3000(react 개발서버)

server: localhost:4000

=>Origin이 다르다.(naver.com 과 google.com이 다른 것처럼 아예 환경이 다름)

>데이터를 줄지말지는 server가 정하는 것이기 때문에 origin이 달라도 데이터를 꺼내갈수 있다고 정해주는건 server에서 정해야한다.>쉽게해주는 라이브러리: npm 에서 cors 검색

https://www.npmjs.com/package/cors

cors

 

1.설치

npm i cors

 

2. 코드 붙이기

const cors = require('cors'); //import

app.use(cors());
//괄호안에 아무것도 안넣으면 어떤 오리진이든 데이터를 꺼내갈 수 있다는 뜻

 

---

위에 반영하여 만든 최종 코드

 

 

src>App.jsx

import React from 'react';

import './App.css';

import {useEffect, useState} from 'react';

import axios from 'axios';

const SERVER_URL='http://localhost:4000/api/todo';

function App() {
 const [todoList,setTodoList]=useState(null);

 const fetchData=async()=>{
  const response=await axios.get(SERVER_URL);
  setTodoList(response.data);
 };
 useEffect(()=>{
  fetchData();
 },[]); //안하면 무한 리랜더링됨(setState때마다 실행되기때문)

 const onSubmitHandler=async(e)=>{
  e.preventDefault();
  const text=e.target.text.value;
  const done=e.target.done.checked;
  await axios.post(SERVER_URL,{text,done});
  fetchData();//다시 setState해야 바뀐내용이 post된다.
 };

  return (
    <div className="App">
        <h1>TODO LIST</h1>
        <form onSubmit={onSubmitHandler}>
          <input type="text" name='text'/>
          <input type="checkbox" name='done' />
          <input type="submit" value="추가" />
        </form>
        {/* ?을 붙여주어 null일때 map안되는 오류막기(있으면 뒤에실행)*/}
        {todoList?.map((todo)=>(
          <div key={todo.id} style={{display:'flex'}}>
            <div>{todo.id}</div>
            <div>{todo.text}</div>
            <div>{todo.done?'Y':"N"}</div>
          </div> 
        ))}
    </div>
       
  );
};

export default App;

 

src>fetch>server>app.js

//express 기본 설정
const express = require('express');
const app = express();
const cors = require('cors'); //cors

//cors 미들웨어 추가(오류해결)
app.use(cors());

//body에 데이터 담아보내기
app.use(express.json()); // for parsing application/json
app.use(express.urlencoded({ extended: true }));

let id = 2;
const todoList = [
  {
    id: 1,
    text: '할일 1',
    done: false,
  },
];

/* app.get('/', function (req, res) {
  res.send('Hello World');
}); */

app.get('/api/todo', (req, res) => {
  res.json(todoList);
});

//data넣어주기
app.post('/api/todo', (req, res) => {
  const { text, done } = req.body;
  /* console.log('req.body:', req.body); */
  todoList.push({
    id: id++,
    text,
    done,
  });
  return res.send('success');
});

app.listen(4000, () => {
  console.log('server start!');
});

 

---

* fetch vs axios

 

---

참고영상

https://www.youtube.com/watch?app=desktop&v=d6suykcsNeY