소개

웹 앱 연습으로 채팅 앱을 만들어 보았습니다.

기본 기능

로그인제 앱

비밀번호가 해시되어 DB로 관리

세션을 사용한 로그인 관리 기능

계정 생성 기능

메시지 게시 기능

게시물 내용을 DB에 저장

XSS 대책 이스케이프 처리

이미지 투고 기능

이미지를 바이트 배열로 변환하고 저장하고 경량화

입력 체크 기능

로그인 시

계정을 만들 때

메시지 게시시

메시지 삭제 및 편집 기능 (사용자 관점에서 DB에 저장된 개인 메시지를 개별적으로 삭제하고 편집 할 수 있음)

Bootstrap 프레임 워크를 사용한 앱 디자인

스마트 폰에 대응하는 반응형 디자인

개발 환경

사용 언어

Java

javascript

html

css

데이터베이스

MySQL

기타

bootstrap

화면

로그인 화면

PC용

스마트 폰용

채팅 화면

PC용

스마트폰용

만든 소감

보통의 채팅 앱에서도 막상 만들어 보면 귀찮은 것이 많다.

개행을 판정하기위한 처리와 XSS 대책의 양립

이미지를 게시할 때 byte 열로 변환하는 것이 좋다는 것을 배웠다. 표시할 때는 base64로 인코딩해 표시하는 방법을 선택했지만, 이 방법은 페이지를 표시할 때에 부하가 걸리기 때문에, 향후의 반성점으로 하고 싶다.

디자인에는 자신이 없기 때문에, bootstrap 덕분에 상당히 맛이 되었다.

마지막으로

채팅 앱이라고 해도, 그 처리나 구조는 거의 거의 게시판이나, 다른 입력 폼을 수반하는 앱과 같거나 유사하기 때문에, 다른 앱에서도 유용이 효과가 있는 것을 알 수 있었다.