사이드 프로젝트/Loado App

[사이드 프로젝트] Loado App (로스트아크 숙제관리)

biglol 2023. 1. 14. 20:09

로스트아크 숙제관리 및 아이템 시세 조회 App

저연차 때 만든 공부용으로 만들었으며  엄청난(?) 열정과 패기로 개발한 첫 작업물입니다

홍보도 하고 사용자의 피드백을 수용하면서 개발하여 재밌는 프로젝트였습니다.

(Loado App은 현재 운영중이지 않으며 신규 버전으로 재출시 할 수도 있습니다)

개요

집과 피시방을 번갈아가면서 기존 App을 이용할 경우 데이터가 공유되지 않으니 자기가 세팅한 케릭터들의 숙제현황을 보지 못하거나 보고자 할 경우 따로 파일을 저장+불러오기하여 작업해야 했습니다.

이런 문제를 해결하고자 데이터를 DB화하여 언제 어디서든 로그인만 하면 자기 케릭현황을 파악할 수 있도록 했습니다.

 

홍보 URL
https://www.inven.co.kr/board/lostark/4811/3023904 조회수: 11,258 | 추천수: 83 | 댓글: 40
https://www.inven.co.kr/board/lostark/4811/3184415 조회수: 8,630 | 추천수: 42 | 댓글: 15
https://www.inven.co.kr/board/lostark/4811/4124077 조회수: 36,211 | 추천수: 209 | 댓글: 119

 

업데이트 내역

https://github.com/biglol10/loado-react/blob/main/UPDATE.md

 

깃헙 소스

FE: https://github.com/biglol10/loado-react

BE: https://github.com/biglol10/loado-backend

Selenium: Private Repo

* 주요 기능 Client

  1. 케릭터와 휴식게이지 정보 추가, 한 아이디 당 24케릭 추가 가능
  2. 휴식게이지 수정
  3. 카오스던전, 가디언토벌, 에포나 수행 횟수에 따른 휴식게이지 감소/증가
  4. 원정대 단위 컨탠츠는 수정 시 원정대에 반영 (어비스 레이스, 리허설, 데자뷰)
  5. 매일 6시마다 카던, 가디언, 에포나 횟수 초기화 및 휴식게이지 반영. 수요일(로요일)의 경우 주간 컨탠츠 전부 초기화
  6. 휴식게이지가 40 이상 (에포나의 경우 60) 인 케릭터들 알람 표시
  7. 휴식게이지에 상관없이 매일 숙제를 도는 케릭터의 경우 휴식게이지를 고정할 수 있는 기능 존재
  8. 케릭터 추가/삭제에 따른 페이징처리
  9. 케릭터 당 노트 기록 기능 추가 (20자 이내)
  10. 개인 휴식게이지 반영
  11. 관심있는 아이템 시세 조회

* 주요 기능 Backend

  1. 사용자 가입 및 로그인 (이메일 등 개인정보 관리가 힘들 것 같아 비밀번호 복구 기능 존재X)
  2. 사용자별 등록한 숙제 가져오기
  3. 숙제별(케릭터별) 휴식게이지, 컨탠츠 수정반영
  4. 원정대 공유 컨탠츠(어비스 레이드, 리허설, 데자뷰)는 수요일에 초기화
  5. AWS 가상서버로 매일 06시에 배치를 돌려 매일 06시 기준 휴식게이지 정산 (현재는 node-cron 사용)
  6. 매주 수요일에 주간컨탠츠 (군단장) 초기화
  7. 매 6시간마다 공식 홈페이지에서 아이템 List 가격 정보 서버에 전송

* 기술적인 부분 참고

  1. Mongoose model schema의 pre 기능과 bcrypt를 이용해 암호를 저장하기 전 암호화 진행
  2. Mongoose model에 함수를 구현하여 비밀번호 매칭 및 토큰 가져오기 기능 구현 (Actual Model에서 사용가능)
  3. 반복적인 try-catch 구문을 스킵하기 위해 asyncHandler 구현
  4. 직관성을 위해 오류 메시지와 코드를 넘겨주는 ErrorResponse 클래스 구현
  5. Auth middleware로 사용자 authentication 기능 구현
  6. 매일 06 배치를 돌릴 때 돌려야 하는 리스트를 반으로 나눠 비동기 작업을 진행
  7. Routing에 auth 기능 추가
  8. 최상위 admin 계정과 해당 계정만이 할 수 있는 기능을 통해 전체 유저에게 신규 업데이트 알림을 전송할 수 있는 기능 추가
  9. node-cron 을 사용해 06시 배치 실행 및 key에 암호화를 하여 누구도 배치를 임의로 실행할 수 없게끔 수정
  10. C# Selenium을 사용해 매 6시간마다 로스트아크 공식 홈페이지에서 아이템에 대한 가격을 가져와서 서버에 전송 (C# application은 EC2에 배포)
  11. Node Selnium으로 변경 후 Linux 서버에 도커로 구동

* SkillSets

FE: React, Node

BE: Node, Express, Selenium

DB & Infra: MongoDB, Heroku, EC2 -> 카페24

 

* 케릭터 추가

케릭터 추가 버튼 클릭 시 중앙에 케릭터 정보를 입력할 수 있는 팝업 등장

* 휴식게이지 수정

휴식게이지에 마우스 우클릭 시 케릭터의 휴식게이지를 수정할 수 있는 팝업 등장 (숫자는 10단위) 위아래 버튼 및 타이핑으로 수정 가능

* 휴식게이지 감소/증가

카오스던전, 가디언토벌, 에포나 횟수 입력 후 [변경사항 저장] 버튼 클릭 시 변경내역이 있는 케릭터들의 휴식게이지 감소/증가

* 휴식게이지 알람 표시

좌측 상단의 알람 표시를 클릭 시 휴식게이지가 40 이상이거나 에포나 휴식게이지가 60 이상인 케릭터의 이름이 깜빡이게 되는 기능

* 휴식게이지 고정/고정해제 기능

(매일 숙제를 하기에 카오스던전, 가디언토벌, 에포나 입력을 스킵하고 싶은 경우) 케릭터명에 마우스 우클릭 => 알람/알람해제 아이콘이 나오면서 클릭 후 변경사항 저장 시 해당 케릭터는 매일 06시에 휴식게이지가 반영되지 않음

* 케릭터 추가/삭제 페이징처리

[케릭터 추가]로 케릭터를 추가할 수 있으며 케릭터명을 클릭 시 삭제 아이콘이 등장 한 페이지에 8개의 케릭터만 표시될 수 있으며 9개 이상의 케릭터에 대한 페이징 처리 기능

 

삭제 처리 시

* 케릭터 당 노트 기능 추가

케릭터별로 노트를 추가할 수 있으며 좌측 알람 옆의 노트 아이콘 클릭 시 노트가 표시되며 수정가능

* 개인 휴식게이지 증가 기능 추가

06시에 휴식게이지가 자동적으로 증가하게끔 되어있지만 어떤 이유로 증가되지 않은 경우 [휴식게이지반영] 버튼을 클릭하여 컨탠츠 횟수에 따른 휴식게이지 증가 가능

* 숫자선택 대신 체크박스로 컨탠츠 체크할 수 있는 기능 추가

카오스던전, 가디언토벌, 에포나의 경우 클릭하여 몇번 수행했는지 0,1,2,3을 선택하게 되어있지만 보통의 경우 2,3번 한꺼번에 도니 체크박스로 체크할 수 있는 기능 추가 의견반영

* 모바일웹 기능 추가

같은 URL로 모바일로 접속 시 모바일 화면에 맞는 UI 구성 표시

* 프로필 사진 업데이트

사용자가 자신의 프로필 사진을 업데이트 할 수 있도록 개발

* 관심있는 아이템 시세 조회

사용자가 관심있어 하는 아이템에 대한 시세를 일주일 + 6시간 단위로 볼 수 있는 기능