본문은 라매개발자 강의 프론트에서 서버에 데이터 요청하는 방법 (React로 fetch, axios 사용하기)를 기반으로 작성되었습니다.
React로 프론트 화면을 어떻게 구성하는지 알았는데...
서버와 통신 못하는 프론트는 앙꼬 없는 팥빵. 🥯
Node js와 express로 서버를 아주아주 간단하게 만들어보고
fetch와 axios 각각의 방법으로 데이터를 교환해보자.
가장 먼저 client
폴더와 server
폴더를 만들어 준다.
서버를 먼저 만들자. vsc 환경이라면 ctr+shift+'(백틱)
으로 콘솔창을 켜고 서버 폴더로 이동해준다.
cd server
node js 프로젝트를 하니까 콘솔창에 npm init
으로 package.json을 만들어준다.
npm init
express도 사용할 거니까 콘솔창에 npm i express
를 입력해 설치해준다.
npm i express
npm express 문서에 들어가서 가장 상단에 있는 코드를 복붙해준다. express 초기화 코드이다.
const express = require('express')
const app = express()
app.get('/', function (req, res) {
res.send('Hello World')
})
app.listen(3000,()=>{ //콜백함수, 서버가 잘 켜졌는지 확인하기 위해
console.log("server start!");
})
서버 만들기 끝! 콘솔창에서 서버를 실행시켜주자.
node app.js
콘솔창에 server start!가 뜨면 성공!
만약 실패했다면 콘솔창에서 경로를 확인해 보자. 현재 server 폴더 안에 있어야 한다.
서버 메모리에 데이터를 저장해준다.
변수 선언부에 todoList를 만들어 보자.
const todoList = [{
id:1,
text:"todo1",
done: false,
}];
get으로는 데이터를 반환한다.
변수 선언부 하단에 get을 만든다.
app.get('/api/todo',(req,res)=>{
res.json(todoList);
})
post로 데이터를 추가하기 위해서는 body에 데이터를 담아 보내야 한다.
그렇게 하기 위해 bodyParser가 필요하다.
위 express 웹문서에서 bodyParser 부분을 찾아 복붙한다.
app.use(bodyParser.json()) // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded
그러면 request에서 body를 사용할 수 있다.
let id=2;
app.post('/api/todo',(req,res)=>{
const {text, done} = req.body; //body에 text와 done을 담아보냄
todoList.push({
id:id++,
text,
done,
})
}
여기까지 서버 완성!
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
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);
})
let id=2;
app.post('/api/todo',(req,res)=>{
const {text, done} = req.body; //body에 text와 done을 담아보냄
todoList.push({
id:id++,
text,
done,
});
return res.send('success');
}
)
app.listen(3000,()=>{
console.log("server start!");
})
혹시 오류가 있다면 댓글 남겨주세요. 감사합니다. 😊
좋은 글 감사드려요.
의견을 붙이자면 "npm express 문서에 들어가서 가장 상단에 있는 코드를 복붙해준다. express 초기화 코드이다." 부분에서 "app.js파일을 신규생성하자"라는 문구를 넣어주시면 완벽할거 같아요.(package.json파일인줄 알았어요 ^^;)