[Chat-App]#1 개발 계획
Socket.io, React, 그리고 Node.js를 활용한 실시간 채팅 앱 프로젝트를 진행합니다.
2021.04 ~ 2021.06 동안 기초적인 개발 작업 완료 후 기본 개념과 수정 작업을 기록합니다.
개발 계획
1. Airbnb style guide 적용
클린 코드를 통해 코드의 가독성과 유지보수성을 향상시키기 위해, Airbnb 스타일 가이드를 적용합니다. 개발의 효율성을 높여주는 "Eslint"와 "Prettier" 툴들을 Airbnb style 가이드에 적용합니다.
2. Refactoring 작업
파일 시스템 정리 및 소스 코드 리팩토링을 통해, 소스 코드 가독성 향상을 목표로합니다.
3. ScrollToBottom 문제 해결
채팅 화면에 메세지들이 가득차면 스크롤이 생기지 않고, 화면을 뚫고 나오는 말도 안되는 현상이 생겨, CSS 수정이 시급해보입니다. Responsive-web 공부와 함께 css 지식을 충원하여, 수정을 계획합니다. 채팅 메세지 전송은 기존의 채팅 메세지 가장 밑에 새로운 채팅 메세지를 생성합니다. 따라서, 새로운 메세지 추가 시 기존의 메세지들을 위로 올리고, 화면을 자동적으로 밑으로 스크롤될수 있도록 구현합니다. 이때, npm의 'react-scroll-to-bottom' 패키지를 사용하여 수정할 계획입니다.
4. Back-end: 유저 정보 관리
채팅에 참가하는 유저들의 채팅 정보를 관리하기 위해 "MySQL" 데이터 베이스 매니지먼트 시스템을 적용할 계획입니다. 기본적인 유저 정보와 유저들의 채팅 내용을 백업하여 재접속시에 백업 정보를 불러올 수 있도록 합니다.
'웹 개발 > React' 카테고리의 다른 글
[Chat-App: Hop-chat]#2 Socket.io (0) | 2022.01.09 |
---|