[Chat-App: Hop-chat]#1 수정 계획

[Chat-App]#1 개발 계획

 

Socket.io, React, 그리고 Node.js를 활용한 실시간 채팅 앱 프로젝트를 진행합니다.

2021.04 ~ 2021.06 동안 기초적인 개발 작업 완료 후 기본 개념과 수정 작업을 기록합니다.

 

 

---

 

개발 계획 

 

1. Airbnb style guide 적용

 

클린 코드를 통해 코드의 가독성과 유지보수성을 향상시키기 위해, Airbnb 스타일 가이드를 적용합니다. 개발의 효율성을 높여주는 "Eslint"와 "Prettier" 툴들을 Airbnb style 가이드에 적용합니다.

 

ESLint & Prettier, Airbnb Style Guide로 설정하기

 

2. Refactoring 작업

 

파일 시스템 정리 및 소스 코드 리팩토링을 통해, 소스 코드 가독성 향상을 목표로합니다.

 

3. ScrollToBottom 문제 해결

채팅 화면에 메세지들이 가득차면 스크롤이 생기지 않고, 화면을 뚫고 나오는 말도 안되는 현상이 생겨, CSS 수정이 시급해보입니다. Responsive-web 공부와 함께 css 지식을 충원하여, 수정을 계획합니다. 채팅 메세지 전송은 기존의 채팅 메세지 가장 밑에 새로운 채팅 메세지를 생성합니다. 따라서, 새로운 메세지 추가 시 기존의 메세지들을 위로 올리고, 화면을 자동적으로 밑으로 스크롤될수 있도록 구현합니다. 이때, npm의 'react-scroll-to-bottom' 패키지를 사용하여 수정할 계획입니다.

 

react-scroll-to-bottom

 

4. Back-end: 유저 정보 관리

 

채팅에 참가하는 유저들의 채팅 정보를 관리하기 위해 "MySQL" 데이터 베이스 매니지먼트 시스템을 적용할 계획입니다. 기본적인 유저 정보와 유저들의 채팅 내용을 백업하여 재접속시에 백업 정보를 불러올 수 있도록 합니다.

 

 

GitHub - Yongsullee/Chat-Application: Chat application with socket.io