현재 추가하고 싶은 기능

GIPHY API 로 검색, 원하는 GIF 화면에 표시
MVC 패턴으로 코드 수정하기

Fetch API

클라이언트 단에서 서버에게 혹은 어떤 url 에게 정보를 요청하는 방법으로 fetch API 가 사용된다.

Javascript

fetch(url)
.then(res => res.json)
.then(data => console.log(data))

JQuery

var xhr = $.get(url);
xhr.done(function(data){console.log(data)})

MVC 패턴

MVC 패턴은 Model-View-Controller 를 일컷는 말로, 가장 유명한 코드 디자인 패턴이다.
현재 Mini-chat8080 는 Html5, CSS, NodeJs 를 이용하여

  • socket.io 를 이용한 메세지 주고 받기
  • 닉네임 설정
  • 로그인(아웃) 시 닉네임 화면에 'OO님이 로그인(아웃) 하였습니다.' 표시
  • GIPHY API 를 이용하여서 원하는 GIF 전송
    를 구현하였다. 근데 점점 문제가 생기고 어려워 진다.

문제점

  1. 점점 기능을 추가하면 추가할 수록 어떤 코드에 무엇을 집어 넣어야할지 모르겠다.
  2. 동작은 하게 구현은 해놓았지만, 이렇게 하는게 아닌것 같다....ㅎ
  • 현재 대부분의 동작들이 click이나 submit eventlistener들의 handler들로 등작하고 있다.
  • ex) nickname input submit -> socket 연결 -> message input submit -> msg emit -> msg from others on
  1. MVC 패턴을 찾아보니 이해는 가는데 정확하게 어떻게 구현해야될지 감이 안잡혔다. (MVC 패턴 괜찮은 설명 찾고 읽는데 졸려서 집중도 안됐음. 역시 이론보다는 구현인거같음)
  2. MVC 패턴도 클라이언트 부분이 있고, 서버 파트? 가 있는것 같다. 원래는 서버에서 동작되던 것들이 클라이언트만 사ㅇ

해결 방법

  1. 자바스크립트로 todo리스트 앱을 MVC패턴으로 구현 해놓은 소스를 발견했다.

앞으로의 과제

  • user의 닉네임 변경이나 채팅 모드 (text, gif)를 MVC 패턴을 적용해 구현해보자.