rankple: A JavaScript repository from Jong1co

👑취준생을 위한 시간 관리 플랫폼, 랭플👑

2020년 잡코리아에서 724명의 구직자를 대상으로 취업불안감 조사를 한 결과 약 92퍼센트가 불안감을 느낀다고 답변했습니다.

랭플은 열심히 미래를 준비하고 있음에도 불구하고, 항상 불안해하는 취준생들을 대상으로

불안감을 해소시키고, 동기 부여를 해줄 목적으로 만들어진 서비스입니다.

이러한 문제들을 아래의 solution으로 해결하고자 했습니다.

공부 시간을 체크할 수 있는 타이머
다른 사람들은 얼마나 공부하는지 확인하며 경쟁할 수 있는 랭킹 시스템
성취감과 자신을 돌이켜 볼 수 있는 스터디로그

서비스 링크 👉: https://ranking-planner.com

팀 노션 👉: https://c11.kr/161cx

🖥️기능

메인 페이지
- 타임 타이머
- 스톱워치
- 랜덤 명언
- 설정 디데이
- todo 리스트
- 현재 공부 중인 사람 수
마이 페이지
- 프로필 수정
- 디데이 설정
- 스터디로그 그래프 (월별, 주별)
- 날짜별 todo 리스트
랭킹 페이지
- 전체, 20대, 30대 랭킹
- 일간, 주간, 월간 랭킹

PWA

모바일 및 데스크탑에서 쉽게 접근할 수 있도록 PWA를 이용한 웹앱 구현

반응형 웹사이트

대부분의 디바이스에서 알맞은 화면을 출력할 수 있도록 반응형 웹 적용

메인페이지

타임 타이머( or Circle Timer )
- 공부를 시작했을 때 Green
- 휴식 중일 때 Blue
- 목표를 달성했을 때 Red
- 시간은 매일 밤 12시에 초기화됨
스톱워치[Timer]
- 우측 상단에 간단한 시간체크를 할 수 있는 스톱워치로 서버가 아닌 로컬에 시간을 저장하여 사용
투두 리스트
- 오늘 할 일을 잊어버리지 않도록 메모할 수 있는 투두리스트
- 오늘 완료한 todo 개수 / 오늘의 전체 todo 개수로 표현
- 클릭 or 터치 시 수정 및 삭제 가능
현재 공부 중인 인원 수
마이페이지에서 내가 설정한 D-day 슬라이드로 표시
info modal
- 회원 가입 후 최초 접속 시에 자동으로 띄우고, 그 이후 접속 시에는 왼쪽 상단의 info 버튼으로 접근

랭킹페이지

랭킹
- 일간, 주간, 월간 랭킹 확인 가능
- 각각 유저의 랭킹에서 유저의 직종 및 현재 접속 여부 확인 가능
- 전체 랭킹 클릭 시 바텀시트로 나이대 별 랭킹 변경 가능

마이페이지

오늘 공부한 시간과 어플을 사용하면서 공부한 총 시간 확인 가능
프로필 수정
- 닉네임, 연령대, 분야 바꾸기 가능
- 닉네임 변경에 회원가입과 마찬가지로 디바운싱 적용해 UX개선
디데이 설정
- 캘린더 형식으로 날짜 선택 가능
- 추가 시 D-day를 자동으로 계산해주며, 메인 화면에 슬라이드로 확인 가능
월간 스터디 로그
- 공부한 시간 날짜 별로 공부한 시간에 따라서 색 변경
날짜 별 투두 리스트
- 다른 날짜의 투두 리스트를 확인할 수 있음
- Done 수정 불가
주간 스터디 로그
- 일주일 단위로 공부한 시간을 확인할 수 있는 차트
- 월간 스터디 로그와 같은 색상으로 표현

🛠️사용 기술 스택

🛍️파일 구조

ranking-planner-pwa
├─ .eslintrc
├─ .prettierrc
├─ public
└─ src
   ├─ app
   │  ├─ slice //슬라이스 관리
   │  └─ store.jsx
   |
   ├─ common //공통 파일 관리
   │  ├─ css //공통 css module 관리
   │  ├─ font
   │  └─ svg
   |
   ├─ components //조각기능 별 컴포넌트 폴더로 관리
   |
   ├─ hooks //커스텀 훅 관리
   |
   ├─ layout //레이아웃 컴포넌트 관리
   |
   ├─ pages //page 관리
   |
   ├─ shared //router 관리
   │  └─ Router.jsx
   |
   └─ utils //공통 함수 관리

🦾팀원

이름	담당
박종현	타임 타이머(서버 통신), 스톱워치, 메인페이지,Layout, 주간 스터디 로그, 타임피커, pwa, github actions, FCM
김수환	D-day CRUD, D-day 캘린더 , todo list CRUD, 월간 스터디 로그, 마이페이지 날짜별 todo list
한효승	타임 타이머(svg로 구현 및 기본 틀 완성),로그인, 회원가입/프로필 수정 및 디바운싱, 랭킹페이지, s3 + cloudFront

📝아키텍처

vercel -> s3 + cloudFront

vercel 선정
- 첫 프로젝트로 시간이 빠듯할 것으로 판단
- 별도의 CI/CD 구축 없이 자동 배포
- cdn 서버도 우리나라에 특화되어 있음
배포 후 테스트
- 배포 후 테스트 해본 결과 vercel의 평균 속도는 472ms로 로컬과 큰 차이가 나는 것을 확인 local환경보다 굉장히 느린 속도로 데이터가 넘어오는 것을 확인
추론
- 백엔드에서 보내주는 데이터도 아니고, 백엔드 서버의 문제였다면 로컬에서 또한 느린 속도로 넘어와야한다고 판단
- 웹에 문제가 없다면 속도에 큰 영향을 미치는 것은 배포 서버일 것이라고 추츨
결론
- s3 + cloudFront로 다시 배포한 결과 평규 472ms -> 9.79ms(98%)로 속도 단축

date 관련 라이브러리

과정	설명
배경	윤년, 31일을 따로 처리해야 하는 등의 이유로 개발 편의성 개선을 위해 date 라이브러리 도입
속도	moment > luxon > date-fns > dayjs
사이즈	date-fns > moment > luxon > dayjs
결론	프론트의 번들 사이즈는 속도와 직결되고, date 라이브러리를 사용하는 부분이 많지는 않아 속도는 가장 느리지만 번들 사이즈가 작은 dayjs 선정

전역 상태 관리

선택지: recoil, redux
선정 이유:

recoil
- react를 만든 meta에서 만들어 굉장히 react와 호환성이 좋고, 충분히 가볍고, 러닝커브가 작다고는 하지만 아직 recoil의 커뮤니티는 충분히 단단하지 못하다고 판단
- 빠듯한 시간 속에 첫 프로젝트를 하는 입장에서 예상치 못한 오류를 접했을 때 해결하는 데에 많은 시간이 소모될 것으로 예상 2. redux Toolkit👈
- 커뮤니티가 충분히 단단하고, 주간 다운로드 수도 recoil 보다 20배 이상 높은 리덕스를 선택
- 방대한 양의 보일러 플레이트를 줄이기 위해 리덕스 툴킷을 사용

👉기술적 의사 결정 보러가기

🪄유저 피드백 후 개선 사항

기존에 회원가입이나 수정할 때 유저는 닉네임을 입력 후 엔터를 누를 것이라고 추측해 유효성 검사를 submit이나 blur 되었을 때 처리
불편하다는 피드백이 62개의 응답 중 6건
해결 방안
- 입력할 때마다 유효성 검사
- 디바운싱 적용 👈
선정 이유
- 입력할 때마다 유효성 검사 시 한 번 입력할 때마다 빨간색 -> 초록색 -> 빨간색 으로 변해 유저가 당황할 것으로 판단
- 입력할 때마다 get 요청을 보내는 것은 불필요한 리소스를 소모하는 것이라고 판단
- 유저가 당황하지 않고, 불필요한 리소스를 소모하지 않게 검사를 입력이 끝났을 때만 보내는 디바운싱 채택⭐

기존에 투두리스트와 월간 스터디 로그는 별개의 컨텐츠로 마이페이지에서 한 눈에 확인할 수 있게 배치
미완성 된 것 같다는 피드백 62개의 응답 중 3건
이유: 월간 스터디 로그가 캘린더 모양을 하고있고, 오늘 날짜에 흰색 테두리가 되어 있어 해당 날짜를 표현하는 것으로 오해
해결 방안
- 월간 스터디 로그의 흰색 테두리 수정
- 투두리스트와 월간 스터디 로그 연동 👈
투두리스트와 월간 스터디 로그를 연동시켜 해당 투두리스트를 달력으로도 한 눈에 보기 쉽게 수정

Jong1co/rankple