그동안은 Client가 없어서 Postman으로 보냈으나, 이제는 Client쪽도 구현이 됐기 때문에 AXIOS를 통해서 Request를 보내보자.
axios 라이브러리를 다운받자.
$npm install axios --save
간단하게 테스트해보자. LandingPage.js를 아래와 같이 수정하고 여기서 보낸 getRequest를 받기 위해 server쪽인 index.js에도 두번째 코드를 추가해주자.
import React, {useEffect} from 'react'
import axios from 'axios';
function LandingPage(){//Functional Component 만들기
useEffect(() => {
axios.get('api/hello') //endpoint. getRequest를 server 즉 index.js로 보내질 것
.then(response => console.log(response.data)) //server 에서 돌아온 response를 콘솔창에 출력해봄
}, [])
return(
<div>
LandingPage
</div>
)
}
export default LandingPage
이제 서버를 켜보자. 이때 client 디렉토리가 아닌 그 상위 디렉토리인 boler-plate 디렉토리에서 아래의 명령어를 실행시켜야한다. 또한 이전에 디렉토리 구조를 변경했기 때문에 package.json 파일에서
"backend": "nodemon server/index.js" 로 수정해줘야 백엔드가 실행된다.
$npm run backend
이제 프론트 서버도 켜보자. client 디렉토리로 이동 후
$npm run start
를 실행하자.
결과
request가 잘 갔다 왔는지 확인을 위해 콘솔창을 켜보자. (fn + F12)
에러가 발생했다.
이유 : 사용자의 서버 포트는 5000번이고 클라이언트 포트는 3000번이기 때문 => 클라이언트가 3000번으로 요청을 보냈으나 서버는 받지 못함
그럼 5000번으로 요청을 보내보자.
useEffect(() => {
axios.get('http://localhost;5000/api/hello') //endpoint. getRequest를 server 즉 index.js로 보내질 것
.then(response => console.log(response.data)) //server 에서 돌아온 response를 콘솔창에 출력해봄
}, [])
CROS 에러
여전히 에러가 있다.
그 이유는 CORS 정책 때문이다. 만약 외부의 다른 클라이언트에서 요청을 보내면 보안상의 이슈가 있을 수 있기 때문에 CORS 정책이 있는것! (CORS란? : Cross-Origin Resource Sharing의 약자로 서로 다른 Origin 사이에서 자원을 공유할 때 사용되는 정책)
import React from 'react'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import LandingPage from './components/views/LandingPage/LandingPage';
import LoginPage from './components/views/LoginPage/LoginPage';
import RegisterPage from './components/views/RegisterPage/RegisterPage';
function App() {
return (
<Router>
<div>
{/*
A <Switch> looks through all its children <Route>
elements and renders the first one whose path
matches the current URL. Use a <Switch> any time
you have multiple routes, but you want only one
of them to render at a time
*/}
<Switch>
<Route exact path="/" component={LandingPage} />
<Route exact path="/login" component={LoginPage} />
<Route exact path="/register" component={RegisterPage} />
</Switch>
</div>
</Router>
);
}
export default App;
