/RevengersIDE

☁ 3차 스터디 11조 리벤져스: (9/7~10/10) 실습 과제 - Web IDE 제작

Primary LanguageJava

👩🏻‍💻👨🏻‍💻 Web IDE 제작 프로젝트

구름(goorm) 풀스택 개발자 성장 과정 1기 3차 스터디 팀 프로젝트 과제 Web IDE 제작 프로젝트입니다. 웹 기반 통합 개발 환경을 개발하는 것을 목표로 제시된 주요 목표와 하위 목표에 따라 개발을 진행했습니다. 주요 목표 내용은 다음과 같습니다.

  • Web IDE의 기본적인 틀과 사용자 인터페이스(UI) 설계
  • 회원 가입 및 로그인 기능 구현
  • 코드 편집기 기능 구현
  • 채팅 기능 구현

💻 Web IDE 바로가기


📌 프로젝트 개요

  • 과제 목표: 기본에 충실하여 프로젝트 완성하기
  • 과제 기간: 2023.09.07 ~ 2023.10.10
    • 개발 기간: 2023.09.24 ~ 2023.10.10
  • 주요 기능
    • Web IDE의 기본적인 틀과 사용자 인터페이스(UI) 설계
      • 사용자 및 관리자 페이지 제작
      • 반응형 웹 페이지 제작
      • Light/Dark 테마 제작
    • Spring Security를 사용한 회원 관리 시스템 구현
      • 회원 가입 및 로그인, 관리자 기능 구현
      • 아이디 찾기, 비밀번호 재설정 구현
    • Docker를 사용한 코드 편집기 기능 구현
    • 실시간 그룹 채팅 및 채팅 메시지 검색, 삭제 기능 구현
  • 회고 발표: WEB IDE 개발 회고 발표 자료

😎 조원 소개

프로필 역할 작업 영역
김경규(@WhiteKIM)
Back-End		 조원 코드 편집기 기능 구현(페어 코딩)
문소희(@soheetech)
Full-Stack		 조원 회원가입 및 로그인 기능 구현, UI 설계 및 반응형 페이지 제작, Front-End 영역 검수 및 최종 수정
배진환(@JinhwanB)
Back-End		 조원 코드 편집기 기능 구현(페어 코딩)
이동규(@LEE-Donggyu)
Full-Stack		 조장 아이디 찾기, 비밀번호 재설정 기능 구현, 회원 관리 시스템 설계 및 ADMIN 페이지 제작
전민종(@yss1902)
Back-End		 조원 실시간 그룹 채팅 및 채팅 메시지 검색, 삭제 기능 구현

💻 사용한 기술

Front-End

Back-End

DB

Infra

ETC


✍🏻 Architecture

ide아키텍처


📁 Repository 구조

Front-End

Back-End

 
FRONTEND
├─node_modules
├─public
└─src
  ├─Admin
  │ ├─AdminMember
  │ └─AdminSidebar
  ├─Assets
  ├─Components
  │ ├─Chat
  │ ├─Footer
  │ ├─Header
  │ └─Logo
  ├─Container
  │ ├─Home
  │ └─Member
  ├─Style
  └─Utils
    └─api

BACKEND
├─build
├─gradle
├─out
└─src
  ├─main
  │ ├─generated
  │ ├─java
  │ │ └─Revengers
  │ │   └─IDE
  │ │     ├─chat
  │ │     │ ├─config
  │ │     │ ├─model
  │ │     │ ├─repository
  │ │     │ └─service
  │ │     ├─config
  │ │     ├─docker
  │ │     │ ├─config
  │ │     │ ├─controller
  │ │     │ ├─dto
  │ │     │ ├─exception
  │ │     │ ├─model
  │ │     │ ├─repository
  │ │     │ └─service
  │ │     ├─global
  │ │     │ └─config
  │ │     ├─member
  │ │     │ ├─config
  │ │     │ ├─controller
  │ │     │ ├─dto
  │ │     │ ├─exception
  │ │     │ ├─model
  │ │     │ ├─repository
  │ │     │ └─service
  │ │     └─source
  │ │       ├─model
  │ │       └─type
  │ └─resources
  └─test

💾 ERD

erd


📚 회고록

  • Keep: 만족스러운 점이나 앞으로 계속 지속하고 싶은 부분
    • 김경규: 잘 해결되지 않았던 문제가 해결되고, 개발자 커뮤니티의 도움을 통해서 문제를 해결하는 과정이 만족스러웠던 것 같습니다.
    • 문소희: 스프링 시큐리티에서 제공하는 인증, 권한, 보안 기능을 사용하여 관련 기능을 구현해 볼 수 있어서 좋았습니다.
    • 배진환: 도커에 대해 좀 더 이해할 수 있는 시간이 되었습니다. 기회가 된다면 도커를 활용한 프로젝트를 진행해 보고 싶습니다.
    • 이동규: 간단한 기능을 맡았지만, 처음으로 코드를 스스로 작성해 보고 문제를 해결해 보고자 했습니다.
    • 전민종: 맡은 부분의 구현이 막힘없이 빠르게 진행되고 실제 동작 확인까지 된 점이 만족스러웠고 이미 구현한 기능에 대해 추가적인 기능을 덧붙여 보고 싶었습니다.
  • Problem: 프로젝트를 진행하면서 겪은 문제나 아쉬웠던 점
    • 김경규: 사용하려고 했던 API가 공식 문서가 소실되어서 정보를 얻는 것이 어려웠습니다.
    • 문소희: 다른 프로젝트와 병행하다 보니 시간적인 여유가 없어 기본적인 구조와 기능으로만 구현하게 되었고 스프링 시큐리티에 대한 이해가 부족한 상태로 진행하게 된 점이 아쉽습니다.
    • 배진환: 이번 프로젝트에 도커자바api를 사용하였는데 구글에 데이터도 별로 없고 공식 문서도 자세히 정리가 되어있지 않아서 아주 힘들었던 기억이 있습니다.
    • 이동규: 타입스크립트를 처음 사용하는 과정이 아주 어려웠습니다. 또한 스타일을 적용하는 과정에 대해 공부를 더 해야 할 것 같습니다.
    • 전민종: 외부 자료를 참고하여 구현을 진행하였지만, IDE 프로젝트 필수 조건에 맞는 자료들을 구하기 힘들어서 조건에 맞게 기능을 추가 및 수정하는 과정이 힘들었습니다.
  • Try: Problem에 대한 해결 방법으로 다음에 시도해볼 점 또는 개선 방법
    • 김경규: 해당 API 프로젝트의 이슈 탭을 이용해서 도움을 받을 수 있었고, GPT의 도움과 동일한 API를 사용한 다른 사람의 코드를 살펴봄으로써 필요한 답을 얻을 수 있었던 것 같습니다.
    • 문소희: 이번 프로젝트에서는 폼 로그인 방식으로 로그인을 구현하였는데 로그인 구현 방법도 다양한 것으로 알고 있습니다. 다음에는 스프링 시큐리티와 JWT를 혼합한 방법으로 로그인 기능을 구현해 보고 싶습니다.
    • 배진환: 해당 프로젝트와 비슷한 프로젝트를 다시 진행하거나 도커를 이용할 프로젝트가 있다면 좀 더 접근하기 쉬운 방법으로 고민해 보고 싶습니다.
    • 이동규: 보안에 대한 기능을 더 추가하고 싶습니다. 또한 프로젝트를 진행하는데 팀장으로서 부족한 부분이 많았던 것 같습니다. 팀 프로젝트를 더 많이 경험해 보고 더 매끄러운 진행을 할 수 있도록 노력해야겠습니다.
    • 전민종: 자료를 찾기 힘들다면 직접 요구사항에 대한 코드를 설계하고 구현하는 방식을 시도해 보고 싶고 이를 위해 전반적으로 기초 및 심화 학습이 필요하다고 생각되었습니다.