Zenith
Zenith
1. 프로젝트 개요
- 프로젝트명: Zenith
- 개발 기간: 2024/10/22 ~ 2024/11/11 (4주)
- 인력구성: 6명
- 담당 범위: WebSocket을 사용한 그룹채팅방 생성과 실시간 채팅기능
- 배포 현황: 미출시
- 기술 스택: JAVA,Spring,HTML5,CSS,JavaScript,WebSocket,Oracle
2. 프로젝트 목적 및 담당역할
프로젝트 목적
Zenith는 Spring 기반의 실시간 코드 편집기 웹 애플리케이션으로, 주니어 개발자들이 개발 환경을 설정하지 않아도 실시간 협업이 가능하도록 설계되었습니다.
기획 의도 및 목표
- 개발 환경 설정 없이 협업 코드 편집 가능
- 실시간 코드 수정 및 실행 지원
- AI 챗봇 및 대화 통계 분석 기능 제공
- 채팅 기능 포함
담당 역할
- 그룹 채팅기능 개발
3. 기술 스택 및 아키텍처
| 분류 | 내용 |
|---|---|
| 운영체제 | Windows 11, Linux(Ubuntu) |
| 서버 | Apache Tomcat, AWS EC2 |
| 데이터베이스 | Oracle 11g Express Edition |
| 개발 툴 | STS 3, Visual Studio Code, SQL Developer |
| 협업/디자인/문서 | GitHub, Notion, Discord, ERD Cloud, Draw.io, Figma, Google Drive, MiriCanvas |
| 언어 | Java 11, HTML, CSS, JavaScript(ES6) |
| 백엔드 프레임워크 | Spring Framework, Spring MVC, Spring Security, Apache Tiles |
| 데이터/빌드/유틸 | Maven, MyBatis, HikariCP, Lombok, Jackson |
| 프론트엔드 | jQuery, jQuery UI, Ajax, Monaco Editor, FullCalendar |
| 통신/외부 API | RESTful API, OpenAI API |
4. 주요 기능
코드 편집 및 실시간 협업
- 다수의 사용자가 동시에 코드 편집 가능
- WebSocket을 활용한 실시간 동기화
- CRDT를 활용한 충돌 방지
코드 컴파일 및 실행 결과 제공
- 코드 실행 결과를 실시간으로 확인 가능
- 에러 감지 및 코드 분석 지원
AI 챗봇 및 대화 통계 분석
- OpenAI API를 활용한 AI 코드 도우미
- 사용자의 코드 작성 패턴 분석 및 피드백 제공
채팅 기능 지원
- 텍스트 채팅 지원
5.구현
1.채팅 기능
- 스크린샷
| 목적 | 코드편집기페이지 사이드바에서 프로젝트 팀원들간의 그룹채팅이 가능하다 |
| 기술스택 | WebSocket,Ajax |
| 사용 기술 | WebSocket:팀원들간의 실시간채팅이 가능하게 설계 Ajax:코드편집기 사이드바에서 전체 페이지 새로고침없이 사이드바 부분만 새로고침 |
| 구현 방식 | 1.WebSocket 설정 - /newchat 엔드포인트 생성 및 WebSocket 핸들러 등록. - 인터셉터에서 roomId를 추출해 세션 속성에 저장. 2.핸들러 로직 - 연결 시: roomId에 해당하는 채팅방 생성 또는 사용자 등록. - 메시지 수신 시: 해당 방의 모든 사용자에게 메시지 브로드캐스트. - 연결 종료 시: 방에서 사용자 세션 제거. 3.채팅방 관리 - NewChatRoom 클래스: 특정 방의 사용자 세션 관리. - NewChatRoomService: 방 생성 및 조회. 4.클라이언트 연동 - 클라이언트는 roomId를 입력하여 WebSocket 연결. - 실시간으로 메시지를 주고받고 채팅창에 렌더링. |
6. 협업 및 커뮤니케이션
- 요구분석서에 기능,비기능요구를 정의하고 요구분석서 기반으로 개발
- 순서도 기반 RESTful 설계로 엔트포인트를 선정의하여 개발시 팀원들 코드간의 연결 용이
- ERD Cloud를 사용하여 팀원과 함께 데이터구조오류 검증,각 담당 테이블의 PK,FK,제약조건등 확인
- Figma로 화면설계서 작성 팀원간의 디자인 통일
- 노션으로 회의록작성 및 각종 참고문서 정리
- 디스코드와 카카오톡으로 팀원간 질의응답,일정조율 활성화
7. 개발 결과 및 회고
결과
- 실제 협업 코딩이 가능한 웹사이트 개발 완료
- 6개월 교육과정중에서 우수프로젝트 선정
회고
- WebSocket 전반 이해도 향상: 핸드셰이크 → 연결유지 → 메시지 브로드캐스트 → 종료 기능등을 구현하면서 WebSocket에 대한 이해도 향상
- 멀티룸 브로드캐스트 구조: 프로젝트이름을 roomId로 사용하고 세션을 분리해서 특정 방 사용자에게만 전송되는 브로드캐스트 구조 생성
- AJAX 이해도향상: AJAX 사용하여 사이드바만 갱신하여 채팅창만 갱신되는 구조로 설계하며 AJAX 이해도 향상
- 초기 설계 과잉/시간분배 실패: 기획 및 디자인과 문서작성에 시간을 너무 많이 투입한 나머지 실제 개발 가능 시간이 부족해지고 결국 전체 프로젝트 기능 축소라는 결과를 가져옴 이번 프로젝트를 통해 프로젝트 기간에 맞는 현실적인 목표설정과 핵심기능 구현에 집중하는 우선순위 관리가 중요함을 깨달음
8. 스크린샷
- 메인화면
- ERD
- 마이페이지
- 코드 동작 화면
- 코드 템플릿 기능
- 채팅 기능
- 챗봇 기능
댓글 작성