39일차 TIL 210429

1. HTTP

  • HTTP는 웹서버 통신을 위한 프로토콜 중 하나이다.
  • HTTP1.0 은 TCP 라는 프로토콜을 바탕으로 재설계 한것
  • HTTP2.0은 UDP 라는 프로토콜을 바탕으로 재설계 한것이다.
  • 비연결성 : 서버와 상시적으로 연결하지 않아도 통신이 가능하다
  • 무상태성 : 서버의 상태를 몰라도(꺼져있어도) 요청을 할 수 있다.

  • 상태코드 200번대 : 요청성공 400번대 : 클라이언트 에러 500번대 : 서버에러

  • 최근의 웹페이지에는 리소스를 두 군데에서 받는 형식이 많다.

스크린샷 2021-05-01 오후 5 44 38

2. 채터박스 레퍼런스 코드 분석

  • 싱글톤(singleton) : 프로그램 내에서 어디서든 접근 가능한 고유한 객체. 유일하게 하나 동작하는 것.

  • 안에 정의한 메소드를 다른 메소드 실행과 연결해야 한다.

  • init() 메소드 : 서버에서 가져온 데이터를 forEach로 화면에 렌더링하는 함수로 데이터 하나씩 넘긴다.그리고!!!!! 버튼이 눌렸을때 메소드 setOnClickListener() 실행.
  • fetch() 메소드 : 서버에서 데이터 가져온걸 json() 해주기. !!! window.fetch(app.server) 를 해줘야 하는데, 클라이언트 펫치는 윈도우 객체 안에 정의되어있기 때문이다.? 뭔소린지 아직 100프로 이해가 안된다.
  • send() 메소드 : 서버에 보내는 기능.
function postData(url='', data={}){
  return fetch(url, {
    method : 'POST', *default: GET,POST,PUT,DELETE
    headers : {
          'Content-type':'application/json'
    },
    body : JSON.stringify(data) ,// body data type must match ' content-type' header  && data can be `string` or {object}!
    })
    .then(res=>res.json())
}
  • getInputMessage() 메소드 : 입력받은 값을 서버에 보내기 위해 값 확인 하는 메소드.
const userName = document.querySelector('.inputUser').value;
const inputChat = document.querySelector('.inputChat').value;
const newMessage = {};
newMessage.username = userName;
newMessage.text = inputChat;
return newMessage;
}
  • clearMessages() 메소드 : 전달 받은 메세지 모두 삭제하기
document.querySelector('#chats').innerHTML = '';
  • renderMessage() 메소드 : 돔으로 서버에서 받은 메세지들 다 렌더링 해주기
    let message = document.createElement('div');
    message.classList.add('message');
    let text = document.createElement('div');
    text.classList.add('text');
    let username = document.createElement('div');
    username.classList.add('username');
    chats.prepend(message);
    message.appendChild(username);
    message.appendChild(text)

    text.textContent = messages.text;
    username.textContent = messages.username;
    return message;
  • setOnclickListener() 메소드 : 버튼클릭 되었을때 app.send(app.getInputMesstae()) 실행
button.onclick= function () {
      app.send(app.getInputMessage());

싱클톤 객체 정의 후 app.init() 실행!

3. XSS 공격 막아내기

  • 정규표현식으로 ‘<’ 를 ‘문자열 <’ 로 바꿈으로 공격을 방어한다.
  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;
  }

Updated: