[React] React 로 서버와 통신하는 방법

[Suyeon9911]

React 에서 서버통신하기 .. feat.axios

• axios 란 ? Node.js와 브라우저를 위한 Promise 기반 HTTP 비동기 통신 라이브러리
• 비동기로 HTTP 통신을 가능하게 해주고, promise 객체로 return해주기 때문에 response 데이터를 다루기도 쉽습니다.

Axios 설치 및 사용

• 설치 : npm install -D axios
• 환경 변수 설정 : 로컬 서버의 3000번 포트에 접속하기 위한 host url 을 환경 변수로 관리해보겠습니다. 이때 CRA 로 만든 react app 이라면 접두사로 반드시 REACT_APP_ 을 붙여줘야합니다. 그리고 환경 변수를 관리하고자 하는 파일은 반드시 root 폴더에 넣어야 합니다.

// /.env
REACT_APP_API_HOST = http://localhost:3000/

// src/constant.js
export const API_HOST = process.env.REACT_APP_API_HOST;
export const FetchStatus = {
  Request: 'Request',
  Sucess: 'Success',
  Fail: 'Fail',
};

2. Client 에서 proxy 설정
   프록시 서버는 서버와 클라이언트 사이에서 요청을 허용/거부하는 역할을 수행해 Access-Control-Allow-Origin : *의 헤더를 담아 응답해준다고 한다. 중간 단계가 하나 더 생기는 것이기 때문에 속도가 느려지는 단점이 있다.

• http-proxy-middleware 패키지를 사용
• package.json 파일에 "proxy": "http://localhost:5000" 추가

[Suyeon9911]

1. 서버와 클라이언트간의 데이터통신할때 쓰는 모듈중 하나인 Axios 모듈 다운받기
2. 서버와 클라이언트의 포트번호가 다를경우 Cors정책에 위배되기 때문에 Request를 보낼 수없다.
   
3. 다음을 해결하기 위해 Proxy 사용(https://create-react-app.dev/docs/proxying-api-requests-in-development/)

[Suyeon9911]

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

• src-setupProxy.js 파일 생성 후 다음과 같이 코드작성

[Suyeon9911]

[Suyeon9911]

*useEffect 함수: useEffect 함수는 함수형컴포넌트에서 생명주기를 사용하기위해 리액트16.8버전부터 새로나온 함수방식이다 componentDidMount, componentDidUpdate, componentWillUnmount 를 실행해주는 함수이다. 두번째 객체에 빈 배열을 인자로 전달하면 componentDidMount 만 자동으로 실행이된다.

[Suyeon9911]

//클라이언트 POST API 요청
axios.post('http://localhost:3000/api/users/add', {
	id: 4,
	name: '개발이 취미인 사람',
})
//성공시 then 실행
.then(function (response) {
	console.log(response);
})
//실패 시 catch 실행
.catch(function (error) {
	console.log(error);
});

//서버 소스 코드

//임시 데이터
const users = [
 { id: 1, name: "유저1" },
 { id: 2, name: "유저2" },
 { id: 3, name: "유저3" }
];

/**
 * @path {POST} http://localhost:3000/api/users/add
 * @description POST Method
 * 
 *  POST 데이터를 생성할 때 사용된다.
 *  req.body에 데이터를 담아서 보통 보낸다.
 */
app.post("/api/users/add", (req, res) => {

    // 구조분해를 통해 id 와 name을 추출
    const { id, name } = req.body

    //concat 함수는 자바스크립트에서 배열 함수이다. 새로운 데이터를 추가하면 새로운 배열로 반환한다.
    const user = users.concat({id, name});

    res.json({ok: true, users: user})
})

[Suyeon9911]

https://any-ting.tistory.com/16

[Suyeon9911]

nodejs + express / react, axios / javascript

[Suyeon9911]

리액트에서 라우팅을 담당하는 경우

서버에서도 라우팅을 담당해줄 수 있고
리액트에서도 라우팅을 담당해줄 수 있습니다. 리액트는 react-router-dom을 설치하면 됩니다.
그럼 리액트상에서 누가 /list 로 접속하면 글목록 보여주고 /mypage 접속하면 마이페이지도 보여줄 수 있습니다.
근데 리액트 라우터로 /list 페이지를 개발해놨는데 실제 localhost:8080/list 로 직접 URL 입력해서 접속하면 아무것도 안뜹니다.
왜냐면 브라우저 URL창에 때려박는건 서버에게 요청하는거지 리액트 라우터에게 라우팅 요청하는게 아니기 때문입니다.
이걸 리액트가 라우팅하게 전권을 넘기고 싶다면 server.js 에 다음과 같은 코드를 밑에 추가하십시오.

(server.js에 추가)

app.get('*', function (요청, 응답) {
  응답.sendFile(path.join(__dirname, '/react-project/build/index.html'));
});

[Suyeon9911]

리액트로 프론트엔드를 만들 경우 개발흐름

예를 들어서 DB에서 글목록 데이터를 꺼내서 HTML로 보여주고 싶은 경우
이전엔 뭐 글목록.html 페이지를 서버에서 보내줬을 텐데
리액트가 있을 경우 리액트는 index.html 페이지 하나로 개발하기 때문에

1. 서버는 누군가 /list로 GET요청을 하면 DB에서 데이터 꺼내서 보내준다고 API를 짜놓습니다.
2. 리액트는 글목록 페이지를 보여주고 싶으면 서버로 ajax GET요청을 보냅니다.
3. 그럼 데이터 받아오겠죠? 그걸 가지고 html에 집어넣든 맘대로 개발하면 됩니다.

리액트는 페이지가 index.html 하나만 있기 때문에
서버와의 통신은 거의 ajax로 진행하는 것만 잘 알아두면 됩니다.
세션이 있을 경우 회원정보 확인같은 것도 ajax로 알아서 됩니다.

[Suyeon9911]

그리고 nodejs 서버파일엔 const 여러개 모여있는 곳 하단에

app.use(express.json());
var cors = require('cors');
app.use(cors());

이 코드 넣고 시작하셔야 리액트와 nodejs 서버간 ajax 요청 잘됩니다.

[Suyeon9911]

1-1. AJAX (Asynchronous Javascript And XML)
 AJAX란, Javascript의 라이브러리중 하나로 Asynchronous(비동기) Javascript(자바스크립트) And  Xml(비동기식 자바스크립트와 xml)의 약자입니다. 브라우저가 가진 XMLHttpRequest객체를 이용한 
 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며,
 Javascript를 사용한 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.
 정리하면, 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.
출처: https://koras02.tistory.com/48 [Koras02코딩웹:티스토리]

[Suyeon9911]

  # axios VS Fetch API
일반적으로 자바스크립트에서 API를 연동하기 위해서는 보통  Fetch API를 사용하곤 했습니다. 리액트도 자바스크립트
bulit-in 라이브러리중 하나인 Fetch API라는 훌륭한 API 연동 모듈을 사용합니다.
 
하지만 Fetch API 에서는 자바스크립트 built-in 라이브러리라는 특성 때문에 많은사람들이 axios를 사용하는 것을 선호합니다.
 
출처: https://koras02.tistory.com/48 [Koras02코딩웹:티스토리]

[Suyeon9911]

Fetch()는 body 프로퍼티를 사용하고, axios는  data 프로퍼티를 사용합니다.
Fetch의 url이 Fetch()함수의 인자로 들어가고, axios에서는 url이 option객체로 들어갑니다.
Fetch에서 body부분은 stringify()로 되어집니다.

출처: https://koras02.tistory.com/48 [Koras02코딩웹:티스토리]

[Suyeon9911]

axios는 HTTP 통신간에 요구사항을 Compact한 패키지로써 사용하기 쉽게 구성되어 있다.
Axios는 브라우저, Node.js를 위해서 만들어진 Promise API를 활요하는 HTTP 비동기 통신 라이브러리 입니다.
(백엔드와 프론드엔드간에 통신을 위해서 만들어진 AJAX도 더불어 사용하기도 합니다.)

# Axios의 특징

Axios는 운영환경에 따라서 브라우저간 XMLHttpRequest 객체 또는 Node.js의 HTTP API를 사용한다.
Promise(ES6) API를 사용
요청(Request) 응답 (reply)을 JSON 형태로 자동 변경

# Axios 사용법

Axios 다운로드 
HTTP Methods (GET,POST,DELETE,PUT)
Axios 사용해보기

[Suyeon9911]

https://koras02.tistory.com/48