Today I Learned

Fastflix에서 헤더에서 사용자를 선택하면 해당 사용자에 맞는 정보를 다시 불러오는 기능을 getter, setter 를 이용하는 방식으로 고치고자 한다.

우선 내가 찜 한 콘텐츠를 보여주는 페이지에 적용해보았는데 되긴 하는데 너무 느리다. 개선해봐야겠다.

Fastflix

Web FrontEnd, BackEnd, iOS 세 팀이 협업한 Netflix Clone Project

패스트캠퍼스 프론트엔드 개발 스쿨의 파이널 프로젝트로 진행했다.

팀원

박수빈, 한현진, 정수영

역할

나는 프론트엔드의 팀장을 맡았다.

팀장으로써의 역할

Netflix를 분석하고 flow chart와 wire frame을 작성했다. 설계 부분에서는 소프트웨어 공학 수업에서 배운 설계 방법이 많은 도움이 됐다. 요구분석을 통해 Requirment List를 도출하고 Requirment List를 바탕으로 팀원 간 역할을 부여했다.

한 달 규모의 프로젝트를 리드해본 적이 없었기에 초반에 부담이 컸다. 어떻게 해야 팀원들과 잘 협업해서 좋은 결과물을 낼 수 있을 지가 가장 큰 고민이었다. 고민 끝에 각자의 역량에 맞게 역할을 분담하고 Gantt Chart를 이용해 스케줄을 관리했다.

처음에는 4명이 팀이 되어 시작했는데, 그 중 2명은 개발에 자신이 없는 태도를 보여 간단한 Component를 하나씩 맡겼다. 현진이는 핵심 기능이라고 할 수 있는 Netflix의 Slider 구현을 맡았다. Gantt Chart를 이용한 스케줄 관리는 스프린트 미팅 때 강사님께도 칭찬을 들었다.

남은 내 몫은 팀원들이 맡은 Component를 구현할동안 다른 모든 것들을 구현하는 거였다.

구현에서의 역할

팀원 한 분이 중간에 하차를 해서 Profile에 관련된 구현을 내가 맡았다. 현진이가 모든 Slider를 작업하고, 수영님이 비디오 플레이어의 외관을 꾸몄다. (데이터 바인딩은 내가 했다^^;)

밑의 작업들을 내가 진행했다.

• Component 분리

• Routing 및 Routing Animation 구현

• 팀원들이 작업할 수 있는 환경을 만들기 위해 Home과 Movie의 HTML/CSS을 우선 작업

• Authentication Guard로 로그인 하지 않은 유저의 접근 제한

• 로그인을 하지 않은 유저가 보게 될 초기 화면 구현 (초기 페이지에서 회원가입과 로그인이 가능)

• 4단계로 이루어진 회원가입 기능 구현

• 2중 로그인 기능 구현 (1. 계정으로 로그인 2. 프로필로 로그인)

• Server의 API가 완성됨에 따라 HttpClient 통신을 제공하는 Angular Service 구현

• 검색 기능 구현 (사용자가 검색어를 입력할 때마다 화면에 검색 결과 반영)

• Slider, Watch Component 등으로의 Data Binding

• 각 유저 별로 영화를 좋아요, 싫어요, 내가 찜 한 목록에 추가하기 기능 구현

• 프로필 생성, 수정, 삭제 기능 구현

역경

프로젝트는 다사다난했다. 처음에는 구현할 게 많게 느껴져 구현이 어려울 거라고 생각했지만, 모든 문제는 사람이 만들었다. 프로젝트 진행 중반 쯤에 각 팀마다 하차자가 나왔다. FrontEnd에서 한 명, BackEnd에서 한 명이 하차했다. BackEnd에서 하차하는 팀원이 Github Organization 레포지토리를 삭제하는 일이 있었다.

이 때 2주동안 열심히 심어놓은 잔디들이 날아갔다. 다행히 레포지토리가 복구되어 잔디도 복구했지만 이 경험을 통해서 사람이 가장 무섭고 위험하다는 것을 깨달았다.

그 외에 힘들었던 것은, 팀원 간 역량 차이가 많이 나서 일의 분배가 균등하지 않았다는 것이다. 나보다 나이가 10살은 많은 팀원을 통제하기도 힘이 들었다. 나는 그들이 하지 못 하는 일을 하기에 바빴다. 막바지에 가서는 나와 현진이 2명이서 프로젝트를 완성한 꼴이 되었다. 조별과제 절망편이다. 어쩌면 교수님들은 인생을 배우라는 의미에서 조별과제를 내주시는 걸지도 모른다.

성과

아주 예쁜 Fastflix 웹 페이지가 완성되었다. 도메인을 구매해 웹에 올렸다.

✨ http://www.fastflix.co.kr ✨

위의 힘들었던 점들로부터 많은 것을 배우고 성장한 것이 가장 큰 성과라고 할 수 있겠다. 또한 BackEnd에 대한 흥미가 높아져 부스트코스 웹 프로그래밍 강의를 들으며 BackEnd 공부를 하고자 한다.

의미 있는 데이터를 받아서 화면에 표시하는 일이 굉장히 재미있었다. 한 달 간 팀을 리드해본 경험도 쌓았다. Git을 능숙하게 다를 수 있게 되었고, 프로젝트 진행 시 커뮤니케이션의 중요성을 배우고 협업을 위한 도구 사용에 대해서도 배웠다.

프로젝트를 진행하며 많이 성장했고 다음에는 더 잘 할 수 있을 거라는 자신감이 생겼다. 좋은 경험이었다!

Today I Learned

• 프로젝트를 build 해서 서버에 올렸다. 깔끔한 앱을 보여주기 위해서 테스트 용 log를 제거했다.

취업 클리닉

• 능력은 개인이 가지고 있는 것, 역량은 그 능력으로 성과를 내는 것이다.
• 자기소개서의 소제목에 성과가 드러나도록 써야 한다.

Today I Learned

• 트러블 슈팅 시간에 상태 관리를 위한 Subject 에 대해서 조언 받았다.

  Hot Observable 공부하기

• 영화 장르 별로 화면을 보여주는 기능을 추가했다.

• 이제 프로젝트가 거의 마무리 되어 프로젝트를 build 해야 한다.

Today I Learned

• 오늘은 프로젝트의 잔 오류를 수정했다.

Wait for User to Stop Typing

• Netflix는 User가 검색창에 한 글자를 입력할 때마다 검색 결과를 화면에 보여주는데, 약간의 텀이 있어 사용자 경험이 부드러웠다.
• 나는 처음에 Keyup Event Handler에서 input value를 가져와 조건에 따라서 검색을 시켰는데, Search component에 쿼리를 붙여서 라우팅 하는 방식으로 구현하다 보니까 검색어가 완성되지 않았을 때 오류가 나며 깜빡이는 이슈가 생겼다.
• User가 원하는 검색어를 입력할 때까지 기다리는 일이 필요했다! !wait for user to stop typing ◀ 이 글을 참고해서 훨씬 부드러운 검색 화면을 구현했다.
• setTimeout을 이렇게 쓸 수 있다니 굉장히 유용한 스킬을 배운 것 같아 기분이 좋다.

Module 분리

파이널 프로젝트의 구현이 거의 끝나서 모듈을 분리하는 작업을 할 것이다.

Feature module, Shared module, Core module로 분리한다.

• Feature module : 기능 모듈. 특정 화면을 구성하는 구성 요소
• Shared module : 공유 모듈. App 전역에서 사용하는 Component, Directive, Pipe 등
• Core Module : 핵심 모듈. App 전역에서 사용하는 Data Service, Authentication Service, Authentication Guard 등

Today I Learned

• 기능 구현이 거의 끝난 코드를 주석을 정리하고 잔 오류를 고쳤다.
• 내일 마무리를 하고 모듈을 나눌 예정이다.
• 기능 구현에 급급해서 오랜 시간 코딩만 하다 보니 사람의 언어를 잃었다..