[노드 리액트 기초 강의] #19 CRA to Our Boilerplate ~#22 CORS 이슈, Proxy 설정

본 글은 John Ahn 님의 [노드 리액트 기초 강의]를 수강하며 작성하였습니다.

 

 

#19 CRA to Our Boilerplate

 

src 하위에 위와같이 폴더와 파일들을 생성해준다. 생성해준 .js파일들에는 다음과 같은 형식의 코드를 작성한다.

<Register.js>

import React from 'react'

function Registerage(){
    return(
        <div>
            Registerage
        </div>
    )
}
export default RegisterPage;

 

#20 React Router Dom

npm i react-router-dom을 설치해준다. 

reactrouter.com/web/example/basic 여기에서

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

이 부분을 app.js에 넣어준다. 다른 파일의 함수를 선언하고 사용하기 위해 다음 내용도 넣어준다.

import LandingPage from './components/views/LandingPage/LandingPage'
import LoginPage from './components/views/LoginPage/LoginPage'
import RegisterPage from './components/views/RegisterPage/RegisterPage'

App.js의 함수 안에는 다음 코드를 넣어준다.

function App() {
  return (
    <div className="App">
      <Router>
      <div>
        <Switch>
          <Route exact path="/">
            <LandingPage />
          </Route>
          <Route path="/login">
            <LoginPage/>
          </Route>
          <Route path="/dashboard">
            <RegisterPage />
          </Route>
        </Switch>
      </div>
    </Router>
    </div>
  );
}

여기서

<Route exact path="/">
	<LandingPage />
</Route>

은

<Route exact path="/" component={LandingPage}/>

로 바꿀 수 있다.

 

#21 데이터 Flow & Axios

이전에 만들었던 서버에서는 client가 없어서 postman으로 요청을 보냈었지만 이제는 클라이언트로 보낼 수 있게 되었다. 이를 위해 우선 axios 를 설치해야한다. npm i axios를 실행시켜주자. LandingPage.js에 가서 코드를 다음과 같이 수정한다. axios로 server폴더의 index.js에서 같은 엔드포인트에서 get 할 수 있게 된다.

import axios from 'axios';
import React,{useEffect} from 'react';

function LandingPage(){
    useEffect(()=>{
        axios.get('/api/hello')
    },[])
    return(
        <div>
            LandingPage
        </div>
    )
}
export default LandingPage;

그리고 server의 index.js에서

app.get("/api/hello",(req,res)=>{
  res.send("안녕하세요~^^")
})

이 부분을 추가한다. 이렇게 send한 부분을 LandingPage에서 받기위해 LandingPage의 useEffect 부분을 수정한다.

useEffect(()=>{
	axios.get('/api/hello').then(response=>console.log(response.data))
},[])

코드에 대해 설명하면 LandingPage를 실행시키면 제일 먼저 useEffect부분을 실행시킨다. useEffect는 /api/hello라는 엔드포인트를 get 리퀘스트한다. 이렇게 보낸 후 돌아오는 응답을 콘솔로 찍는다.

 

실행시키기 위해 cd server에서 npm run backend를 하고 cd client에서 npm run start를 해준다.

그러면 클라이언트는 3000번 포트라 3000번포트에서 서버를 찾기 때문에 에러가 생긴다(현재 5000번으로 서버를 설정한 상태) . 이 부분을 해결하기 위해

useEffect(()=>{
	axios.get('http://localhost:5000/api/hello').then(response=>console.log(response.data))
    },[])

로 바꾸어준다. 실행싵키면 또 에러가 발생한다.

 

#22 CORS 이슈, Proxy 설정

위처럼 서로 다른 origin 끼리 통신할 수 없는 것를 CORS 정책이라한다. 해결방법이 여러가지 있는데 그 중 한가지를 해보겠다. ( create-react-app.dev/docs/proxying-api-requests-in-development/ 참고)

npm i http-proxy-middleware를 설치해준다. 그리고 src/serupProxy.js 파일을 만들고 다음 코드를

const { createProxyMiddleware } = require('http-proxy-middleware');

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

넣어준다. 그리고 LandingPage.js를

import axios from 'axios';
import React,{useEffect} from 'react';

function LandingPage(){
    useEffect(()=>{
        axios.get('/api/hello')
        .then(response=>console.log(response.data))
    },[]);
    return(
        <div>
            LandingPage
        </div>
    )
}
export default LandingPage;

로 바꾸면 콘솔 출력이 잘 되는 것을 볼 수 있다.