앞선 포스팅에서는 클라이언트와 서버에 대한 간략한 설명을 했다. 이제는 조금 더 깊게 들어가서 js로 어떻게 서버에 요청을 보내는 클라이언트를 구현할 것인지 살펴보도록 하겠다.

Chatterbox Client

먼저, 자바스크립트 내에서 서버의 url을 정의해 준다.

const githubID = 'ajt1097'

const app = {
  server: `http://3.36.72.17:3000/${githubID}/messages`,
}

이렇게 서버의 url주소를 변수로 선언해줌으로 매번 주소를 칠 필요없이 변수로 접근이 가능하다.

다음으로는 화면을 처음 불러왔을 때 실행되는 함수를 선언해 줄 것이다.

const githubID = 'ajt1097'

const app = {
  server: `http://3.36.72.17:3000/${githubID}/messages`,
  
  init: () => { //페이지가 불러와지면 실행되는 함수
    app.addEventHandlers(); //앱 객체내의 이벤트헨들러 추가 함수를 실행
    app.fetch((json) => { //앱 객체내의 fetch를 통해 불러온 데이터에
      json.forEach(app.renderMessage); //renderMessage함수를 적용
    })
}

위 함수들이 우리가 페이지를 불러왔을 때 실행되어야 할 함수들이다. 그렇다면 이제 app객체 내에 우리가 필요로 하는 함수들을 정의해 줘야 한다.

  fetchAndRender: () => { //fetch 이후에 renderMessage를 적용한다.
    app.fetch(data => {
      data.forEach(app.renderMessage);
    });
  },
    
  addEventHandlers: () => { //이벤트를 추가하는 함수
    let submit = document.querySelector('#send .submit'); //submit을 정의
    if (submit) { //submit이 정의되어 있으면
      submit.addEventListener('submit', app.handleSubmit);
      //sumbit 시에 handleSubmit함수를 싱행해라
    }
  },
  fetch: (callback) => { //GET 통해 받은 데이터에 callback을 적용
    // TODO
    window.fetch(app.server) //GET메소드를 실행하는 fetch
      .then(response => response.json())
      .then(callback)
  },
  send: (data, callback) => { //POST 통해 받은 데이터에 callback을 적용
    window.fetch(app.server, {
        method: 'POST',
        body: JSON.stringify(data),
        headers: {
          'Content-Type': 'application/json'
        },
      })
      .then(response => response.json())
      .then(callback);
  },
  clearMessages: () => { //메시지 창을 지우는 함수
    document.querySelector('#chats').innerHTML = '';
  },
  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;')}</div>
      <div>${text
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')}</div>
      <div>${date}</div>
      <div>${roomname
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')}</div>
    </div>`;

    document.querySelector('#chats').innerHTML =
      tmpl + document.querySelector('#chats').innerHTML;
  },
  handleSubmit: e => { //submit시에 일어나는 함수
    e.preventDefault(); //이벤트가 취소가능하면 취소해라?
    app.clearMessages(); //메세지 창의 메세지를 전부 지운다.
    app.send({ //다음 값들을 서버에 POST한다.
        username: document.querySelector('.inputUser').value,
        text: document.querySelector('.inputChat').value,
        roomname: '코드스테이츠'
      },
      () => { //POST에 대한 응답들을 이 함수들로 처리해라.
        app.fetchAndRender();
        app.clearForm();
      }
    )
  }

위 함수들을 app객체 내에 선언해 준후에 마지막에 app.init()을 실행해준다면 서버에 요청을 보내는 Client js파일이 완성된다.