Immersive#12 chatterbox client

immersive Sprint인 chatterbox client에 있어서 리뷰를 해보려 한다.

< 알게 된 것 >

• fetchAPI의 사용
• fetch GET
• fetch send

클라이언트는 서버에게 원하는 내용을 요청하고 서버에게 원하는 내용을 되돌려 받는 과정으로 스프린트가 진행이 되었다.

밑에는 코드스테이츠에서 제공해준 코드이다. 코드를 보면서 내가 구현 할 때 있어서 어느 부분이 막히고 힘들었는지 어떤것을 알게 됐는지 포스팅하겠다.

const app = {
  server: 'http://52.78.206.149:3000/messages',
  init: () => {
    app.addEventHandlers();
    app.fetch(json => {
      json.forEach(app.renderMessage);
    });
  },
  
  // fetch를 통해 데이터를 가져오고 순회하는 함수
  fetchAndRender: () => {
    app.fetch(data => {
      data.forEach(app.renderMessage);
    });
  },
  
  // 이벤트를 처리 해주는 함수 
  
  addEventHandlers: () => {
    let submit = document.querySelector('#send .submit');
    if (submit) {
      submit.addEventListener('submit', app.handleSubmit);
    }
  },
  
  // fetch를 통해 서버에서 데이터를 가져오는 함수 
  
  fetch: callback => {
    window
      .fetch(app.server)
      .then(resp => {
        return resp.json();
      })
      .then(callback);
  },
  
  // 클라이언트에서 서버에게 POST를 요청해 서버에 게시 할 수 있도록 하는 함수 
  send: (data, callback) => {
    window
      .fetch(app.server, {
        method: 'POST',
        body: JSON.stringify(data),
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(resp => {
        return resp.json();
      })
      .then(callback);
  },
  
  // chats id에 있는 내용물을 없에 주는 함수
  clearMessages: () => {
    document.querySelector('#chats').innerHTML = '';
  },
  
  // input태그 값에 접근 하는 함수 
  clearForm: () => {
    document.querySelector('.inputUser').value = '';
    document.querySelector('.inputChat').value = '';
  },
  
  // 서버의 데이터를 나타 날 수 있게 해주는 함수 
  renderMessage: ({ username, text, date, roomname }) => {
    const tmpl = `<div class="chat">
      <div class="username">${username
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')}</div>
      <div>${text
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')}</div>
      <div>${date}</div>
      <div>${roomname
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')}</div>
    </div>`;

    document.querySelector('#chats').innerHTML =
      tmpl + document.querySelector('#chats').innerHTML;
  },
  
  // input태그의 내용을 제출하는 함수 
  handleSubmit: e => {
    e.preventDefault();
    app.clearMessages();
    app.send(
      {
        username: document.querySelector('.inputUser').value,
        text: document.querySelector('.inputChat').value,
        roomname: '코드스테이츠'
      },
      () => {
        app.fetchAndRender();
        app.clearForm();
      }
    );
  }
};

// init을 실행 함으로서 웹사이트가 실행 되면서 렌더 된 메세지가 나올 수 있게 한다.
app.init();

스프린트를 진행 하는데 있어서 fetch함수를 사용하는데에 있어서 많은 부족함이 있었다.
fetch를 사용해서 데이터를 어떻게 가져오고 가져온 데이터가 어떻게 표현이 되는 지 fetch에서 get메소드와 post메소드는 어떻게 사용을 하는 지 기초부터 부족했기 때문에 진행 하는 데 힘들었던 부분이다.

이 부분에 있어서 MDN문서의 using fetch 부분을 참조하여 이해를 했다.

fetch('http://example.com/movies.json') // fetch 내부는 url (자신이 원하는 데이터를 가져오는 url이다. 
  .then(function(response) { 	// response는 그에 대한 응답이고 이 응답이 문자열로 되어 오기 때문에
  //다시 json.parse를 해주어 응답을 데이터로 사용 해야 한다. 
  // 여기서 response.json()과정이 json.parse 해주는 과정이다. 
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson)); // parse한 데이터를 사용이 가능하고 여기서 JSON.stringify을 통해 다시 내보내거나 할 수 있다 . 
  });

위의 코드를 ES6로 더 깔끔하게 다시 작성하면

fetch(url)
  .then(res =>  response.json() )
  .then(myJson =>  console.log(JSON.stringify(myJson)));

위와 같이 바꾸어 줄 수 있다. 정말 간략함을 알 수 있다.

이번 스프린트는 AJAX 통신을 할 수 있는 API를 사용하는 것 그리고 왜 필요한지 이해하는 스프린트였다.

AJAX 통신을 사용하는 이유는 비동기적으로 데이터를 가져오고 이벤트를 처리하기 위해서 AJAX통신을 하는 것이다.

출처: https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/