🌐 WebIDE

프로젝트 소개

• 알고리즘 문제를 코딩할 수 있는 온라인 Web IDE 프로젝트를 진행하였습니다.
• 컨테이너를 생성하여 해당 컨테이너에 알고리즘 문제를 등록하고 팀원끼리 코드를 풀며 진행 사항을 확인할 수 있게 구현하였습니다.

---

팀원

FE	FE	FE/BE	FE	BE	FE/BE
김우진 @w-jins	이나영 @lnylnylnylny	고유림 @koyulim	정지연 @dyoni2	신용선 @shinyyseon	가상엽 @Shelfey

---

기술스택

FrontEnd
BackEnd
Tools
Infra
Storage

---

주요 기능

1. 회원 관리

   • 회원가입 : 회원 정보 입력 후 DB 저장
   • 로그인 : DB 데이터와 입력 데이터 비교 후 로그인
   • 아이디 찾기 & 비밀번호 재설정 : DB 데이터와 입력 데이터 비교 후 아이디 조회, 비밀번호의 경우 재설정 페이지로 이동

2. 컨테이너

   • 컨테이너 생성 : 컨테이너 이름, 설명, 공개 여부, 초대 할 팀원 등 초기 생성할 때 필요한 정보를 기입하여 DB에 저장 (컨테이너 공개의 경우 공개된 컨테이너 목록에 포함되어 다른 사용자도 참여할 수 있음, 비공개의 경우 초대한 사용자만 컨테이너 이용 가능)
   • 컨테이너 설정 : 컨테이너 공개 여부를 변경할 수 있고 팀원를 새로 초대할 수 있음
   • 활동 여부 : 각 컨테이너마다 소속된 사용자를 확인할 수 있고 사용자의 로그인 상태를 확인할 수 있음 (초록색은 활동중, 빨간색은 비활동중)

3. 디렉터리 생성

   • 생성 : 디렉터리 명을 입력하여 서버에 폴더를 생성하고 폴더 정보는 DB에 저장
   • 수정 : 디렉터리 명을 수정할 수 있음. 수정된 데이터는 DB에 저장
   • 삭제 : 생성된 디렉터리를 삭제할 수 있음.

4. 문제 및 테스트 케이스 등록

   • 생성된 디렉터리에 문제를 등록할 수 있음
   • 문제 등록은 제공하는 양식에 맞춰서 등록해야함. 기본 테스트케이스는 3개로 정하고 최대 10개까지 등록할 수 있음

5. 코드 에디터

   • 모나코 에디터 라이브러리를 사용하여 코드 편집기를 구현함.
   • 언어별 기본 코드 양식을 반환하여 처음 접속할 때 편집기에 보여줌
   • 이전에 작성했던 코드 또한 저장되어 이후 사용할 때 반환하여 보여줌

6. 문제 채점

   • 문제 채점은 도커 컨테이너 환경을 구축하여 실행함. 악성 코드 등 다른 사용자가 프로그램을 이용할 때 문제 생기는 것을 방지하기 위해 문제 등록 시 설정해둔 실행 시간, 메모리 사용량을 기준으로 컨테이너를 종료시킴. 또한 코드를 실행할 때마다 컨테이너를 생성하고 종료 시 컨테이너가 바로 삭제되기 때문에 리소스 누수되는 것을 방지하고 사용자마다 격리된 테스트 환경을 구축함.
   • 테스트 : 테스트케이스에서 true로 설정한 3개의 테스트케이스를 기준으로 코드를 테스트할 수 있음
   • 실행 : 작성한 코드를 실행할 수 있음. 이 경우 입력 데이터가 필요 시 사용자가 직접 입력하여 코드를 실행함
   • 제출 : 만들어둔 모든 테스트케이스를 기반으로 성공 실패 여부를 반환함. 모든 테스트케이스를 통과하는 경우 성공, 하나라도 실패하면 실패를 반환

7. 채팅

   • 웹 소켓을 사용하여 컨테이너 내부에서 사용자끼리 실시간 소통될 수 있게 설정함
   • 백엔드에서 웹 소켓 전용 엔드포인트를 통해 프론트의 요청을 받아 소켓의 설정들을 bean으로 등록 후 데이터 처리하여 프론트로 전송함
   • 채팅 내용은 DB에 저장하여 컨테이너 접속 시 이전에 나눴던 채팅을 확인할 수 있음
   • 채팅창을 열고 닫을 수 있으면 채팅창을 닫았을 경우 토스트 알림으로 확인할 수 있음
   • 채팅 기록 중 원하는 키워드를 통해 채팅 검색할 수 있음

8. 마이페이지

   • 사용자 정보를 수정할 수 있음
   • 사용자가 원하는 사진으로 프로필 이미지 변경 가능

9. 다크모드

   • 라이트모드와 다크모드를 사용할 수 있음

10. 이미지 첨부 기능

    • 이미지 정보 추가 및 삭제 : 로컬 디렉토리에 있는 이미지 추가 및 삭제
    • 이미지 경로 커스텀 : 로컬 디렉토리 경로 핸들링

11. 사용자 인증 및 보안 기능

    • JWT : 토큰 발급, 검증, 재발급
    • Spring Security : 권한에 따라 접근할 수 있도록 설정, 암호화
    • AES : AES 암호화, 복호화

---

사용가이드

1. 회원가입 로그인

   • 서비스 접속
   • 회원가입 버튼 클릭
   • 사용자 정보 입력
   • 가입하기 버튼 클릭
   • 생성된 계정으로 로그인

2. 컨테이너 목록

   • 메인 페이지 접속 시 모든 컨테이너(공개된 컨테이너)를 확인할 수 있음
   • 컨테이너 참가 클릭
   • 해당 컨테이너 내부로 접속

3. 컨테이너 생성

   • 컨테이너 생성 버튼 클릭
   • 필요한 정보 입력 및 초대하고 싶은 사용자 ID 입력
   • 컨테이너 생성 완료

4. 디렉터리 생성

   • 디렉터리 목록 버튼 클릭
   • 우클릭 후 새 폴더 클릭
   • 디렉터리 명 입력
   • 디렉터리 생성

5. 디렉터리 명 수정

   • 수정할 디렉터리 우클릭
   • 이름 수정 클릭
   • 변경할 디렉터리 명 입력
   • 디렉터리 수정 완료

6. 디렉터리 삭제

   • 삭제할 디렉터리 우클릭
   • 파일 삭제 클릭
   • 디렉터리 삭제

7. 문제 및 테스트케이스등록

   • 문제 생성 클릭
   • 문제 및 테스트케이스 데이터 입력
   • 문제 생성

8. 코드 편집기

   • 원하는 프로그래밍 언어 선택
   • 해당 언어로 코드 작성

9. 코드 실행

   • 코드 테스트, 실행, 제출 버튼 클릭
   • 코드의 실행 결과 및 테스트케이스 데이터 출력

10. 채팅

    • 컨테이너 접속
    • 이전 채팅 내역 보여줌
    • 컨테이너에 참가된 사용자끼리 채팅 가능
    • 채팅창을 닫으면 채팅이 왔을 때 토스트 알림으로 보여짐
    • 이전 채팅을 기반으로 원하는 키워드를 입력하여 채팅 검색을 할 수 있음

11. 마이페이지

    • 왼쪽 하단 사용자 프로필 클릭
    • 회원 정보 수정 클릭 시 사용자 정보를 수정
    • 저장하기 클릭 시 변경 완료

12. 다크모드

    • 왼쪽 하단 버튼으로 라이트모드, 다크모드로 변환 가능

개발 일정

초기 설계

플로우차트

로그인	홈	컨테이너 내부

ERD

아키텍처

시연 영상

Web.IDE.mp4

성과