본문은 라매개발자 강의 프론트에서 서버에 데이터 요청하는 방법 (React로 fetch, axios 사용하기)를 기반으로 작성되었습니다.

React로 프론트 화면을 어떻게 구성하는지 알았는데...
서버와 통신 못하는 프론트는 앙꼬 없는 팥빵. 🥯

Node js와 express로 서버를 아주아주 간단하게 만들어보고
fetch와 axios 각각의 방법으로 데이터를 교환해보자.

📌 SERVER

📁 폴더 만들기

가장 먼저 client 폴더와 server 폴더를 만들어 준다.

• axiosPractice
  - client
  - server

서버를 먼저 만들자. vsc 환경이라면 ctr+shift+'(백틱)으로 콘솔창을 켜고 서버 폴더로 이동해준다.

cd server

✅ Node.js, Express 설치

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 폴더 안에 있어야 한다.

✊ get으로 데이터 반환

서버 메모리에 데이터를 저장해준다.
변수 선언부에 todoList를 만들어 보자.

const todoList = [{
    id:1,
    text:"todo1",
    done: false,
}];

get으로는 데이터를 반환한다.
변수 선언부 하단에 get을 만든다.

app.get('/api/todo',(req,res)=>{
    res.json(todoList);
})

👊 post로 데이터 추가

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!");
})

혹시 오류가 있다면 댓글 남겨주세요. 감사합니다. 😊