comments에 대한 CRUD 요청 만들어보기

GET, POST, PUT, DELETE 메서드로 comment 에 대한 각각의 요청을 구현해보자!

 

[사용된 환경]

- json-server 

- Axios

 

[테스트 순서]

1. json-server npm install

1-2. db.json 파일 생성

3. axios로 비동기통신

4. 서버와 통신해보기

 

---

🔶 1. json-server 사용하기

기본 사용 참고 사이트
json-server는 REST API를 구축해주는 라이브러리이다.
REST API 서버의 기본적인 기능을 갖추고 있지만 산업용은 아니고 서버 통신 TEST용도로 쓰인다.

 

🔹1) 설치하기
https://www.npmjs.com/package/json-server

json-server

NPM을 통해서 설치할 수 있다.
전역으로 설치하여 별도의 setting없이 사용한다.

$ npm init -y
$ npm install json-server --save-dev 또는
$ npm install -g json-serverdb

 

🔹2) db.JSON 파일 생성

• db.json 파일은 데이터베이스 역할을 한다.

{
  "posts": [
    {
      "id": 1,
      "title": "제목 됩니까?",
      "content": "내용이 되나요?"
    },
    {
      "title": "adsf",
      "content": "asdf",
      "id": 2
    },
  ]
}

🔹3) 디렉토리 안에서 서버 실행하기

json-server --watch db.json
json-server --watch db.json --port4000

• 기본 포트는 3000으로 실행된다.
• --port넘버를 지정해주면 개발서버가 변경된다.

 

🔶 1. axios 비동기 통신

 Axios는 비동기 통신을 도와주는 js 라이브러리이다.

설치 방법은 CDN과 NPM 방식이 있다. 

npm i axios

 

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

나는 현재 노드사용 하지 않고 CDN으로 라이브러리를 설치했다. 

axios 말고도 내장 기능인 fetch api 를 이용해도 비동기 통신을 구현할 수 있다.

axios와 fetch가 유사한 형식으로 통신구현을 하기에 둘 중 하나라도 사용할 수 있으면 둘 다 사용가능!

 

[메소드 관련 명령어]

• axios.get
• axios.post
• axios.put
• axios.delete
• axios.patch

🔶 4.  서버와 통신해보기

[그럼 실전으로 해보자!]

클라이언트 없이 따로 서버통신의 테스트는 reqres랑 postman으로 해보았다. 

reqres는 fakeserver로서 Mock서버를 사용할 수 있다. 

그건 조금 밑에다가 다시 정리할 예정이므로.. 

 

먼저 DOM요소로 화면에 서버에서 불러온 데이터 출력하고 보내는걸 테스트 해보았다. 

 

HTML에는 각 메소드별 함수 호출될 버튼을 생성했고 

input에 값을 입력하면 post되는 테스트랑 list로 출력되게 get을 해볼것이다. 

  <input type="text" name="title">
  <input type="text" name="content">

  <button onclick="getComment()" type="button">GET</button>
  <button onclick="postComment()" type="button">POST</button>
  <button onclick="putComment()" type="button">PUT</button>
  <button onclick="deleteComment()" type="button">DELETE</button>

  <div class="print-data"><ul></ul></div>

---

 

🔹 post요청

메서드와 통신할 url 그리고 보내려는 postParams를 생성했다. 

콘솔로 결과 값을 출력해보았다. 

• post 메서드의 두번째 인자는 본문으로 보낼 때 데이터를 설정한 객체 리터럴에 전달한다. 
• 로그인, 회원가입 등 사용자가 생성한 파일을 서버에 업로드 할 때 사용한다. 
• post를 사용하면 쿼리스트링이 남지 않기 때문에 보안을 유지할 수 있다. 

// post 요청
  axios({
    method: 'post',
    url: `http://localhost:3000/posts`,
    data: postParams
  })
    .then(res => {
      console.log('res: ', res);
    })
    .catch(error => {
      console.log('error: ', error);
    })

편의성 함수로 사용하게 되면 post url뒤에 파라미터를 불러올 수 있다. 

// --- axios 편의성 함수 사용
function submit() {

  const inputTitle = document.querySelector('input[name=title]')
  const inputContent = document.querySelector('input[name=content]')

  const postParams = {
    title: inputTitle.value,
    content: inputContent.value
  }

  axios.post(`http://localhost:3000/posts`, postParams)
    .then(res => {
      console.log('res: ', res);
    })
    .catch(error => {
      console.log('error: ', error);
    })
}

🔹get요청

컬렉션 빈 배열에 데이터를 푸시했고 해당 데이터들이 list형식으로 클릭되면 구현되게 해보았다.

• 입력한 ur에 존재하는 자원에 요청을 한다.
• 데이터를 가져와서 보여주는 용도이기에 로그인창 구현 등에는 적합하지 않다. 
• get메서드는 값이나 상태등을 바꿀 수 없다.

function getComment() {
    let dataCollection = []
    axios.get('http://localhost:3001/posts') 
    .then(res => {
        dataCollection = res.data
        console.log('dataCollection: ', dataCollection);
        dataCollection.forEach(data => {
            printData.innerHTML += `<li>title: ${data.title} <br> content: ${data.content}</li>`
        })   
    })
    .catch((error) => console.log(error))
}

 

🔹delete 요청

function deleteComment() {
    axios({
        method: 'delete',
        url: `http://localhost:3001/posts/7`,
    })
    .then(res => console.log(res))
    .catch(console.error)
}

 

 

다음 장에는 postman과 reqres fakeserver로 서버통신 테스트 한걸 정리하면서

쿼리스트링, url의 의미 등 정리를 해놔야겠다.