/Refresheet_backend

Spring Boot와 React로 만든 관계형 데이터베이스 기반 Table 공동 편집 서비스

Primary LanguageJava

Refresheet Project - BackEnd

Project

개인 프로젝트 - jsooOO
프로젝트 기간: 2021.08.09 ~ 2021.08.20

Refresheet이란?

관계형 데이터베이스 기반 Table 공동 편집 서비스

Tech/Framework

  • React.js: 프론트엔드
  • Spring boot: API 서버 & 웹 소켓 서버
  • Sock.js: 소켓 통신 라이브러리
  • BootStrap

ScreenShots

Table 편집

편집되는 내용은 onChange이벤트로 실시간으로 웹 소켓 서버에 전송되고, 커서가 input창 밖으로 나가면 DB에 값이 업데이트됩니다.
image
onChange 이벤트 발생 시, 같은 Sheet ID를 구독하는 구독자에게 변경 이벤트가 broadcast됩니다. 구독자는 구독자의 ip 주소와 웹 소켓 서버 연결 시 발급되는 session id로 구분합니다.
image

Column 추가

텍스트, 숫자, 날짜 데이터 타입을 지정할 수 있습니다.
image

지정한 데이터 타입에 따라 input의 유형이 바뀝니다.
image