Skip to content

프로젝트 내용 정리

Kim HyunWoo edited this page Jan 4, 2022 · 22 revisions

데모 웹 사이트 링크

목차

주제

먹거리가 다양한 요즘, 무엇을 먹으면 좋을지 고민하는 사람들을 위해 그 고민을 덜어주는 사이트.

동시에 늘 먹었던 것이 아닌, 새로운 음식점 또한 추천함으로서 색다른 환경을 제공.

음식점의 정보나 리뷰를 실시간으로 얻을 수 있는 SNS형식.

트위터 Velog
타임라인, 사진 업로드, 해시태그 카드형 UI, 게시물 정렬

2가지 SNS 를 레퍼런스로 위치기반 먹거리 리뷰 사이트 구축

기간

2021.09 ~ 2021.12 총 3개월 (학교 팀 프로젝트 수업)

작업 시간

  • 매주 평일 하루 2시간
  • 일일 스크럼 회의 10분

멤버

jini031104 knh4437 stories2 dhgkdud12
스크럼 매니저 개발자 개발자 개발자

프로젝트 진행 방식

Agile scrum 방법론 기반

Sprint

스크린샷 2022-01-04 16 40 42

해당 스프린트가 타겟으로 삼은 스토리에 대한 제품 백로그와 스프린트 백로그

스크린샷 2022-01-04 16 42 41

번다운 차트로 작업 프로세스 시각화

Messenger

스크린샷 2022-01-04 16 54 47 스크린샷 2022-01-04 16 52 57

3주의 스프린트 기간을 잡아 매일 10분간 회의 및 리뷰

Issue

문제 발생 혹은 질문거리가 생기면 이슈로 등록한 다음 참여자들이 댓글로 리뷰하는 형태의 커뮤니케이션도 병행함

기술 스택

FirebaseGitHub Actions Vue.jsVuetifyWebpackJestNodeJSNPMVisual Studio CodeJavaScriptHTML5

개발 과정

기초 개발 플로우 안내

이미지 편집 모듈과 업로드 모듈 연동시 문제 해결 과정

DB 구조 설계 및 테스트

스펙 정보

asdf

  • 기술한 테스트 케이스를 이용하여 일괄 테스트 진행

시나리오

  • CRUD 게시물 (공개 / 비공개에 따라 반환 여부 결정 및 계정 소속 관계 설정)
  • 게시물 좋아요 표시 (좋아요 중복 설정 방지)
  • 게시물 조회시 이미 좋아요를 누른 게시물인지 판별가능해야 함
  • 계정정보 저장 (접근 제한 설정)

마커 곂침 문제 해결을 위한 npm 패키지 제작

스크린샷 2022-01-04 19 03 23

문제점

위치 기반 리뷰 게시물에서 사용자가 같은 주소 혹은 대략적인 주소를 입력 할 경우 GeoApi 에서 반환되어지는 위도, 경도 값은 항상 같아 지도에 표시할 시 같은 위치에 마커가 곂치는 문제가 발생함

해결한 방법

같은 위치에 있는 게시물은 도넛 모양으로 돌아가며 표시되어지게끔 구현

기본 기능인 마커 클러스터링 기능을 사용해도 문제 해결이 가능하지만

도넛 모양 표현 알고리즘 개발을 위해 개발 및 npm 패키지로 등록

스크린샷 2022-01-04 19 16 33

알고리즘

스크린샷 2022-01-04 19 19 59
  1. 초기 위치에 마커를 위치한 후 해당 마커가 차지하는 둘레의 각도 계산
  2. 해당 도넛 둘레에 최대 몇개의 마커를 렌더링 가능한지 계산
  3. 위 과정 반복

테스트

스크린샷 2022-01-04 19 24 01
  1. 입력 파라미터 결정
  • 블럭 크기
  • 도넛 반지름
  • 오프셋
  • 총 렌더링할 마커 갯수
  1. 각 입력 파라미터 별 전달 가능한 범위에 따라 그룹 분리
  2. 각 그룹에서 대푯값 추출
  3. 각 그룹의 조합으로 테스트케이스 추출 및 불가능한 조합 제거
  4. 테스트

마무리

눈에 띄는 버그, 10% 대의 테스트 케이스 커버리지, 기획대비 프로젝트 초기에 많이 포기한 목표들이 있었지만

팀 프로젝트 인원 모두 각자 맡은 바를 성실히 진행하였고 교내 학술제 최우수상을 수상하였습니다.

스크린샷 2022-01-04 19 29 15

팀원간 소통하면서 서로 발전 할 수 있게 되었고 시간관리를 위해 wakatime 사용, 개발자 이외의 지인들에게

서비스 시연등을 하는 일련의 프로젝트 과정을 경험할 수 있었던 좋은 과정이었습니다.