20221117 (목) 1주차 프로젝트 회고
프로젝트 소개
커피 덕후(coffee Duckhu)
커피 덕후는 커피에 진심인 사람들이 모여 카페별로 인기 메뉴를 살펴보고 나만의 커피 컬렉션을 만들 수 있는 서비스입니다.
👇커피 덕후 보러가기👇
커피덕후 | 커피에 진심
coffeeduckhu.shop
주요 기능
- 프랜차이즈 카페의 메뉴를 크롤링하여 리스트업
- 카페별 커피 정렬 기능
- 커피 즐겨찾기 기능
- 즐겨찾기 개수로 순위를 매겨 인기 커피 정렬 기능
- 즐겨찾기한 커피를 볼 수 있는 마이페이지
- 커피에 대한 설명과 영양정보를 보여주는 상세 조회 페이지
- 좋아하는 커피에 댓글 기능
- JWT를 이용한 회원 로그인 기능
기술 스택
- Frontend : HTML5, CSS3, Bootstrap4.0, JavaScript, Jquery, Ajax
- Backend : Python, Flask, JWT
- DB : MongoDB
- Infrastructure : AWS EC2
트러블 슈팅
< CSS 인라인 스타일 >
- 상황 : 커피 메뉴에 hover를 하지 않아도 즐겨찾기가 보이도록 구현하고 싶었습니다.
- 원인 : CSS가 여러 가지 복합적으로 연결되어 있어서 따로 나누기가 힘들다고 생각했습니다.
- 해결 : html 태그 자체에 style 속성을 추가한 인라인 스타일로 css 처리를 해주어 해결하였습니다.
< 로그인한 회원 데이터 화면에 출력하기 >
- 구현하려고 했던 부분: 로그인한 회원의 닉네임을 nav bar에서 보여주고 싶었습니다. 그러려면 현재 로그인한 회원의 정보를 어디선가 받아와야 합니다.
- 시도한 내용: 처음에는 토큰을 쿠키에 저장하기 때문에 서버에서 회원의 관한 정보를(예를 들면 닉네임 같은) payload에 담아 클라이언트로 보내주면 클라이언트에서 토큰을 디코딩 하여 회원 정보를 사용해야 한다고 생각했습니다. JS에서 쿠키를 가져와 여러 번 디코딩 시도하였지만 실패.. 그렇다면 현재 토큰을 받아와서 유효한지 검사 하고있는 서버 쪽에서 해결할 수 있지 않을까? 하고 생각했습니다.
- 해결: render_themplate 함수를 이용하여 html과 클라이언트에서 사용할 닉네임을 변수로 같이 보내줍니다. 클라이언트에서 Jinja2 문법으로 {{}} 받아서 화면에 출력 성공!
< DB 데이터 접근 방식 >
- 상황 : 마이페이지에서 로그인한 회원의 즐겨찾기 리스트를 출력하기 위해 db에 저장된 특정 회원의 즐겨찾기 데이터를 서버 쪽에서 가공하여 클라이언트로 보내주어야 했습니다.
- 원인 : 즐겨찾기 리스트 형식이 [{'coffee_id': 100}, {'coffee_id': 101}, {'coffee_id': 102}] 이런 형태로 저장되어 숫자 값만 추출하기가 어려웠습니다.
- 해결 : 구글링과 질문을 통해 for문을 사용하여 리스트 값에 접근을 한 뒤, 새로운 리스트에 숫자 값만을 append 하여 해결하였습니다.
< 스타벅스 메뉴 정보 크롤링 >
- 시도해 본 내용: 기존의 방식대로 Beautifulsoup을 사용해 크롤링을 시도하였으나 페이지를 읽어오는데 실패했습니다.
- 해결: 정적 페이지는 웹 서버에 이미 저장되어 있는 html을 전달하는 반면에 동적인 페이지는 사용자의 요청에 따라 서버의 데이터를 가공 처리하여 만들어진 html 데이터를 보내줍니다. 스타벅스와 같은 동적 웹페이지를 크롤링 하기 위해서는 Beatifulsoup 이외에 Selenium과 웹 드라이버가 추가로 필요하다는 것을 알게 되어 그것들을 사용하여 페이지를 읽어올 수 있었습니다.
팀원 정보
| 이름 | 맡은부분 |
| 김인광 | 마이페이지 / 즐겨찾기 기능 |
| 안은솔 | 로그인 / 회원가입 |
| 이상훈 | 메인페이지 / 카페별 정렬기능 |
| 정다솔 | 상세조회페이지 / 댓글기능 |
회고
항해99 과정 첫번째 프로젝트로 내가 본 핵심 포인트는
"짧은시간안에 팀원들이랑 협업을 해서 완성을 한다"
였다.
시간이 짧은 만큼 높은 몰입도를 요구했고 그만큼 집중력은 떨어지기 나름인데
그 과정에서도 얼만큼 완성도를 높이냐의 싸움이었다.
pre-onbording때 먼저 이를 대비해 미리 예열한 것이 효과가 좋았다.
기능에 대한 부분들은 시간에 쫒기고 기술의 한계때문에 어느정도 수정 및 삭제를 했지만
진행을 했지만 팀원들과 같이 상의했던 프로젝트의 목적과 우리가 만든 웹페이지의
정체성은 무슨 수를 써서라도 지키기 위해 노력했고 완성했다.
코드를 합치면서 생각보다 많은 에러가 발생했고 다들 변수의 네이밍도 다르고
방식도 다르고 생각하는 부분도 많이 다르다는 것을 느꼈다.
아무리 미리 와이어프레임과 API설계도를 작성해 그에 따라 한다 하더라도 상황에 따라
많은 변수들이 발생하고 그에 따른 계획의 수정이 필요한데 빠른 의사결정을 위해선
원활한 소통이 굉장히 중요하다는 것을 깨달았다.
아무리 잘하는 개발자라도 본인 혼자서는 개발을 다 할순 없기에 결국 정말 개발 실력보다도
소통이 활발하고 원활한 개발자가 진짜 원하는 개발자가 아닐까싶다.
항해기간동안 내 주변의 다른 사람들은 모두 나와 유사한 고민을 하고 있고 유사한 문제에서
막혀있었고 서로 지혜를 맞대어 해결해내는 경우도 많았다.
서로 질문하고 답변하면서 모자란 부분을 하나씩 채워나감으로써 프로젝트가 하나씩 완성되어
갔다는 것을 느꼈고 이것은 앞으로의 나머지 프로젝트과정에서 또한 똑같을 것이다.
그리고 시간이 부족해 구현하지 못했던 기능들은 추후에 자바 스프링을 배우고나서
그 프레임워크를 통해 해결해나가면 된다.
python에 대한 문법적인 능력이 부족해 더욱 더 구현하기 힘들었지만
그 구현하지 못했던 기능들을 지금와서 구현하는 것보다는 그것을 개선점으로 남기고
다음 프로젝트를 진행할때 그 부분까지 보완하는 것으로 채워나가보자
마치 내가 이번에 메인페이지를 잡았던 이유가 슬라이드 구현에 대한 부분과 한번
정말 많고 다양한 페이지를 구현해보고 싶다 라는 마음가짐처럼
다음 프로젝트때도 내가 해보지 못했던 것들 내가 욕심이 나는 것들 위주로 해야한다.
아무래도 메인페이지를 잡으면서 커피덕후 프로젝트의 핵심 기능들을 구현 또는 연결하는 작업을
많이 해야했는데 팀원들이 많이 도와주기도 했고 내가 해결하지 못한다면 프로젝트가 실패가
될수도 있다는 부담감과 책임감에 내 능력 이상으로 훨씬 더 열심히 몰입했다.
문제 해결을 위해서 답답할때는 지푸라기 잡는 심정으로 철판을 깔고 다른 분들에게 지혜를 구했고
그렇게 하나씩 해결해 나갔다.
그리고 좋은 팀원들을 만났기에 더욱 더 집중할 수 있었다.
하지만 다음 프로젝트를 진행할때는 조금 조심해야할게 분명 이번 프로젝트에서의 나는
많은 것을 해보고 싶어하는 현업으로 얘기하자면 일 욕심이 많은 사람이였는데
그에 맞는 실력이 없다면 그것은 프로젝트 실패의 결정적 원인을 제공하는 것이 될 수도 있기때문에
내가 스스로 나를 몰입할 수 있는 환경에 몰아넣는 것과 다른 팀원들에게 피해를 주는 행동사이에서
잘 조율을 해야할 것같다.
나는 이번에는 부끄러움을 무릎쓰고 여기저기 지혜를 구하면서 해결해나갔지만 이것이 100% 해결을
보장해준다는 것은 없기에 그 사이의 영역 어딘가에서 잘 조절할 필요가 있다.