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

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

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

💻 Web IDE 바로가기

📌 프로젝트 개요

• 과제 목표: 기본에 충실하여 프로젝트 완성하기
  • 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

📁 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

📚 회고록

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