Meekcy

✨Intro

• 프로젝트 명 : Meekcy

• 프로젝트 형태 : 기업협업 프로젝트

• 팀원 : 장봄(팀장), 박재영, 김동훈, 황태하

• 배포링크 : http://meekcy.s3-website.ap-northeast-2.amazonaws.com

• 노션링크 : https://www.notion.so/Meekcy-b71c14b9da38493a9e125807b9c2f100

🔥Project

소중한 사람들과 만나고 싶지만 만남에 제약이 있을때 Meekcy에서 만나 추억을 만드세요.

Meekcy는 시간과 장소에 제약을 받지 않습니다.

Meekcy는 현재 상영중인 영화, 드라마, 교육 등 다양한 컨텐츠로 지루할 틈이 없습니다. 또한 원하는 장소와 편한시간에 지인들과 컨텐츠를 시청하면서 동시에 채팅으로 소통을 할 수 있는 Streaming Service입니다. Meekcy는 같은 경험을 공유하는 문화를 만듭니다.

몸은 멀지만 마음은 더 가까워지세요!

사용 스택 및 스택 아키택쳐

• Stack

  

• Stack Architecture

  

기능 Flow

• UX Flow (Web)

  
  
  
  

• UX Flow (Mobile)

  
  

⭐Stack

Stack

React, redux, styled-reset, styled-Component, axios, socket.io

Works

1. 공동 작업
   • Software Requirement(SR) : 서비스기획, 기능리스트업, 페이지별 기획, 포지션 내 기능 분배, 와이어프레임, 디자인
   • github의 Task, Project 작성
   • 오전회의 및 기업미팅
2. 개발 환경 설정
   • Presentational and Container Components패턴 적용 및 라우터 분리
   • styled-components와 styled-reset를 이용한 CSS기본환경 적용
   • Logo파비콘적용
   • LoadingPage와 WarningPage 구현
   • dotenv로 환경변수설정
3. LoginPage
   • react-google-login을 이용해 GoogleLogin 기능 구현
   • axios psot로 서버에 구글토큰 전달 후 JWT토큰을 전달 받는 flow구현
   • JWT토큰 localstorage에 저장 후 useEffect와 redux를 이용한 로그인 유지 기능 구현
   • 로그인이 되지 않은 사용자 진입시 LoginPage로 연결기능 구현
4. ListPage
   • ListPage에 시청중인 리스트의 endTime을 progress로 구현
   • styled-components를 이용한 css와 반응형 구현
5. Modal창
   • Modal창에 서버에서 보내준 trailer를 연결한 예고편 버튼 구현
   • Modal창의 useLayoutEffect를 이용한 text반응형 구현
   • styled-components를 이용한 css와 반응형 구현
6. StreamingPage
   • StreamingPage의 채팅창 토글아이콘 구현 및 Layout과 반응형 구현
   • video의 play, pause, currentTime변경시 방에 있는 다른 사용자들에게 환경전달하는 socket기능 구현
   • socket을 통해 send된 video환경을 적용하는 기능 구현
   • 이미 방에 접속중인 유저가 새 링크로 다른 방에 접속시 warning기능 구현
   • 이미 방에 접속중인 유저가 새 방을 생성시 알림기능 구현
   • styled-components를 이용한 css와 반응형 구현
7. Deployment
   • S3배포

📝회고

첫번째 프로젝트와 비교하면 마지막 프로젝트에서는 성장이 느껴졌다.

프로젝트를 시작하기 전 SR의 중요성과 이것들을 정리하는 문서화 작업이 좋아졌고 더 세심하고 상세하게 준비를 할 수 있게 되었다. notion을 이용해서 팀원들과 문서화를 했고 마크다운을 사용하는데 자연스러워졌다. 지금은 노션을 사용하는 것이 더 편해졌고 다양한 도전을 시도해보고 있다.

gitHub의 사용도 익숙해졌다. 이전에는 remote하고 pull을 받는것도 긴장되는 작업이었고 두려웠지만 지금은 두려움이 없어지고 그 자리에 흥미가 생겼다. task카드를 작성하고 sprint를 구별하고 label을 만들고 commit메세지도 vim을 이용해서 통일했다. 이제는 readme를 꾸미고 github을 꾸미고 싶어졌다. 프로젝트가 끝났지만 주말에 팀원들과 github을 꾸미는 것을 익히기로 했다.

그리고 기업협업을 하게 되어 기업의 담당자분과 매주 미팅을 진행했고 코드리뷰를 받았으며 기업에 방문해서 회사분위기와 회사팀원들과의 미팅을 가지고 많은 조언과 생각을 공유했다. 개발자로 공부를 했고 진짜 취업 할 준비를 해야겠다는 생각이 들었다. 좋은 기업이었고 팀원들간에 따뜻한 분위기가 너무 좋았어서 나도 빨리 취업을 해서 팀원들과 협업을 하고 싶다는 생각이 들었다.

가장 중요한 프로젝트에서 코딩을 하는 것, 새로운 기술을 받아들이고 적용하는 시간이 줄었다. 이건 좋은 습관을 가져와서 러닝커프가 조금은 줄었다고 생각한다. 그 방법은 아주 심플하다. 공식문서를 보고 started를 보고 작은 프로젝트로 직접 실험을 하고 디버깅을 해보고 콘솔로 흐름을 파악한 뒤 프로젝트에 적용하는 방법으로 진행했다. 귀찮은 방법일 수 있지만 확실하게 이해하고 적용하는데 더 적은 시간이 걸렸으며 디버깅을 하거나 버그발견시에도 더 빨리 해결할 수 있었다.

프로젝트가 끝나고 하루는 코드를 리펙토링하고 왜 이렇게 코드를 작성했는지 공부하는 시간을 가졌다. 다른 팀원들의 코드도 같이 공부하고 나의 코드도 다시보고 정리 할 수 있어서 나의 프로젝트라고 당당하게 말할 수 있겠다고 생각했다.

나중에 개발자로 취업하고 이 글을 보면 어떤 기분일지 궁금하다.