프로젝트 후기 "Weeeating"

corete·2021년 3월 6일
2
post-thumbnail

🙋‍♂️ 프로젝트 소개

**위이팅(Weeeating)**은 위코드를 수강할 때 매일 점심,저녁마다 "또 뭘 먹지?"라고 고민했던 예전 모습을 떠올리며,
현재 위코더 수강생들의 먹거리 고민을 덜어주고 서로의 맛집을 공유하여 조금 더 맛있는 음식을 다 같이 즐기기 위해 기획하고 시작하게 된 프로젝트입니다.

초반에는 많은 기능과 다양한 기획을 했었지만 배포와 사용을 목적으로 두고 최소한의 기능으로 초반 배포를 하게 되었습니다. 기획부터 디자인, 개발, 배포까지 처음부터 끝까지 참여해 진행하였습니다.

👉 www.weeeating.com 👈

🗓 프로젝트 기간

  • 2021.01.18 ~ 02.23

👨‍👨‍👧‍👦 팀원

FrontEnd (3명)

  • 김정현
  • 백은진
  • 전민승

BackEnd (1명)

  • 김예진

🎬 데모 영상


!youtube[AiYnBrRbyag]

🖥 기술 스택

개발도구

  • HTML, CSS
  • JavaScript(ES6+)
  • React
  • React Hooks
  • Styled-component
  • TypeScript
  • Redux
  • Axios

협업 도구

  • Git & Github 를 이용해 버전 관리 및 협업을 진행했습니다.
  • Trello,Slack 로 전체적인 일정 관리와 팀원들의 작업 현황을 파악했습니다.


👍 구현 기능

프로젝트 전체 페이지

로그인, 회원가입, 메인, 테마관4개, 맛집, 오늘뭐먹지?, 위목톡, 어바웃

What I did

메인 페이지, 테마관 2개 페이지, 맛집 리스트,
위목톡 페이지, 어바웃 페이지를 맡아 개발 진행했습니다.

** 1. 메인 페이지**

  • Ranking Top5 목록 출력과 슬릭 연결
  • Ranking Top5에 사용한 상품 컴포넌트 전체 상품 리스트에 재활용
  • 상품 하트 좋아요 기능
  • 테마관 4개의 레이아웃과 자동 슬릭 연결

2. 술과함께, 깃털푸드 테마관 페이지

  • 술과함께 각 종류에 맞는 상품 목록 출력과 슬릭 연결
  • 각 상품에 맞는 하트 좋아요 기능
  • 깃털푸드 테마 상품 목록 출력
  • 상품 클릭 시 해당 상품 상세페이지로 이동

3. 맛집리스트 페이지

  • 맛집 전체 상품 목록 출력
  • 전체 상품 무한스크롤 구현
  • 비회원 좋아요 시 로그인 필요 알람창 구현
  • local Storage를 활용한 회원, 비회원 관리

4. 위목톡 페이지

  • 게시글 리스트 출력
  • 게시글 리스트 + 게시글 댓글 페이지네이션 구현
  • 게시글 글쓰기에 React Quill 라이브러리를 활용해 에디터 구현
  • 상세페이지 수정/삭제 + 댓글 수정/삭제 작성자만 보이도록 구현
  • 상세 수정, 댓글 수정 시 기존 내용 불러와서 수정 가능하게 구현
  • 비회원 글쓰기 및 댓글 작성 시 로그인 필요 알람창 구현

5. 어바웃 페이지

  • AOS 라이브러리를 사용해 애니메이션 구현


😊 좋았던 점

너무 재미있었다.

사전 스터디 때부터 이어진 인연으로 위코드를 다니며 정말 친하게 지냈지만,
프로젝트 때는 겹치지 못해 프로젝트를 같이 못 해본 게 아쉬웠었는데 이번에 Weeeating을 기획하며 드디어 같이 프로젝트를 같이 진행하게 되었는데 서로 잘 알고 있기도 하고 친해서 그런지 프로젝트를 진행하는 동안 너무 행복했다.
잘하는 부분에선 서로 잘한다고 우쭈쭈 해주고, 막히는 부분에선 서로 힘을 모아 해결하며 사이트가 하나씩 틀이 잡혀가는 게 너무 보기도 좋았고 재미있었다.
다들 프로젝트 중에 취업이 돼서 프로젝트에 모든 걸 쏟을 수 없어서 많은 부분을 빼고 초반 배포를 했는데 취업이 늦게 돼서 프로젝트에만 집중을 했다면 좀 더 멋있는 사이트가 나올 수 있었을 텐데 하는 살짝의 아쉬움이 있지만 프로젝트보단 취업이 중요하니까~~
다음 프로젝트는 다들 현업 경험치 먹고 더 성장해서 더 재밌게 하고 싶다.

많이 배웠고 성장한거....같...다?

이때까지 진행한 프로젝트들은 배포를 하지 않고 원래 사이트를 참고하여 기능들을 구현하는 식으로 프로젝트가 진행됐지만, 이번 Weeeating 프로젝트는 배포도 진행되고 사용자가 이용했을 때도 생각하며 기획하고 개발을 진행해야 했다.
사용자가 실제로 이용을 한다고 생각하니 UX/UI 도 그렇고 기능적인 부분에서도 세심하게 신경 써야 할 부분들이 너무 많았다. 그런 부분들을 신경 쓰며 수정하면서 개발을 진행하고,
옆에 잘하는 팀원들의 코드도 보고 같이 머리를 모아서 기능 하나하나를 구현하다 보니 내가 모르던 지식도 많이 알게 됐고 다양한 로직들을 보며 저렇게도 가능하구나를 느끼면서 정말 많이 배웠다.

😥 아쉬웠던 점

TypeScript...

타입스크립트의 중요성을 깨닫고 조금씩 공부를 하던 도중 혼자서 공부하는 것보단 프로젝트에 적용을 해서 공부를 하는 게 더 빨리 배울 수 있을 거 같아서 이번 프로젝트에 처음으로 타입스크립트를 적용해서 진행을 했다.
역시 혼자 공부할 때는 그래도 할만하다 생각했는데 실제 프로젝트에 적용을 하려고 하니 사소한 거에서부터 막히기도 했고 내가 제대로 모르는 부분들도 많이 보였다. 그렇다고 해서 타입스크립트만 계속 잡고 공부하기엔 할 것들이 너무 많아서 타입스크립트를 적용해서 쓰긴 했지만 아직 완벽하게 알고 쓴 게 아니라 에러가 났을 때만 검색을 통해 에러 정도만 잡아서 넘어간 느낌이라.. 이 부분이 상당히 아쉽다...
타입스크립트는 앞으로도 많이 쓰일 것 같고 중요하다고 생각하기 때문에 앞으로 조금 더 많이 공부를 해야 할 것 같다.

🤗 프로젝트 후기

너무 재미있었고 많이 성장했고 배웠고 꿀잼....또 하고싶다....

처음에 프로젝트에 대한 얘기가 나오고 원래 했던 클론이 아니라 기획부터 개발까지 하자고 했을 때 개발만 해도 벅찰 수도 있는데 기획까지 해서 하면 힘들지 않을까...중간에 프로젝트를 중단 하는거 아닌가 아닌가 걱정을 했다. 하지만 그 걱정은 쓸모가 없는 걱정이였다...
기획자로 일을 했었던 예진님이라 그런지 마법처럼 슈루룽 하고 기획을 해주었고
위이팅 디자인 전체도 예진님이 다 작업해줬다. ⭐우리에겐 빛예진이 있었다...⭐
이번 프로젝트를 하면서 예진님의 역할이 너무 컸는데(PM, 기획, 디자인, 백엔드) 단 하나의 부족함 없이 오히려 넘치게 너무 잘해줘서 이 글로나마 대신 고마움을 전하고 그저 빛예진...
프로젝트 중간에 취업을 했지만 끝까지 자기 역할 다 해준 은진님도 고마워요 많이 배웠어요..
똑같이 취업도 했고 이직까지 하면서 더 정신없었던 민승님도 모여서 회의할때나 다같이 해야할때 끝까지 와서 해줘서 고마워요.

이번 프로젝트를 진행하며 개발자가 기본적인 개발 실력은 당연히 있어야 하고,
더 뛰어난 실력자가 있더라도 같이 작업을 했을 때 재밌고, 커뮤니케이션이 잘 통하는 게 일의 능률이나 결과에 더 좋은 영향을 줄 수 있다는 걸 한 번 더 느꼈다. 그래서 나는 나의 원래 목표대로 노력하고 성장할 것이다.

소통을 중요시하며, 함께 하고 싶은 개발자
새로운 기술에 두려움 없이 도전하는 개발자
뒤돌아 봤을 때도 생각나고 다시 같이 일하고 싶은 개발자





프로젝트를 마무리하고 다 같이 맛있는 걸 먹으러 가는 지하철 안....

3개의 댓글

comment-user-thumbnail
2021년 3월 10일

따봉

답글 달기
comment-user-thumbnail
2021년 3월 14일

기술스택 프론트엔드 내용 퍼가요~♡

답글 달기
comment-user-thumbnail
2021년 4월 25일

후기글 읽으니까 바로 어제였던 것처럼 생각나네 ㅎㅎ
진짜 너무너무너무 재밌었다 다른 무엇보다도 함께 하면서 느낀 재미랑 UI/UX 고민하면서 기능 구현했을 때의 희열감이 가장 많이 남는 것 같아요

사실상 프론트엔드 전반적으로 다 챙긴 정현님, 고생 많았어요
회사일 집중하다가 또 한 번 프로젝트 갑시다!

답글 달기