본문은 라매개발자 강의 프론트에서 서버에 데이터 요청하는 방법 (React로 fetch, axios 사용하기)를 기반으로 작성되었습니다.
client 폴더로 이동 후 콘솔창에서 create-react-app
을 통해 리액트 초기세팅을 해주자.
npx create-react-app .
안 쓸 파일들은 지워주자.
App.js와 index.js에서 방금 지운 .css 파일이나 logo.svg 파일을 import하는 부분을 지워준다.
App.js를 수정해서 화면에 TODO LIST가 보이도록 한다.
App.js
function App() {
return (
<div className="App">
<h1>TODO LIST</h1>
</div>
);
}
export default App;
콘솔창에 npm start
를 했을 때 화면에 TODO LIST가 대문짝만하게 나온다면 성공!
npm start
서버에 데이터 요청하는 방법은 react 기본 제공 fetch를 이용하는 방법이 있고, axios 라이브러리를 활용하는 방법이 있다.
서버에 데이터를 요청하기 위해 꼭 알아야 하는 것은
📌서버 주소
📌http 메소드 (get, post, ...)
이다. 이 두 가지는 어떤 방법을 써도 필요하다.
먼저... 지난번에 만들었던 서버 포트가 3000번이었는데,
현재 클라이언트에서 3000번 포트를 사용하고 있다.
(주소창에서 localhost:3000이라고 나오면 3000번 포트를 사용하고 있는 것)
server 폴더의 app.js 가장 하단에 있는 서버 포트를 4000번으로 수정해 준다.
app.listen(4000,()=>{
console.log("server start!");
})
포트를 다르게 해 줬으니 서로 데이터를 주고받을 수 있다.
client 폴더의 App.js로 돌아와서 fetch를 이용해 데이터를 받아보자.
function App(){
fetch('https://localhost:4000/api/todo')
.then((res)=>res.json());
.then((data)=>console.log(data));
return(
/*이하 생략*/
서버로부터 데이터를 받아 와서 콘솔에 출력시키는 것이 목표이다.
서버도 켜 주자. 서버 폴더에서 콘솔창을 통해 서버를 실행시켜 준다.
node app.js
실행시켜 보면...
안된다.
잘 읽어 보면 ~ has been blocked by CORS policy. 라는 내용이 있다.
CORS 에러는 자주 나온다. 또 만나면 한번에 박살낼 수 있게 무엇인지 알고 넘어가자.
CORS는 Cross Origin Resource Share의 약자이다.
여기서 Origin은 서로 다른 호스트와 포트를 포함한 데이터의 출처를 말한다.
데이터 교환을 할 때 서로 다른 Origin을 가지고 있으면 함부로 통신하면 안 된다.
시험공부 할 때 내 필기와 다른 학생의 필기를 함부로 볼 수 없듯이...!!
CORS 정책은 일단 Origin이 다르면 데이터 통신을 막는다.
따라서 필요한 경우 데이터를 보내 주는 서버에서 CORS를 허용해 주어야 한다.
필기를 보여주는 학생이 ㅇㅋ! 해야 볼 수 있는 것처럼!
방법은 간단하다. 이미 cors를 해결해주는 미들웨어가 존재한다. 세상 좋다...
서버에 cors를 설치해 주고, 미들웨어 코드를 추가해 준다.
콘솔창
npm i cors
app.js
const cors = require('cors');
app.use(cors());
그럼 받아온 데이터를 콘솔창에서 확인할 수 있다.
/client/App.js
function App() {
fetch('http://localhost:4000/api/todo')
.then((res)=>res.json())
.then((data)=>console.log(data));
return (
<div className="App">
<h1>TODO LIST</h1>
</div>
);
}
export default App;
/server/app.js
const express = require('express')
const app = express()
const cors = require('cors')
const bodyParser = require('body-parser')
app.use(cors());
app.use(bodyParser.json()) // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded
const todoList = [{
id:1,
text:"todo1",
done: false,
}];
app.get('/', function (req, res) {
res.send('Hello World')
})
app.get('/api/todo',(req,res)=>{
res.json(todoList);
})
app.post('/api/todo',(req,res)=>{
const {text, done} = req.body; //body에 text와 done을 담아보냄
todoList.post({
id:id++,
text,
done,
})
}
)
app.listen(4000,()=>{
console.log("server start!");
})
잘 보고 갑니다 :-)