[20/11/11 ~ 20/11/12] - TIL | ChatterBoxClient Sprint

NOWANDHERE·2020년 11월 12일

TIL

목록 보기

46/53

🌻 ChatterBoxClient

먼저 스프린트 진행을 위해 Server, API, HTTP, Ajax, fetch 등을 검색하여 보고 개념에 대해 학습했다. 드디어 Server에 대해 배워본다는 마음에 설레기도 했다.

Pre Course에서 진행했던 Twittler 스프린트에서는 브라우저를 새로고침하면 데이터가 사라지는 반쪽짜리 웹 앱에 불과했다 (물론, localStorage를 이용해서 데이터를 저장하는 부분까지 구현해보긴 했다). 이번 스프린트는 이미 잘 작동하는 서버를 이용해서 채팅 앱을 만드는 것이다.

이해하고 구현하기

페어 분과 어떻게 진행해야할지 상의를 했다. 하지만 여기서의 학습 방식이 그렇듯, '도대체 뭘 어떻게 하라는거지?' 싶었다. 서버로부터 받아온 메시지들을 보여줄 수 있어야 했다. 내가 작성한 메시지를 서버로 보낼수도 있어야 했고, chatterbox-server API 문서를 이용해 클라이언트를 구현해야했다.

일단, 클라이언트 구현을 위해 html 파일을 수정했다. API 문서를 보면서 비교적 간단한 GET 요청부터 보내보기로 하고, fetch를 이용해 GET 요청을 보내고 응답을 무작정 계속 콘솔에 찍어보며 요구사항들을 구현해보려고 노력했다. 어려웠다.

GET 요청의 응답을 console에 찍어봤다.

let message = {
  username: 'Assiduous',
  text: 'Hello',
  roomname: 'Im24'
};

// This is the url you should use to communicate with the AWS server.
const serverURL = 'http://52.78.206.149:3000/messages'
window.fetch(serverURL, {
  method: 'POST',
  body: JSON.stringify(message),
  headers: {
    "Content-Type": "application/json",
  }
}).then(response => {
  return response.json();
}).then(json => {
  console.log(json);
  // message sent!
});

서버에 메세지를 저장하기 위해서 POST 요청을 보내고 응답을 처리하는 과정이다. 이 과정을 이해해보자. 아, 서버 URL을 fetch API를 통해 method는 POST, 포스트 요청이구나, body는 내 meesage 객체를 JSON.stringify()의 형태로 보내는구나, HTTP 요청의 headers는 json 형태라는 것을 알려주는구나, .then()으로 응답을 받고 .json()을 통해 데이터를 내가 알아보기 쉽게 객체로 바꾸는구나.

최종 코드와 결과

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>chatterbox</title>
    <link rel="stylesheet" href="styles/styles.css" />
  </head>
  <body>
    <div id="main">
      <h1>chatterbox</h1>
      <span>Room : </span>
      <select name="room" class="filter-room"></select>
      <form>
        <input type="text" class="message-input" />
        <button class="submit-button" type="submit">submit</button>
      </form>
    </div>

    <div id="chats"></div>

    <script src="scripts/app.js"></script>
  </body>
</html>

app.js

const app = {
  server: 'http://52.78.206.149:3000/messages',
  init: () => {
    // 버튼 클릭시 clickSubmit 메소드 호출
    const submit = document.querySelector('#main .submit-button');
    if (submit) submit.addEventListener('click', app.clickSubmit);
    // fetch(GET)를 통해 가져온 데이터를 하나씩 render한다
    app.fetch((result) => {
      for (let i = result.length - 1; i >= 0; i--) {
        app.renderMessage(result[i]);
      }
    });
    app.makeRoomsList();
  },
  // GET
  fetch: (callback) => {
    window
      .fetch(app.server)
      .then((response) => response.json())
      .then((response) => response.results)
      .then(callback); // 최종 리턴된 프로미스객체에서 배열을 꺼내 callback 함수를 실행
  },
  // POST
  send: (message, callback) => {
    window
      .fetch(app.server, {
        method: 'POST',
        body: JSON.stringify(message),
        headers: {
          'Content-Type': 'application/json',
        },
      })
      .then((response) => response.json())
      .then((response) => response.results)
      .then(callback);
  },
  // 가져온 데이터의 roomname을 update
  makeRoomsList: () => {
    const rooms = document.querySelector('.filter-room');
    const valueObj = {};
    let value = 1;
    app.fetch((result) => {
      for (let message of result) {
        if (valueObj[message.roomname] === undefined) {
          const roomname = document.createElement('option');
          roomname.classList.add('roomName');
          roomname.innerText = message.roomname;
          roomname.value = value;
          if (rooms) rooms.appendChild(roomname);
          valueObj[message.roomname] = value++;
        }
      }
    });
  },
  clearMessages: () => {
    document.querySelector('#chats').innerHTML = '';
    // const chats = document.querySelector('#chats');
    // while (chats.hasChildNodes()) {
    //   chats.removeChild(chats.firstChild);
    // }
  },
  renderMessage: (messageObj) => {
    const message = document.createElement('div');
    message.innerText = `${messageObj.username} :\n${messageObj.text}`;
    message.classList.add('chat');
    document.querySelector('#chats').appendChild(message);
  },
  // submit 버튼 클릭시 다 지우고 메세지 POST 요청을 보내고 다시 render하는 함수
  clickSubmit: (e) => {
    e.preventDefault();
    const input = document.querySelector('.message-input');
    const message = {
      username: 'Assiduous',
      text: input.value,
      roomname: 'StudyCafe',
    };
    app.clearMessages();
    app.send(message, () => {
      app.fetch((result) => {
        for (let i = result.length - 1; i >= 0; i--) {
          app.renderMessage(result[i]);
        }
      });
    });
    input.value = '';
  },
};

app.init();

ChatterBox Client Sprint 완성했다. Reference Code를 보고 리팩토링까지 마쳤다. fetch API를 활용하여 실제 구동하는 서버에 GET, POST 요청을 하고 응답을 받아보는 경험을 할 수 있었고, 정말 재밌어서 이틀동안 밤 늦게까지 시간가는줄 모르고 코딩 했던 것 같다. 이전에 진행했던 비동기 스프린트에서 fetch API를 왜 했었는지 이제야 알거 같다. 이렇게 내가 공부하는 것들이 연결되는 점이 참 좋은 것 같다.