📝 TIL

[TIL] 1주차 미니 프로젝트ㅣ발표

오늘 ONEUL 2022. 11. 18. 00:07

 

☕ Coffee Duckhu(커피덕후) ☕

1. 프로젝트 소개

커피 덕후(coffee Duckhu)

커피 덕후는 커피에 진심인 사람들이 모여 카페별로 인기 메뉴를 살펴보고 나만의 커피 컬렉션을 만들 수 있는 서비스입니다.

👇커피 덕후 보러 가기👇
http://coffeeduckhu.shop/

👇커피 덕후 Github 보러 가기👇
https://github.com/ingwang-kim/coffee_duckhu

 

2. 주요 기능

  • 프랜차이즈 카페의 메뉴를 크롤링하여 DB 저장
  • 카페별 커피 정렬 기능
  • 커피 즐겨찾기 기능
  • 즐겨찾기 개수로 순위를 매겨 인기 커피 정렬 기능
  • 즐겨찾기 한 커피를 볼 수 있는 마이페이지
  • 커피에 대한 설명과 영양정보를 보여주는 상세 조회 페이지
  • 좋아하는 커피에 댓글 기능
  • JWT를 이용한 회원 로그인 기능

 

3. 기술 스택

  • Frontend : HTML5, CSS3, Bootstrap4.0, JavaScript, Jquery, Ajax
  • Backend : Python, Flask, JWT
  • DB : MongoDB
  • Infrastructure : AWS EC2

 

4. 트러블 슈팅

< 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과 웹 드라이버가 추가로 필요하다는 것을 알게 되어 그것들을 사용하여 페이지를 읽어올 수 있었습니다.

 

5. 팀원 정보

이름 맡은부분
김인광 마이페이지 / 즐겨찾기 기능
안은솔 로그인 / 회원가입
이상훈 메인페이지 / 카페별 정렬기능
정다솔 상세조회페이지 / 댓글기능

 

 

기술 매니저님의 피드백

  • 발표자료 준비 너무 잘했지만, 실전 프로젝트 전까지는 개발 관련 부분을 더 신경 쓸 것.
  • 디자인이 주는 힘이 있다.
  • CSS 인라인 스타일은 주의해서 써야 한다. 브라우저에서 렌더링 하는 방식이 다르다.
  • 디테일한 부분을 신경 쓴 게 눈에 보인다.
  • 그 외 모두에게 하는 피드백
    • 프로젝트 중에도 깃헙 리드미 작성해보기
    • 브랜치 나눠서 작업하고, 커밋 메시지 신경 써서 적기
    • 트러블 슈팅은 항상 잘 정리하는 습관 가지기

 

 

오늘의 나는

팀원들과 성공적으로 프로젝트를 마무리했고,
우리 반의 다른 분들도 우리 팀 프로젝트를 칭찬해주셔서 기분이 참 좋았다.

하지만 기술 매니저님의 피드백이 유난히 마음에 오래 남았다.
4일 동안 밤낮없이 개발한 우리 팀의 결과물이 더 인상 깊게 남았으면 하는 마음으로 ppt 발표자료를 준비했고,
준비하면서 정신없이 지나간 시간들을 다시 되돌아볼 수 있어 개인적으로는 의미 있는 시간이었다고 생각한다.
그러나 그 피드백을 들었을 땐, 망치로 머리를 한 대 맞은 것 같았다.
스스로 여기까지만 하면 된다는 한계를 정해놓고 그 이상을 바라보지 않았던 게 부끄럽고 후회된다.
다음엔 피드백 주신 부분들을 잘 생각하면서 기술적으로 더 성장할 수 있도록 방향을 잘 잡아야겠다.

진심을 다해주었던 우리 팀! 10기 B반 8조 커피덕후팀 너무 고생 많으셨습니다!! 그리고 수고했다 나 자신..!

저작자표시 비영리 변경금지