Code Monkey home page Code Monkey logo

momojito_client's Introduction

1. Intro


noimg

  • 팀 명 : Maldivian (몰디비안)
  • 프로젝트 명 : Momojito (모모히또)
  • 프로젝트 형태 : 수강생 프로젝트
  • 팀원 : 조영권(팀장), 강민구, 이정로, 백도현
  • 배포 링크 : https://momojito.net/
  • 서비스 소개영상 : 유튜브 Link
  • 개발 과정 : Dev log

2. Project


✐ About

What if.. 술알못들이 모여 칵테일 정보 사이트를 만든다면?

여러분들은 칵테일을 좋아하시나요? 바 문화는 아직 대부분의 사람들에게 친숙하지 않은 것 같습니다.. 가끔 바에 가게 되면 무엇을 마실지 고민하다가 이름이라도 들어본 칵테일을 찾다보면 결국 마셔봤던 것만 주문하게 되곤 합니다😅.

모모히또는 저희처럼 칵테일 1도 모르는 사람들을 위해, 다양한 칵테일 종류에 대해 소개하고, 누구나 칵테일 관련 컨텐츠를 즐기면서 쉽게 공유할 수 있도록 만들어진 사이트입니다.

모두가 스마트폰을 이용하여 간단한 정보들을 탐색한다는 점을 고려해서, 모바일 웹 환경에서의 이용을 중점으로 개발하였습니다. 물론 데스크톱에서도 반응형 UI로 이용하실 수 있습니다 👍

✐ 사용 기술 스택

✐ 주요 기능

메인페이지

  • 인기 Top 10 : 평점 순으로 10위 안에 있는 칵테일 리스트 (기본 선택)
  • 재료별 칵테일 : 베이스 재료에 따라 필터링된 칵테일 리스트
  • 전체보기 : 전체 칵테일 리스트
  • 칵테일을 클릭하면 상세페이지로 넘어가게 됩니다. 상세페이지에서 재료 버튼을 클릭하게되면 해당 재료가 들어간 모든 칵테일들을 확인하시면서 끊임없이 페이지를 탐색하실 수 있습니다.

칵테일 지도

  • 베이스 재료에 따라 칵테일을 시각화된 애니메이션 형식으로 보여주는 기능입니다. (d3.js)
  • 베이스가 되는 주류를 클릭하고, 그 안에 있는 칵테일들을 찾아 상세페이지로 이동할 수 있습니다.
  • 클릭에 따라 줌인, 줌아웃이 가능하여 계속해서 자유롭게 칵테일들을 탐색해보실 수 있습니다.

칵테일 퀴즈

  • 칵테일과 관련된 재밌는 퀴즈들을 풀어보고 결과를 공유할 수 있는 컨텐츠 입니다.
  • 매번마다 문제는 랜덤한 순서로 나오게 되며, 답을 클릭하면 상단의 progress bar 에서 진행상황이 업데이트 됩니다.
  • 결과를 카카오톡으로 지인들과 공유할 수 있습니다
  • 댓글창을 열어 사람들과 소통하실 수 있습니다

칵테일 이상형 월드컵

  • 자신이 가장 좋아하는 칵테일을 찾아가는 이상형 월드컵 컨텐츠입니다.
  • 카드 드로잉 애니메이션을 넣어서 마치 카드놀이를 하는 듯한 기분을 느끼실 수 있습니다
  • 결과를 카카오톡으로 지인들과 공유할 수 있습니다
  • 댓글창을 열어 사람들과 소통하실 수 있습니다

err

그 외 기능

  • 평점(Rating)
  • My칵테일
  • 로그인
  • 회원가입
  • 유저정보 변경

WorkFlow

[Client]

[Server]

momojito_client's People

Contributors

doehyunbaek avatar jeongro123 avatar young-mason avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

momojito_client's Issues

[client]로그인 구현

ISSUE

  • Group: client
  • Type: feature
  • Detail: 로그인 컴포넌트, UI, CSS

TODO

  1. 로그인 컴포넌드
  2. 로그인 UI
  3. 로그인 CSS

Estimated time

3h

[Client] 메인페이지 구현

ISSUE

  • Group: client,
  • Type: feature,
  • Detail: 메인 페이지 구현

TODO

  1. 공통 레이아웃 작성
  2. 메인페이지 구현
  3. 마이칵테일 구현

Estimated time

Pick one

3h

Final Project 2주차 회고 - 영권

사실 (Fact)

  • 칵테일이라는 주제에 꽂혀서 프로젝트 컨셉이 일찍 정해진건 좋았지만, 어떻게 칵테일을 이용해 괜찮은 프로젝트를 할 수 있을지 쉽게 의견이 모아지지 않았다. 그래서 주말에 틈틈이 모바일 UI를 나름대로 만들어서 팀원들에게 보여줬는데, 어느정도 완성도 있는 UI 디자인이 갖춰지니까 내 의견을 전달하기도 쉬워졌고 더 구체적인 아이디어도 많이 나오게 되었다.

사실에 대한 느낌 (Feeling)

  • 프로젝트가 시각화되어있지 않은 상태에서 아이디어를 주고받으니까 뭔가 얘기가 빙빙 도는듯한 느낌이 들었다.
  • 그린 UI에 대해 팀원들에게 칭찬받았을 때 고마웠고 기분이 너무 짜릿했다

사건에서 얻은 교훈 (Finding)

  • 말로 설명하는거는 한계가 있고, 보여주는 것이 중요한 것 같다. 아이디어가 시각화되어있어야 내가 의도한 바를 정확하게 전달할 수 있음!
  • Figma는 정말 좋은 툴이다. 개발 전에 화면 디자인을 거의 100% 에 가깝게 해놓고 시작할 수 있는 것 같다. 프로젝트 주제와 컨셉이 결정되었다면 Figma로 빠르게 UI를 완성시켜 놓는게 중요하다는걸 알게 되었다.

그래서 내가 앞으로 할 행동 (Future action)

  • 개발을 시작하기 전에 UI를 구체적으로 설계할 수 있도록 Figma 의 기능들을 조금 더 공부 해봐야겠다

Final Project 3주차 회고 - 영권

사실 (Fact)

  • EC2 로드밸런서를 이용한 https 서버 구현과, S3 - Cloudfront 를 이용한 https 클라이언트 요청을 구현하였다. 시간이 정말 오래 걸렸고, 많은 문제들을 해결하면서 진행했음에도 무언가 확실하게 깨닫거나 알게 된게 없는 것 같다.

사실에 대한 느낌 (Feeling)

  • 네트워크의 세계는 너무 방대한 느낌이다. 부딪히면서 배워간다는 느낌보다 어찌저찌 되게 만들었다는 느낌이 강하게 들어서, 이것들에 대해 공부할 시간이 충분히 더 생겼으면 좋겠다

사건에서 얻은 교훈 (Finding)

  • 네트워크, 그리고 배포는 또하나의 커다란 영역인 것 같다. 이것들을 괜찮은 수준으로 이해하지 못한다면, 코딩을 아무리 잘해도 문제가 되는 상황이 많이 생길 것 같다

그래서 내가 앞으로 할 행동 (Future action)

  • 이번에 해결한 문제들에 대한 정리와, 네트워크 ( Cors, 쿠키정책 ) 에 대해 더 깊이 이해해야 될 것 같다. 또 Cloudfront 와 ELB 가 어떤 식으로 작동하는지 보다 구체적으로 공부해야겠다

Final Project 3주차 회고 - 도현

사실 (Fact)

  • 리액트 스프링을 가지고 간단한 애니메이션을 구현해보았다.

사실에 대한 느낌 (Feeling)

  • 완전 다른 차원의 퀄리티라고 생각했던 것을 구현해보니 생각보다 어렵지 않고 아주 재미있었다.

사건에서 얻은 교훈 (Finding)

  • 새로운 스택이라고 겁내지 않고 도전해봐야겠다.

그래서 내가 앞으로 할 행동 (Future action)

  • 다음주에는 더더욱 모험적인 실험을 해보고 싶다... 크큭...

Final Project 2주차 회고 - 민구

사실 (Fact)

  • 프로젝트 주제가 칵테일로 잡히고 어떤 방향으로 나아가야 할지 정하는 과정에서 의견제시를 거의 못한 것 같다. 특히 UI를 설계하는 부분에서 어떤 것이 좋은 UI고 괜찮은 UX인지 감이 잘 오지 않았다.

사실에 대한 느낌 (Feeling)

  • 아직 웹개발자로써 기본적인 소양이 많이 부족하다는 사실을 다시 한번 인지하게 되었다.

사건에서 얻은 교훈 (Finding)

  • 우리 팀원들의 대부분이 백엔드를 지향함에도 불구하고 UX를 고려한 UI를 설계할때, 다양하고 좋은 의견들을 제시하는 것을 보고 대단하다고 느꼈고, 웹 개발자라면 기본적으로 UI, UX에 대한 기본적인 감각이 있어야 한다고 느꼈다.

그래서 내가 앞으로 할 행동 (Future action)

  • 여러 웹사이트나 앱을 접해보고 어떤 점이 좋고 나쁜지, 정리해보는 시간을 매일 가져야 겠다.

Final Project 3주차 회고 - 정로

사실 (Fact)

  • 회원가입, 로그인, 회원정보변경 구현 및 테스트가 거의 마무리 되어간다.
  • 프로젝트 시작 극초기에 commit을 몇 번 bad case로 했다.
  • 퀄리티보다는 속도를 우선시 한건지 모듈화 할 수 있는 컴포넌트를 지나쳤다.
  • 프로젝트의 Bare minimum 달성이 가까워진다.

사실에 대한 느낌 (Feeling)

  • commit 메세지를 한번 P/R하면 수정하는 게 까다롭다는 것을 알게 되었다.
  • 특정 스타일 컴포넌트를 모듈화를 할 수 있다는 것은 알고 있었지만 일단 남은 진도를 어느정도 나간 뒤에 리팩토링하겠다는 생각을 했었는데, 조금 안일하지 않았나 싶다.
  • 지금까지는 프로젝트가 계획한대로 흘러가고 있는 것 같다.

사건에서 얻은 교훈 (Finding)

  • 진행 극초반이라하더라도 commit은 신중히 하자
  • 리팩토링을 염두에 두고 코딩하지 말고 일단 알고있는 수준에서라도 best practice로 코딩을 하자
  • 남은 일정을 잘 소화해서 프로젝트를 더 멋있게 만들자

그래서 내가 앞으로 할 행동 (Future action)

  • 위와 동일

Final Project 4주차 회고

사실 (Fact)

  • D3 기반 칵테일 재료별 시각화 지도를 완성했다.

사실에 대한 느낌 (Feeling)

  • 뿌듯하고 D3에 대한 자신감을 얻었다.

사건에서 얻은 교훈 (Finding)

  • 좋은 예제를 갖고 가벼운 마음으로 문제와 즐거운 시간을 보내면 이해는 따라오게 된다.

그래서 내가 앞으로 할 행동 (Future action)

  • 주저하지 않고 새로운 문제에 도전할 것이다.

Final Project 2주차 회고

사실 (Fact)

  • 그간의 SR이 끝나고 첫 번째 스프린트로 진입했다.

사실에 대한 느낌 (Feeling)

  • SR의 완성도에 만족스럽고 스프린트가 참 재밌다.

사건에서 얻은 교훈 (Finding)

  • 오해가 생기지 않도록 시간을 충분히 보내서 아이디어를 구체화한다는 것을 깨달았다.

그래서 내가 앞으로 할 행동 (Future action)

  • 아이디어를 말뿐만이 아니라 시각화해서 보여줄 수 있도록 노력할 것이다.

Final Project 4주차 회고 - 영권

사실 (Fact)

  • 벌써 마지막주다. 최소한으로 생각했던 기능들이 어느정도 완성되엇다고 생각해서, Advance로 미뤘던 기능들을 개발하고자 하였다. 하지만 기존 기능들에서 생기는 각종 버그 및 이슈들을 해결하는데 더 많은 시간을 쓰고 있는 것 같다. 그래도 Advance로 생각했던 것들도 팀원분들이 착착 진행해주셔서 만족스러운 결과를 기대하고있다

사실에 대한 느낌 (Feeling)

  • 이번주에 특히 협업의 힘을 많이 느끼고 있는 듯 하다. 사실 마지막이라 집중도도 조금 약해지고 계속 물 새듯이 버그가 발견되다보니 다들 많이 피로해졌을 거라 생각했는데, 그때그때 발견되는 이슈들이 해결되면서 새로운 기능도 착착 진행되서 기쁘고 팀원들에게 고맙다

사건에서 얻은 교훈 (Finding)

  • 전혀 생각하지 못한 곳에서 이걸 고쳐야되나 싶을 정도로 애매한 것부터, 심각한 것까지 많은 버그가 생기는건 필연적인 일인거같다. 발생되는 이슈들을 매일매일 한 곳에 정리하고 모두가 공유하는게 제일 중요하다는 걸 알았다.

그래서 내가 앞으로 할 행동 (Future action)

  • 끝날 때 까지 끝난게 아니다 ㅠ 마지막까지 조금 사소한 이슈들도 최대한 놓치지 말아야겠다

Final Project 4주차 회고 - 정로

사실 (Fact)

  • Bare minimum을 끝내고 Advanced를 진행 중이다.
  • Advanced로 다크모드를 구현하려고 하였으나 남은 시간을 고려해 중지하고 다른 것을 시도해 보기로 했다.
  • 배포과정에서 생각지도 못한 곳에서 에러가 많다.
  • AWS에 적용되는게 생각보다 시간이 좀 걸린다.

사실에 대한 느낌 (Feeling)

  • 훌륭한 Bare minimum은 아니지만, 끝내고 advanced를 시도해 볼 수 있어서 좋다.
  • 얼마 안남은 시간이지만 남은 to do list까지 잘 마치고 싶다.
  • AWS 공부를 지속적으로 해야겠다.

사건에서 얻은 교훈 (Finding)

  • 어느정도 여유를 가지고 Bare minimum을 구체적으로 정해 놓으니 좋은 것 같다.
  • 다크모드는 프로의 영역이라 여기 투자할 시간에 좀 더 현실적인 계획을 세워 놓았다면 좋았을 것 같다. (한정된 시간이므로)

그래서 내가 앞으로 할 행동 (Future action)

  • 어느 정도 일정에 여유를 가지고 계획을 세우되, 구체적으로 설정하면 안심이 되고 진행도 잘 되는 것 같다.
  • 계획은 좀 더 현실적으로!

Final Project 3주차 회고 - 민구

사실 (Fact)

  • 팀 프로젝트의 진행상황이 절반 이상 진행된 상태에서 배포 테스트를 해보기 위해, 팀장님(갓영권) 진행하에 S3, EC2를 생성하였다. 예상되었던 쿠키 전송에 대한 block문제를 완벽하게 해결하기 위해 s3와 ec2에 https를 적용시키고 진행해 보고 있지만, 몇몇 네트워크 문제가 있는 상태이다.

사실에 대한 느낌 (Feeling)

  • 이론적으로 맞게 설정을 진행했는데도 에러가 해결되지 않아 조금 막막했지만, 이 문제를 빠르게 부딪혀볼 수 있다는 점이 좋았다.

사건에서 얻은 교훈 (Finding)

  • 전체적으로 프로젝트 코드가 어느정도 진행된 상태에서 테스트는 배포환경에서 진행해야 함을 다시 한번 느꼈다. 또한 배포에 대한 지식, aws 아키텍쳐에 대한 공부도 꾸준히 해야함을 다시 한 번 느꼈다.

그래서 내가 앞으로 할 행동 (Future action)

  • 지금 당면한 이 문제를 해결하기 위한 것 뿐만 아니라, 배포로부터 조금 자유로워지기 위해 꾸준히 배포에 대한 공부를 할 것이다.

[Client] 상세페이지 구현

ISSUE

  • Group: client
  • Type: feature
  • Detail: 상세 페이지 구현

TODO

  1. 공통 레이아웃 구현
  2. 일반 상세페이지 구현
  3. 이색 칵테일 상세페이지 구현

Estimated time

Pick one

3h

Final Project 4주차 회고 - 민구

사실 (Fact)

  • 벌써 마지막 주...서버로직을 어느 정도 마무리 하고 Bug fixing을 하는 와중에, 뭔가 새로운 도전을 해보고 싶었다. 또한 이번 한주는 팀 스케줄에 있어 advanced한 걸 해보는 주였기 때문에 나는 타입스크립트로 서버로직을 리팩토링하는 것에 도전해 보기로 했다.

사실에 대한 느낌 (Feeling)

  • 공부하기전 처음 느꼈던 typescript에 대한 첫인상은 개발을 편하게 해준다길래 조금 쉽게 접근할 수 있는 스택으로 봤었는데, 직접 공부해보면서 적용해보려니 초기 세팅부터 조금 까다로웠고, 공부했던 새로운 개념들을 실제로 리팩토링에 어떻게 활용해야하는지 감이 잘 오지 않았다.

사건에서 얻은 교훈 (Finding)

  • 그렇지만 무엇이든 새로운 걸 배우는 건 낯설다. 낯설어서 어려워보이는 것이다. 이것도 계속 공부하고 사용하다보면 JS처럼 금방 익숙해져 있을 것이라고 생각한다.

그래서 내가 앞으로 할 행동 (Future action)

  • 금요일까지 최대한 열심히 해서 가능하다면 배포까지 해보고 싶다.

p.s. 벌써 마지막 회고다.. 이 글을 빌어 팀원들한테 여러면으로 많이 배웠고 정말 감사하다고 전하고 싶다. 남은 프로젝트 일정도 화이팅입니다~~!!

[client]회원가입 구현

ISSUE

  • Group: client
  • Type: feature
  • Detail: 회원가입 컴포넌트, UI, CSS

TODO

  1. 회원가입 컴포넌트
  2. 회원가입 UI
  3. 회원가입 CSS

Estimated time

3h

Final Project 2주차 회고 - 정로

사실 (Fact)

  • Figma 디자인 툴로 대략적인 UI, Story Board, 기능, 주제, 컨셉이 해결되었다.
  • 모바일 페이지 구현이 얼추 마무리가 되어가는 것 같다.

사실에 대한 느낌 (Feeling)

  • 아직까지는 생각했던 것 보다 진도가 빠른 것 같다.
  • 팀원들과 의사소통이 원활하다.
  • 팀원 개개인이 갖고 있는 장점들이 프로젝트에 잘 반영되고 있는 것 같다.

사건에서 얻은 교훈 (Finding)

  • SR을 할 때 막연하게 대화로만 정하고 착수하는것 보다는
    의견을 "시각화, 구체화"해서 눈덩이처럼 불려나가면 진도가 빠르다.
  • 신문물을 쓰면 진도가 빠르다.

그래서 내가 앞으로 할 행동 (Future action)

  • 협업 할 때 시각화하기
  • 신문물 얇고 넓게 알아놓기

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.