🤩 서비스 소개

서비스 컨셉을 소개하는 영상입니다.

서비스 컨셉을 소개하는 영상입니다.

• 개인 맞춤 코딩테스트 학습 서비스
• 알고파는 개발자 취업 준비생들이 코딩테스트를 효율적으로 준비할 수 있게 돕는 솔루션입니다.
• 알고파는 코딩테스트 연습 문제 선정, 풀이 과정 리뷰를 효과적으로 도와줍니다.

🔑 핵심 기능

1. 개인 맞춤 문제 추천

   알고파는 유저의 문제 풀이 이력을 분석해, 현재 상황에서 풀기에 최적인 문제를 추천합니다.

2. 문제 풀이 로드맵

   알고파는 코딩테스트를 빠르게 통과하기 위한 집약적인 문제 set을 제공하고, 로드맵에서 유저의 문제 유형별 풀이 진행률과 오답률을 한 눈에 확인할 수 있게 합니다.

3. 코드 작성 과정 재생 플레이어

   알고파는 유저의 코드 작성 과정을 자동으로 기록하고, 플레이어를 제공하여 풀이 과정을 쉽게 리뷰할 수 있게 합니다.

4. 풀이 과정 인덱싱

   알고파는 기록된 문제 풀이 과정에 인덱스 메모를 추가할 수 있는 기능을 제공해, 풀이 과정을 간단하게 리뷰할 수 있게 도와줍니다.

서비스 전체 기능을 소개하는 영상입니다.

서비스 전체 기능을 소개하는 영상입니다.

서비스 데모 영상입니다.

서비스 데모 영상입니다.

👨‍👨‍👧 팀원 구성

• FE 개발자 1명 (본인)
• BE 개발자 2명

🛠 기술 스택

TypeScript React Next.js Recoil SWR styled-components ESLint Prettier Vercel

🪄 기여한 부분

[1] 기능 구현

1. 문제 로드맵
   • react-graph-vis 라이브러리 이용해 그래프 구현
   • 👀 코드 보기
2. 맞춤 문제 추천
   • 👀 코드 보기
3. 코드 에디터, 실행, 제출
   • monaco-react 라이브러리를 활용해 코드 에디터 구현 (python, javascript 지원)
   • debounce를 이용해 코드 작성 과정 자동 기록 기능 최적화
   • 👀 코드 보기
4. 코드 작성 과정 재생 플레이어
   • setInterval을 이용해 재생/정지, 드래그, 건너뛰기, 배속 기능 구현
   • 인덱싱 기능 구현
   • 👀 코드 보기
5. 풀이 노트 텍스트 에디터
   • Draft.js 라이브러리를 활용해 rich text 에디터 구현
   • Prism.js 라이브러리를 활용해 에디터 내 code highlighting 구현
   • 인덱스 데이터(코드, 메모) 삽입 기능 구현
   • 👀 코드 보기

[2] 최적화

1. React.memo, useCallback, useMemo 이용해 렌더링 최적화
2. Next.js dynamic import를 이용해 코드 스플리팅 적용
3. 반응형 디자인 적용

[3] API 설계 피드백

[4] 기능 기획, UI 설계

💚 경험과 성장

개발

• 호출 스케줄링과 HTTP 요청, 이벤트 핸들러를 사용하며 JavaScript를 이용한 비동기 처리와 동작 방식에 대해 공부했습니다.
• Recoil 사용법과 개념에 대해 새롭게 공부하고, Recoil과 Context API를 전역 상태 관리에 활용했습니다.
• 코드 스플리팅의 개념에 대해 공부하고, 이를 적용해 페이지의 초기 로딩 속도를 개선했습니다.
• 사용할 라이브러리들의 공식 문서를 읽고 필요한 부분을 파악하는 것에 능숙해졌습니다.
• Lighthouse를 이용해 웹 페이지의 성능을 측정하고, 품질을 개선했습니다.

협업

• 비대면 상황에서도 프로젝트를 원활하게 진행하기 위해 노력하는 과정에서 커뮤니케이션 능력이 향상되었습니다.