Team Project | 🌲 KPT | 최종프로젝트 iPark 중간발표

👋 포스팅 내용 : 배포주소 | Github 주소 | KPT | 피드백 | 팀 프로젝트 회고

 ✨ https://www.ilovepark.net

 ✨ Github

https://github.com/2JYK/iPark_django_backend

https://github.com/2JYK/iPark_frontend

 

KEEP(유지하고 싶은 부분)

• 기획
  • 기능명세서 + 피그마 + ERD + 컨벤션 등
  • 기획에 맞춰 구현한 후 보완점 및 추가점을 찾아 반영하는 부분
• 기본 구현 완성 후 추가 기능 구현
  • 필요한 최소 기능을 목표치로 잡아서 구현
  • 구현된 부분에 대한 리팩토링 진행
  • 테스트 코드 작성을 통해 완성도 있는 기능 구현
• API 및 DB 설계에 대한 로직
  • 기획에 최대한 맞추며 나중에 바뀌는 상황이 오더라도 유연하게 대처
• REST-ful 을 위한 성장
  • backend, frontend 분리
  • serializer 활용
• 배포 : ubuntu command, nginx
• Docker

 

PROBLEM(문제점 및 해결방안)

• 카카오계정에서 사용자값을 받아 회원가입 연결
  • 해결 방안 :
    • 페이지가 넘어가면 정보값 리셋
    • login.html에서 정보값을 보여주고 회원가입하는 것으로 대체
• 카카오로그인 payload 실패
  • 해결 방안 :
    • 인가설정을 위해 ipark 서버 전용 토큰 발행
• 브라우저를 종료해도 access token, payload, refresh token가 유지됨
  • 해결 방안 :
    • html을 종료하면 access token, payload, refresh token이 삭제되도록 함
    • 다른 html로 넘어가도 access token, payload, refresh token이 삭제되는 문제 발생
    • 다른 html로 넘어가는 경우, 새로고침, 뒤로가기를 할 때 유지되도록 조건을 부여해 브라우저를 종료할 때에만 삭제되도록 조치
• 서비스를 사용하는 도중 access token이 만료되면 사용자가 undefined로 변함
  • 해결 방안 :
    • refresh token을 활용해 payload의 exp가 만료되면 access token을 갱신해 지속적으로 사용할 수 있도록 조치
• 공원 상세정보 get -> sessionStorage -> 새로고침 안됨 -> 상세페이지 로드 함수 실행
  • 해결 방안 :
    • 댓글, 북마크 기능의 변동사항 바로 보기 힘듦 -> 프론트에서 조작 후 함수 재실행
• 공원의 옵션과 지역을 동시선택해 검색하면 둘 중 하나의 값만 반영
  • 해결 방안 :
    • django의 Q 객체가 제대로 작동하지 않아 filter를 두 번 사용하였지만 결과 동일
    • model에 through table을 선언해 중간 테이블을 사용하였고, 동시선택에 대한 결과값 얻음
    • try except문을 활용해 공원 검색 결과가 없을 때 발생하는 500 에러 해결
• 지도를 사용하기 위해 html에서 pyscript와 folium을 활용
  • 해결 방안 :
    • 지도는 제대로 나왔으나 작동 시간이 너무 길어 UX에 악영향을 줄 것으로 판단
    • 네이버 지도 api를 활용해 html에 지도 삽입
• 페이지네이션 : 페이지네이션에 필요한 page_num 뿐만 아니라 게시물을 태그별로 보여주기 위한 tag_id까지, parameter 두개 동시 처리 필요
  • 해결 방안 :
    • indexOf 함수를 사용하여 특정 문자를 찾아 줌
    • id값을 str로 변환하고 이 id 값에 “http”가 포함되어 있으면 매개변수의 값을 변경
    • 로그인한 user와 로그인을 하지 않은 user를 구분하기 위해 if문 추가 작성
• 페이지네이션 : 다음페이지로 넘어갈때 토큰값이 같이 넘어오지 않는 오류 and 로그인을 하지 않은 유저가 내가쓴 게시물에 들어가지는 오류
  • 해결 방안 :
    • 조건 추가, “access”값이 undefined인 경우
      • token값을 빈 딕셔너리로 저장
    • “access”값이 undefined인 경우 그리고 (and) id 값이 3일 경우
      • alert창을 띄우고 커뮤니티페이지로 리턴
• 상단바의 “내가 쓴 게시물”을 클릭해 커뮤니티 페이지로 이동 시, 해당 사용자의 게시글만 따로 불러오지 못하는 오류
  • 해결 방안
    • sessionStorage를 사용하여 “내가 쓴 게시물에서 이동할 때”와 “일반적으로 커뮤니티 페이지에 접근할 때” 사이에 차이를 만들어 줌.
      • “내가 쓴 게시물” 버튼 클릭 시 session에 값을 담아줌.
      • 조건문을 사용하여 커뮤니티 페이지에서 게시글을 로드할 때 세션에 값이 담겨 있다면 사용자가 작성한 글만 노출. / 그렇지 않다면 모든 게시물 노출.
      • sessionStorage에 담긴 값은 사용 후 즉시 삭제.

 

TRY(다음을 위한 노력)

• [ ] 공부
  • JWT
  • Javascript
  • 배포
  • github 브랜치
• [ ] 데이터 전송 최적화, Query 최적화 (페이지 로딩 시간 줄이기)
• [ ] 프로젝트 기획에 맞추어 웹 앱의 특성 추가
• [ ] test code
• [ ] 사용자 피드백에 맞춰 프로젝트 업그레이드
• 최종발표까지의 기능 업그레이드
  • USER
    • [ ] 비밀번호 변경 시 사용자의 정보를 통해 사용자 인증 진행
      • 사용자 이메일을 통한 인증 방식으로 보완 예정
    • [ ] refresh token을 통한 access token 갱신 자동화
      • 현재는 사용자가 서비스를 사용하는 도중 access token이 만료되면 undefined로 표기
      • 다른 페이지로 이동하거나 새로고침을 하면 access token이 갱신되지만, 이로 인한 불편함을 줄일 수 있도록 보완할 예정
  • PARK
    • [ ] 공원 상세페이지 함수가 아닌 get을 통해 정보 로드
    • [ ] 공원정보와 댓글,북마크를 분리
    • [ ] url 파라미터로 변경
  • AI 머신러닝
    • [ ] 지도 km → 분
    • [ ] 추천된 주차장의 주차요금
  • COMMUNITY
    • [ ] 사용자들이 댓글로 아닌 실시간 채팅으로 대화할 수 있도록 보완할 예정

 

피드백

• [ ] 회원가입 실패시 어느부분에서 틀렸는지 확인하고 싶음
• [ ] 기본적인 alert 사용 지양
• [ ] 사람들이 공원에 있는지 없는지 실시간으로 확인할 수 있으면 좋겠음
• [ ] 댓글달고 새로고침이 되지 않아서 직접 해야되는 불편함이 있어보임
• [ ] 공원을 사용자가 직접 선택하면서 해야되는 것이 번거로워 보임
• [✔️] 도메인을 사용자가 접근하기 쉽게 하면 좋을 것 같음 ⇒ front.ilovepark.net → www.ilovepark.net

 

느낀점 💭

• 윤슬기

제가 담당한 기능은 소셜로그인, 공원 상세페이지, 배포였습니다. 백엔드에서의 기능이 많지는 않아 status를 다양하게 작성해보고 테스트코드도 작성하였습니다. 소셜로그인과 pagination구현을 하며 기존과는 다른 코드도 작성해본 것도 재밌었습니다. 이제서야 어느정도 프론트엔드를 알 것 같다고 느낍니다.. ci, cd를 하며 상당한 오류들을 마주했고 해결이 되어 https로 배포를 진행하였습니다. 정말 공부할 것이 많다고 느낍니다. ubuntu command, git stash, Docker, sql, netlify, EC2 등 코드를 작성하는 것도 중요하지만 서비스를 배포해야하는 과정도 더욱 접하고 공부하게 되어 좋았습니다.

제가 최종발표까지 현재 작성한 코드의 테스트코드와 프론트쪽의 리팩토링, 그리고 도커 등 지금까지 한 것이라도 완벽하게 이해하고 설명할 수 있는 상태를 개인적인 목표로 하고 있습니다.

2JYK의 최종프로젝트인만큼 배웠던 기능과 이전 프로젝트들에서 도전 기능들로 제시했던 기능들까지 최대한 넣어보았습니다. 이미 해왔던 기능이라 그간의 경험을 바탕으로 같은 기능이여도 꼼꼼하게 업그레이드된 결과물을 만들고 싶었고 이번 역시 힘들지만 뿌듯함을 많이 느낄 수 있었습니다.

• 김경수

마지막 프로젝트이니 만큼 열심히 하였고, 가장 많은 기간은 준 프로젝트이니 만큼 초기 기획을 탄탄하게 만들고 이번에 처음 프로젝트에서 공용 API를 활용하여 다양한 기능을 구현한점 에서 많이 배웠습니다. 다만 아쉬운 점은 지금까지 배웠던 모든 기능과 지식을 사용하지 않은 점입니다. 배웠던 모든 기능을 복습하고 보안하여 프로젝트에 넣어보고 싶었지만 프로젝트의 기획에 따라서 필요한 기능만 넣었습니다. 앞으로 사용자의 피드백에 맞춰 프로젝트를 업그레이드하면서 여러 가지 기능을 추가하고 남은 일주일의 기간 동안 추가할 수 있는 다양한 기능을 추가하여 더욱더 좋은 서비스를 만들고 싶습니다.

• 정대근

이전 프로젝트에서 시도해보지 않았던 것들을 시도해보면서 가야할 길이 멀었다는 것을 느꼈습니다. 또한 모르는 것들 또한 노력하면 해결할 수 있다는 것을 느꼈습니다. 전부 다 완성하지는 못했지만 테스트 코드도 짜보면서 그냥 view만 완성한다고 되는 것이 아니라는 것을 알게 되었습니다. 작성해 놓은 코드를 나중에 여러 번 보면서 많이 수정했었는데, 이를 통해 지속적으로 추가된 기능에 대한 대응과 에러에 대한 대응이 필요하다는 것을 알 수 있었습니다. 좀 더 넓은 시각으로 코드를 짤 수 있도록 노력해야 겠다고 느꼈습니다.

• 정주현

그동안 쌓아왔던 실력들을 최대한 활용해보려고 노력했던 시간이었습니다. 기본적인 CRUD 기능을 포함해 여러 기능들을 수행하며 복습을 하기도 하고, 부족함을 많이 느끼기도 했습니다. 특히, 제가 작성한 코드에 대해 미비한 점이 발견되면서 개발은 계속 고민하고 해결해야 하는 분야라는 것을 다시금 생각해볼 수 있었습니다. 더 나아가 작성하지 못했던 테스트 코드에 대한 아쉬움도 많이 느꼈습니다. 이미 작성이 완료됐다고 생각한 코드들에 문제가 하나, 둘 생기면서 테스트 코드의 중요성을 느꼈고 남은 기간 동안 이를 위해 노력해야겠다는 생각을 했습니다. 최종 발표까지 높은 완성도를 갖춘 프로젝트를 만들고 싶다는 욕심이 생겼습니다.