랜덤명언 REST API 만들어보기

개발 환경 셋팅

package.json 만들기

yarn init

npm init

node.js 는 아직 자바스크립트의 es6 문법이 적용되지 않는다.
es6 문법을 이용하려면 , index.js 처럼 모듈로 만들어놓으면 된다.

express 설치

- Node.js 를 위한 빠르고 개방적인 간결한 웹 프레임워크

- node.js를 사용하여 서버를 개발하고자 하는 개발자들을 위하여 서버를 쉽게 구성할 수 있게 만든 프레임워크

정리
: express 란 NodeJs를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체

yarn add express

npm i express

서버 기본 셋팅

express require

const express = require("express")
// = import express from "express"

express 를 사용해 app 을 만들기

const app = express()

listen 메소드

- request(컴퓨터(서버)가 누군가의 요청)를 알아채고 무언가 해야된다는 것을 뜻한다.

- 포트번호와 callback 함수가 들어간다.

app.listen(4000, () => {
    console.log("start server!")
})

node 로 서버를 불러오기

터미널에 아래와 같은 명령어를 사용한다.

node ./index.js

웹 브라우저로 서버 열기

웹 브라우저 주소에 아래와 같이 작성한다.

localhost:4000 (포트는 자기가 작성한 포트로)

url 에는 정보를 요청하거나, 응답할 때
GET, POST, DELETE, PUT 이렇게 4가지를 알고 있어야한다.

응답하기

- request, response를 매개변수로 받아올 수 있다.

1. GET

app.get('/', (req, res) => {
    res.send("hello")
})

2. POST

app.post('/', (req, res) => {
    res.send("<h1>I'm post</h1>")
})

3. DELETE

app.delete('/', (req, res) => {
    res.send("<h1>I'm delete</h1>")
})

4. PUT

app.put('/', (req, res) => {
    res.send("<h1>I'm put</h1>")
})

Postman 을 사용해서 요청하기

1. GET

- 보통 데이터를 갖고오거나 조회할 때 사용한다.

2. POST

- 새로운 데이터를 생성할 때 사용한다.

3. DELETE

- 데이터를 제거할 때 사용된다.

4. PUT

- 데이터를 전부 수정한다.

5. PATCH

- 데이터의 일부분만 수정한다. ( PUT 을 많이 사용함 )

nodemon

- 서버를 항시 켜져있을 수 있도록 해줌

npx nodemon index.js

사용해보기

1. index.js 에서 아래와 같이 수정한다.

app.get('/', (req, res) => {
    res.send("<h1>I'm get~~~</h1>")
})

2. postman 에서 다시 get 요청을 한다.

랜덤 명언 데이터 갖고오기

https://github.com/golbin/hubot-maxim/blob/master/data/maxim.json

이분의 데이터를 갖고왔습니다.

data.json

- 데이터를 갖고와 , 저장해줍니다 (양이 많아 첨부하지 않았음)

index.js

1. fs 모듈 불러오기

const fs = require("fs")

2. data.json 받아오기

const data = JSON.parse(fs.readFileSync("data.json", "utf-8"))
// console.log(data)

3. 받아온 data 를 보내기

app.get('/', (req, res) => {
    res.json(data)
})

json 으로 반환해서 보내기 위해서 json 메소드를 사용했음.

데이터 다루기

Index.js & postman 사용

1. data 추가하기

- data 를 추가할 때 json 형식으로 데이터를 받아올 수 있도록 설정해주어야한다.

기본적으로 body 에 row 데이터를 받아오는게 허용이 되어있지 않다.
express.json() 을 호출해서 거기서 반환된 미들웨어를 거쳐가 필터링을 해준다고 생각하면 편하다고 한다.

app.use(express.json())

- 아래와 같이 console.log() 로 추가된 데이터를 눈으로 확인

app.post('/', (req, res) => {
    console.log(req.body)
    res.send("<h1>i'm post</h1>")
})

- 아래와 같이 JSON 형식으로 데이터 입력해서 send 하면 console.log() 로 추가된 데이터가 보인다.

- 추가된 데이터를 진짜 데이터에 추가해주기

app.post('/', (req, res) => {
    console.log(req.body)

    data.push({
        author: req.body.author,
        message : req.body.message
    })

    res.json({
        rs:true
    })
})

rs 란?
: result ( 즉, 추가된 데이터의 결과를 말함 )

- postman 에서 작업해주기

1. 먼저 추가 된 데이터를 post send 해주기.

2. get 으로 데이터를 조회하면 아래와 같이 맨 아래에 데이터가 추가 된 모습이 보인다.

- 데이터가 잘못되었을 때 에러핸들링하기

app.post('/', (req, res) => {

    const {author, message} = req.body

    if(!(author && author.length > 0 && message && message.length > 0)){
        res.json({
            rs:false
        })
        return;
    }

    data.push({
        author: req.body.author,
        message : req.body.message
    })

    res.json({
        rs:true
    })
})

author 이나 message의 데이터가 잘못되었을 경우, rs: false 라고 알려준다.

데이터 삭제하기

1. 삭제할 데이터를 path parameter 를 이용해서 설정해줌.

app.delete('/:id', (req, res) => {
    const {id} = req.params
    console.log(typeof id)

    res.json({
        rs: true
    })
})

2. parameter 가 이상있는 경우 에러핸들링

1. 받아온 파라미터(id) 가 Number 가 아닐경우
2. 받아온 파라미터의 숫자가 data 의 총 갯수보다 많을 경우, 혹은 0보다 적을 경우

app.delete('/:id', (req, res) => {
    const {id} = req.params
    const num = parseInt(id)

    if(isNaN(id)){
        res.json({
            rs: false,
            msg: "id is not number!"
        })
        return;
    }else if(num >= data.length || num < 0){
        res.json({
            rs: false,
            msg: "num is not vaild"
        })
        return;
    }

    res.json({
        rs: true
    })
})

3. delete 를 사용해 데이터 삭제하기

app.delete('/:id', (req, res) => {
    const {id} = req.params
    const num = parseInt(id)

    if(isNaN(id)){
        res.json({
            rs: false,
            msg: "id is not number!"
        })
        return;
    }else if(num >= data.length || num < 0){
        res.json({
            rs: false,
            msg: "num is not vaild"
        })
        return;
    }

    delete data[num];
    

    res.json({
        rs: true
    })
})

delete data[num]

4. 삭제 된 데이터 자리에 null이 생길 때

delete data[num] // X

data.splice(num, 1) // O

데이터 수정하기

- 데이터를 추가하고 삭제하는 로직이랑 비슷하고, 거기서 사용한 코드를 복사한 뒤 아래와 같은 코드를 변경해주면 된다.

app.put('/:id', (req, res) => {
    const {author, message} = req.body

    if(!(author && author.length > 0 && message && message.length > 0)){
        res.json({
            rs:false,
            msg: "잘못된 데이터입니다."
        })
        return;
    }

    const {id} = req.params
    const num = parseInt(id)

    if(isNaN(id)){
        res.json({
            rs: false,
            msg: "id is not number!"
        })
        return;
    }else if(num >= data.length || num < 0){
        res.json({
            rs: false,
            msg: "num is not vaild"
        })
        return;
    }

    data[num] = {
        author: req.body.author,
        message : req.body.message
    }

    res.json({
        rs:true
    })
})

   data.push]({
        author: req.body.author,
        message : req.body.message
    }) // X
   
    data[num] = {
        author: req.body.author,
        message : req.body.message
    } // O

parameter에 수정하고 싶은 데이터의 인덱스를 넣어준 뒤, 데이터를 수정하고 send

특정한 데이터 갖고오기

app.get('/:id', (req,res) => {
    const {id} = req.params
    const num = parseInt(id)

    if(isNaN(id)){
        res.json({
            rs: false,
            msg: "id is not number!"
        })
        return;
    }else if(num >= data.length || num < 0){
        res.json({
            rs: false,
            msg: "num is not vaild"
        })
        return;
    }

    res.json(data[num])
})

랜덤 명언 갖고오기

app.get('/random', (req,res) => {

   const rand =  Math.floor(Math.random() * data.length)
    res.json(data[rand])
    
})

만약에 id parameter 로직보다 아래에 있을 경우, 먼저 id 를 string 으로 인식해, number 가 아니라고 오류가 나오게 된다.
그래서 꼭 ! id parameter 로직보다 위에 있어야 한다.

데이터 검색 기능

app.get('/', (req, res) => {
    const {author, message} = req.query
    console.log(author, message)
    res.json(data)
})

1. data 를 복제해준다. ( 필터링 된 데이터일 수 있으니까 )

app.get('/', (req, res) => {
    const {author, message} = req.query
    
    let _data = data // 데이터가 필터링 된 데이터일 수 있으니까 데이터 복사
})

2. if 문을 사용해, filter 메소드로 받아온 query 가 포함되어있는지를 필터링한다.

app.get('/', (req, res) => {
    const {author, message} = req.query
    
    let _data = data // 데이터가 필터링 된 데이터일 수 있으니까 데이터 복사
    if(author){
        _data = _data.filter(value => value.author.includes(author))
    }
    if(message){
        _data = _data.filter(value => value.message.includes(message))
    }
    res.json(_data)
})

3. 코드 리팩토링 해보기

app.get('/', (req, res) => {
    const {author, message} = req.query
    
    res.json(data
        .filter(value => author ? value.author.includes(author) : true)
        .filter(value => message ? value.message.includes(message) : true))
})

저작자표시 비영리

'Backend' 카테고리의 다른 글

Postman으로 Rest API 문서화하기 (0)	2023.02.06

진이의 개발공부

랜덤명언 REST API 만들어보기

개발 환경 셋팅

package.json 만들기

express 설치

서버 기본 셋팅

express require

express 를 사용해 app 을 만들기

listen 메소드

node 로 서버를 불러오기

웹 브라우저로 서버 열기

응답하기

Postman 을 사용해서 요청하기

nodemon

랜덤 명언 데이터 갖고오기

data.json

index.js

1. fs 모듈 불러오기

2. data.json 받아오기

3. 받아온 data 를 보내기

데이터 다루기

1. data 추가하기

데이터 삭제하기

데이터 수정하기

특정한 데이터 갖고오기

랜덤 명언 갖고오기

데이터 검색 기능

'Backend' 카테고리의 다른 글

티스토리툴바

랜덤명언 REST API 만들어보기

개발 환경 셋팅

package.json 만들기

express 설치

서버 기본 셋팅

express require

express 를 사용해 app 을 만들기

listen 메소드

node 로 서버를 불러오기

웹 브라우저로 서버 열기

응답하기

Postman 을 사용해서 요청하기

nodemon

랜덤 명언 데이터 갖고오기

data.json

index.js

1. fs 모듈 불러오기

2. data.json 받아오기

3. 받아온 data 를 보내기

데이터 다루기

1. data 추가하기

데이터 삭제하기

데이터 수정하기

특정한 데이터 갖고오기

랜덤 명언 갖고오기

데이터 검색 기능

'Backend' 카테고리의 다른 글

'Backend' Related Articles

티스토리툴바