💻 Do-IT (팀 프로젝트)
소개
- 개발자 스터디 플랫폼
- 원하는 CS 과목에 대해 면접 연습 진행 → Open AI api (Chat GPT) 평가 → 포인트 획득
- 면접 연습을 통해 얻은 포인트로 스터디 개설 (100 포인트) / 스터디 지원 (30 포인트) 가능
- Main page, 연습하기 관련 page, 스터디 관련 page, Mypage로 구성
- Header를 통해 페이지 간 이동 가능
- 로그인하지 않은 경우에는 '로고, 연습하기, 스터디, 로그인' 으로 구성
- 로그인 완료한 경우에는 '로고, 연습하기, 스터디, 로그아웃, 프로필' 로 구성
- (웹 버전) 각 버튼 위로 마우스를 올리면, 버튼이 파랗게 채워지는 애니메이션 구현
Sign in & Sign up
- 로그인 버튼 클릭 → 모달창 보여줌 → 로그인 / 회원가입 진행
- (웹 버전) 로그인 / 회원가입 모달에서 마우스를 따라 캐릭터의 얼굴이 움직이는 애니메이션 구현
Main page
- 해당 플랫폼이 어떤 서비스를 제공하는지 소개하는 일종의 튜토리얼
- 페이지의 가장 하단에는 최근에 개설된 스터디 목록들을 보여줌
- aos 라이브러리를 활용하여 scroll interaction 구현
연습하기
- 원하는 과목을 선택하면, 면접 연습을 진행하는 채팅 페이지로 이동
- (웹 버전) 과목명이 적힌 box 위로 마우스를 올리면, 과목에 대한 간략한 설명 보여줌
- 면접 연습은 총 3회의 "질문-답변" 으로 진행
- 채팅 페이지에 진입하자마자 사용자가 선택한 CS 과목에 맞는 질문 3개를 DB에서 랜덤으로 가져와 질문 목록 생성
- 사용자가 답변을 입력하면, Open AI api를 통해 평가 진행
- 평가는 10점 만점 기준, 해당 평가에 대한 이유 포함
- 평가를 기다리는 동안에는 ui/ux를 위해 로딩창 실행
- 평가 완료 후, 다음 질문을 보여줌
- 면접이 모두 끝나면, 질문 & 답변 & 평가를 한번에 보여줌
- 평가 점수를 포인트로 변환하여 저장 (최대 30점 획득 가능)
Open AI api
- axios를 통해 api 호출
- 환경변수로 api key 값 저장하여 사용
- prompt engineering
- 언어 모델에서 원하는 형태의 응답을 얻을 수 있도록 미리 입력값을 주는 것
- 해당 플랫폼에서는 "당신은 신입 개발자를 채용하기 위한 면접관입니다. 질문은 '~'이고, 이에 대한 지원자의 답변은 '~'입니다. 10점 만점을 기준으로 점수를 주고, 그 이유를 알려주세요." 와 같은 형태 사용
- prompt engineering 참고 문서
스터디
- Header 스터디 버튼 클릭 → 스터디 목록 → 스터디 개설 or 지원
- 스터디 목록 페이지에서 원하는 스터디가 없다면, 스터디 개설 가능
- 스터디 개설
- 100 포인트 차감
- 인원, 기간, 제목, 내용 등을 적어 스터디 개설 신청 → slackbot을 통해 운영진의 slack으로 스터디 개설 신청 알림 도착 → 운영진은 스터디 내용과 개설자의 포트폴리오 링크를 확인하여 스터디 개설 승낙 / 거절
- 스터디 개설이 승낙되면, 스터디 목록에 해당 스터디가 추가되며 다른 이용자들이 지원 가능
- 스터디 목록 페이지에서 원하는 스터디가 있다면, 스터디 지원 가능
- 30 포인트 차감
- 지원하기 버튼 클릭 → '지원하시겠습니까?' 알림창 → 확인 클릭 → 지원 완료 & 승인 대기 중으로 버튼 변경
- 스터디 개설자는 지원자의 포트폴리오 링크를 보고, 스터디 참여 승낙 / 거절
- 스터디 참여가 승낙되면, 참여 중인 멤버 목록에 해당 지원자가 추가됨
- 스터디 참여가 거절되어도 같은 스터디에 대해 재신청 가능 (포인트 되돌려주기 ❌)
Mypage
- localStorage에 저장된 토큰을 통해 검증이 완료되면, Mypage 렌더링
- 단순 링크를 입력하여 다른 사용자의 Mypage에 접속하는 것을 방지
- 사용자 기본 정보 확인
- ID, 닉네임, 포인트, 포트폴리오 링크 확인 가능
- 닉네임과 포트폴리오 링크는 수정 ⭕
- 나와 관련된 스터디 목록 확인
✅ 피드백
- 배포는 주기적으로 진행하여 마지막 배포 과정에서 문제가 발생하지 않도록!
- ERD, FlowChart 등이 ppt에 포함되어 있으면 해당 프로젝트에 대한 이해도 ↑
- Open AI api와 같은 최신 기술 사용한 부분 👍
- ui, 애니메이션이 잘 되어 있었음
- 다른 팀들이 참고할 수 있도록 기술적 설명이 간단하게 있어서 좋았음
- 회고, 기술적으로 어떻게 성장했는지 등에 대한 내용 부족
개선점
- Open AI api 응답 속도를 높이는 방법 (현재 평균 10초 정도 소요)
- 스터디 참여자들끼리 소통할 수 있는 창구 (채팅, 커뮤니티 등)
- 비밀번호 수정 기능
- 아이디 & 비밀번호 찾기 기능
느낀 점
- fork 프로그램을 통해 git 버전 관리 진행하였는데, 매우 편했음
- scss를 통해 css 디자인을 적용하였는데, 중첩문이나 mixin 기능 등을 사용할 수 있어 반복되는 코드를 줄일 수 있었음
- 프로젝트 진행 기간동안 매일 notion에 전날 한 일과 했던 일을 정리하고, 이를 바탕으로 스크럼 회의를 진행하였는데, 다른 팀원들이 무엇을 하고 있는지, 전체 프로젝트가 얼마나 진행되었는지 등을 쉽게 파악할 수 있어 좋았음
- MVP (Minimum Viable Product) 개발 방법론을 적용하여 매 기능마다 git issue와 브랜치를 생성하여 개발을 진행하고, 기능이 작동한다면 main에 merge
공부해보고 싶은 내용
- aos 라이브러리
- slackbot
- EC2 서버 배포
- CI/CD
