[스프린트][회고]Chatterobox Client

출처: pixabay

 

Introduction

이 스프린트에서 서버 구현과 데이터베이스 관련 내용을 제외되어 있습니다. 

서버는 만들어져 있는 환경에서 내가 클라이언트와 서버 간의 통신을 구현을 목적으로 "채팅 애플리케이션"을 만들어 보았습니다. 

(참고로, AWS에 구축/배포된 코드스테이츠 전용 서버를 활용합니다 )

 

Bare Minimum Requirements

• 아래 제공되는 chatterbox-server API 문서를 이용해서 클라이언트를 만드세요.
• 클라이언트는 서버로부터 받아온 메시지들을 보여 줄 수 있어야 하고, 내가 작성한 메시지를 서버에 보낼 수 있어야 합니다.
• 클라이언트가 테스트에 통과할 수 있도록 만드세요.
• XSS 공격을 어떻게 막을 수 있는지 생각해보세요.

 

Advanced Challenges

아래의 Advanced 컨텐츠들은 테스트 케이스가 작성되어 있지 않습니다. 가능하다면 spec/chatterboxSpec.js에 describe와 it을 이용해 새로운 테스트 케이스를 만들어보세요.

• Room: 유저는 Room을 생성할 수 있어야 하고, 서버로부터 받은 메시지들은 room에 의해서 구분될 수 있어야 합니다.
• Auto Fetching: 클라이언트에서 새로고침을 하지 않더라도 서버에서 계속 새로운 메세지들을 받아 올 수 있어야 합니다.

 

 

---

 

 

Title : Chatterbox Application

스프린트 특성상 짧은 시간과 정해진 목표를 지키기에 초점을 두었습니다.

클라이언트단에서 서버와 데이터를 주고 받는 "채팅 애플리케이션"을 만들었습니다. 

아래 이미지를 보면 어떻게 구성 됐는지 알 수 있습니다.

 

 

 

 

Features

• submit 버튼을 눌렀을 때, 작성한 이름과 메시지가 하단 메시지 창에 맨 상대에 추가된다.
• Room별로 내용이 분류되어있다.
• auto-fetching 버튼을 눌렀을 때, 1초 간격으로 메시지가 동기화된다.

 

what you'll learn

1. API 문서를 참고해서 소스코드 짜기
2. 클라이언트와 서버와 메시지(데이터) 주고받기
3. XSS 공격에 막을 수 있는지 여부 고민하기
4. Room별로 관련 내용 구분하기
5. auto fetching: 자동 업데이트시키기
6. form 태그 활용하기
7. selection / option  태그 활용

 

Not can do yet

1. Room 별 구분 짓고 나서, 새 메시지 추가시키면 전체 글과 함께 메시지 창이 업데이트된다.

 

Tech stack

• HTML
• CSS
• JavaScript
• Ajax