내일배움캠프 AI - 75일차 TIL, 2022.12.15

스파르타 코딩클럽 내일배움캠프 AI 웹개발자양성과정 3회차

2022.12.15. 75일차 - TIL

 

 

축제어때

---

프로젝트 목표

전국 축제 추천 및 커뮤니티 서비스

 

팀명

야.삐.멍😺🐣🐤🐥🐶

 

팀원 구성

• 팀장 : 정태희, 이효정
• 팀원 : 정유준
• 팀원 : 송창주
• 팀원 : 이승연

 

역할

• 딥러닝, 백엔드 : 이효정, 이승연
• 백엔드 : 송창주, 정유준, 정태희
• 프론트엔드 : 정태희

 

기본 기능

1) 회원가입, 로그인, 로그아웃

• 축제게시글 추천하기
• 축제게시글: 롤링한 축제 정보를 보여주는 게시글
• 회원가입 시 선택한 지역 기반으로 랜덤하게 8개의 축제 정보 추천
• 추천받은 축제게시글은 상세보기 페이지로 연결

 2) 축제게시글 리스트/검색/상세보기/북마크

• 축제게시글 id 순으로 리스트
• 축제명, 축제내용, 축제가격 검색 입력창
• 축제 지역 버튼으로 해당 지역만 필터링
• 축제게시글 상세보기(축제이미지, 축제제목, 축제설명, 축제기간, 축제주소, 축제가격)
• 축제 게시글 북마크 기능
• 해당 축제게시글에서 모집하기 버튼 연결

 3) 모집게시글 리스트/생성/상세보기/수정/삭제

• 모집게시글 : 특정 축제에 대한 같이 갈 사용자를 모집하는 게시글
• 모집게시글 id 순으로 리스트
• 모집게시글 생성하기(모집게시글 제목, 내용, 모집마감일, 모집인원)
• 모집게시글 상세보기, 수정하기, 삭제하기

 4) 모집게시글 댓글 생성/수정/삭제

• 해당 모집 게시글에 대해 여러가지 질문을 달기 위한 댓글 기능
• 댓글 생성/수정/삭제 가능

 5) 리뷰게시글 리스트/생성/상세보기/수정/삭제

• 리뷰게시글 : 사용자 간 커뮤니티를 위한 자유로운 리뷰 게시글
• 리뷰게시글 id 순으로 리스트
• 리뷰게시글 생성하기(리뷰게시글 제목, 내용, 이미지)/상세/수정/삭제

 6) 리뷰게시글 댓글 생성/수정/삭제

• 해당 리뷰 게시글에 대한댓글 기능
• 댓글 생성/수정/삭제 기능

 7) 마이페이지

• 프로필 정보 보여주기
• 내가 신청한 게시글 정보 보여주기(대기중/수락/거절)
• 내가 작성한 모집게시글에 대한 신청게시글 중 대기중/수락만 보여주기
• 보여지는 신청게시글 상태 수정하기(수락 or 거절)
• 북마크한 축제게시글 모아보기

 

차후 추가 및 개선점

•  배포하기
•  static file을 aws s3에 업로드 하고 관리
•  로고 클릭 시 홈이동 기능
•  도메인 구매 및 연동하기
•  프로필 수정 기능(지역, 사진, 닉네임, 자기소개)
•  신청게시글 거절당했을 때 대처방법
•  모집게시글에 대한 신청게시글 수락 모집인원으로 제한
•  신청게시글 생성을 모집 마감일로 제한
•  모집게시글 수정 시 마감일 부분 기존일자로 유지할 수 있게 개선
•  이미 가입된 사용자로 회원가입 시 안내 문구 설정
•  각 게시글 별 페이지네이션
•  전체적인 css 수정
•  테스트 코드를 작성
•  카카오맵 기능 구현
•  전화번호 or 이메일 인증 구현

 

트러블슈팅

https://github.com/Naerumii/BestChoice/wiki/%ED%8A%B8%EB%9F%AC%EB%B8%94%EC%8A%88%ED%8C%85

GitHub - Naerumii/BestChoice: 야삐멍 추천서비스 프로젝트

 

화면 설계

DB 설계

API 설계

 

 

 

 

 

 

 

진행과정

첫번째, 축제 크롤링 / drf 백엔드 및 프론트엔드 기능 구현

크롤링에 꽤 많은 시간을 잡아먹었다. 우선, 원래 계획은 앞으로 진행될, 그리고 진행중인 축제 정보만 가져올려고 했는데 자료가 너무 없어서(2023년 정보를 미리 업데이트 해놓지 않았다… 일해라… 시청구청) 어떻게 할까 고민하다가 결국 튜터님의 조언을 받아 그냥 2022녕의 축제 정보 전체를 크롤링해 보여주기로 했다. 그리고 또 문제가 되었던 부분이 크롤링한 정보가 정말 정돈되어있지 않아 당장 사용이 불가능했다. 페이지 자체에 잘못 입려되어있는 것도 있었고, 양식이 일치하지 않는 것도 있었다. 그래서 csv 파일 켜놓고 팀원들과 같이 수기로 작업했다. 그렇게 크롤링만 거의 2-3일을 잡아먹었다.

프론트엔드 이번에는 뭔가 초반부터 틀을 잡기가 너무 힘들었다.. 최대한 프론트적인 JS는 없도록 만들었다. 백엔드의 경우 승연님과 효정님이 주도적으로 이끌고 창주님 유준님과 함께 진행하였으며 태희님은 프론트를 어느정도 끝내고 승연님 효정님과 함께 모집게시글을 작업하게 되었다. 기본적으로 구현해야 되는 기능들은 빠르게 완성시켰지만 추가적인 검색,필터,조회수,신청 등등 기능들을 만들 때 시간이 걸렸다.

두번째, 축제추천 시스템 연동

그리고 사용자가 이미지를 업로드한 것을 opencv로 여는 것이 어려워 결국 모델을 변경해 진행했다.

세번째, drf 백엔드와 프론트 기능 연동

비교적 원할하게 백엔드-프론트 기능이 연동 되었다. 시간이 부족해서 프로필 기능은 연동하지 못했지만 적어도 방법을 몰라서 연동하지 못한 기능은 없었다. 지난번 코드 리뷰를 통해서 팀원들이 백엔드-프론트 기능 연동을 잘 이해하고 넘어간 것이 도움이 되었던 것 같다. 중간 발표 이후 다시 코드 리뷰를 하면서 피드백 수정을 진행해야겠다.

네번째, 마지막 전체 연동 및 구현 테스트

백엔드, 프론트엔드 서버를 동시에 열어서 오류 없이 잘 연동되는 것을 확인했다. 기능을 확인하는 과정에서 자잘한 오류도 일부 식별했는데 수정할 수 있는 것은 수정하고, 시간이 많이 소요될 것 같은 오류들은 따로 오류리스트를 작성해두고 중간발표 이후 보완하기로 했다.

 

시연 영상

https://www.youtube.com/watch?v=aBgFLqNhcow

 

Good & Weak

😀Good

• 팀원 간 활발한 소통
• 오류 다같이 고민하기 / 시간을 정해 놓고 매일 트러블슈팅 공유하기
• 기능 우선순위 정하기
• .env를 통해 settings에서 secret key 처리를 통해 보안 유지
• GitHub 컨벤션 사용 commit push
• Git과 Slack연동을 통한 빠른 일처리

😧Weak

• 백엔드와 프론트엔드 간 연동 소요시간
• 코드 리팩토링(시간 부족)
• 파일, 함수 등 기능별 가독성 부족
• 초반 기획 때 파악이 부족하여 코드를 작성할수록 필요한 기능이 점점 생겨남

🤔How to

• 파일 구조화
• 기본적 프론트 구현 및 연동 숙지하기
• 코드 리뷰를 통해 JS 코드 이해도 함양
• AWS 크레딧 발급을 활용한 서버 배포하기
• 건강관리 잘하기(아프지 말자)🤒💊😷

 

느낀점

• 정태희
  이번 프로젝트에 프론트엔드를 담당하여 처음부터 5~6일동안 프론트 작업을 하게 되었다. 배우지 않고 구글링을 통해 부족한 부분을 채워가면서 했는데도 뭔가 많이 부족햇다. 중간발표때 까지 부랴부랴 만들긴 했는데 마지막 백엔드 연동과정에서 많이 틀어졌다.. 이번에는 시간이 부족한 것 보다 백엔드 와 프론드 연동 실력이 부족했다고 개인적으로 생각한다. 다른 팀들은 어떤지 모르겠지만 몇몇 팀들의 상황을 물어보면 이미 다 만들고 배포를 진행하는 모습에 내 자신의 부족함을 많이 느꼈다… 중간발표 이후에 튜터님 들의 피드백을 듣고 보완해야 할 부분을 기간 내에 수정하고 배포까지 꼭 완성 할 것이다.. 그전에 AWS 크레딧부터 받아야한다.. ㅠㅠ
• 정유준
  로그인 기능의 구현은 작성에 어려움이 없었지만, 역참조를 사용하여 가입을 신청한 게시물의 상태 정보를 불러오는 것이 어려웠다. 또한 일반적인 페이지가 아닌, 팝업창에서의 데이터를 불러오고 싶었지만, 시간 관계상 완료하지 못하여 아쉬웠다. 중간발표 이후 피드백을 통하여 부족한 부분을 발전시키고, 완성되지 못한 부분을 빠르게 완료하여 배포 및 실제 사용후기를 통한 재수정을 빠르게 해야하겠다고 마음먹었다.
• 송창주
  프로젝트를 진행하면서 초기 계획했던 기능보다 더 추가된 기능들이 많아졌다. 프로젝트 초기 기획이 중요하다고 하는데 더 세밀한 기획에 신경써야 할 것 같다. 기능들이 추가 되며 중간발표 전까지 기능을 구현하기 위해 바쁘게 코드를 작성했다. js를 작성하며 직면한 오류들을 수정하는데 어려움을 느꼈으며 많은 시간을 썼다. 여러 프로젝트를 진행하며 조원들의 숙련도가 올라 새로운 기능들이 추가됐음에도 기간 내에 기능 구현을 완료하는 등 우리만의 성취감을 느끼는 부분들도 있지만 코드 리팩토링이나 배포 등 아직 아쉬운 부분 또한 많이 남아있어 최종 발표까지 과제들을 잘 정리해야겠다.
• 이승연
  매번 프로젝트 진행할 때마다 생각하지만 시간..(그런데 시간이 충분하면 완벽할지는 미지수) 그래도 코딩은 확실히 이전보다 빨라진 것을 느꼈다. 문제는 다른 팀들은 우리보다 배로 빨라졌다는 것이다.(뭐 이렇게 다들 빠르신지…;;;) 이번 프로젝트에서 느낀점은 확실히 각 기능을 정확히 구분해 팀원들에게 배분해서 진행하는게 진행 속도가 월등히 빠르다.(이건 전체적인 프로젝트 진행속도도 있겠지만 파일별로 구현시 github에서 충돌이 훨씬 적어 merge 작업도 매우 수월하다) 그리고 이번에 매우 반성하는 점이 있다면 코드 리팩토링을 못했다는 것… 여기저기 기능을 살피고 무엇보다 항상 기능 구현이 우선이어서 코드 정리는 후순위여서 중복되는 코드도 많고, 불필요한 코드, 불필요한 주석, 비효율적인 파일 구조 등의 문제가 있었다. 그러다보니 나중에는 팀들이 기능 구현할 때 코드 파악이 어려워 꽤 애를 먹었다.(문제는 당장 구현해야 할 기능이 넘쳐나서 도저히 코드 정리할 엄두가 안 났다는 것… 그냥 달려…) 중간발표 끝나고 튜터님들 피드백 잘 정리해두고 피드백들의 우선순위를 잘 정해 원하는 부분까지만 수정하고, 배포에 넘어가야겠다.(아주 중요!!)
• 이효정
  지금까지 프로젝트를 진행하면서 시간에 쫓긴적이 많아서 이번 프로젝트는 계획을 구체적으로 수립하고 여유롭게 진행하는 것을 목표로 했다. 프로젝트를 진행하면서 느낀점은 우리팀이 정말 많이 성장했다는 것이다. 다들 코드에 대한 이해도가 초반보다 많이 좋아져서 다양하게 활용하는 모습도 볼 수 있었고, 프로젝트 시작하면서 기능에 대한 역할 분담이 확실하게 되어 진행 속도가 빨라진 것도 좋았다. 항상 아쉬움이 남았던 git 활용도 아직 서툴지만 기존보다는 컨벤션을 준수하고 다양한 기능을 활용했다는 점에서 잘 되었다고 생각하고 발전 가능성이 있다고 생각한다. 아쉬운 점은 초기에 계획했던 기능들을 얼추 구현을 했는데 예상치 못한 오류들이 계속 발견되었다. 중간발표 전까지 수정하기에는 시간이 부족했고 그 외에도 불필요 코드, 주석, 파일 정리 등이 잘 되지 않아 가독성이 좋지 않았다. 중간발표 이후 피드백에 대한 수정과 동시에 배포 준비를 하면서 코드 리팩토링도 꼭! 해야겠다.