[구름톤 트레이닝 풀스택 1기] 10주차 회고 - 얻을 수 있는게 없다면 얻을 수 있게 3

PBL 3주차 과제 Youtube

마지막 개인 프로젝트는 Youtube 클론 코딩이었다.

과제 요구사항은 Youtube 서비스의 SWOT 분석,
프로토타입 or 프레임워크, 메인페이지 퍼블리싱 이었다.

개발 요구사항인 퍼블리싱은 현 역량에서 시간만 쓴다면 구현할 수 있다고 판단했다.
그래서 역시 이번에도 스스로 챌린지를 부여함으로써 한단계 성장하고자 했다.

난이도 올리기 - 풀스택 개발

지금은 프론트엔드 개발자로 취직하기 위해 공부를 하고 있지만
백엔드 동작 구조가 어떻게 동작하는지 알면
협업 시 도움이 될 것이라고 생각하기에 경험할 의향이 있었다.

보통 Spring 또는 node.js 를 사용한다.
그래서 둘 중에 어떤 기술 스택을 사용해서 경험해볼지 골라야했다.

Spring의 경우 구름톤 트레이닝 풀스택 과정의 커리큘럼의 포함되어있었고
1주일 안에 공부해서 사용하기에는 힘들겠다는 판단을 했다.

그래서 나의 주 언어를 사용하는 Node.js를 사용해서 백엔드를 구축하기로 했다.

어떻게 접근할지 찾아보던 중 운좋게도 인프런에
John Ahn 코치님이 올리신 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기 가 있는 것을 알게되었다.

대박사건..

초기 결과물

인강을 따라하면서 만들어낸 초기 결과물이다.

• 회원가입
• 로그인
• 업로드 된 전체 비디오 보기
• 구독한 유저들의 비디오 보기
• 비디오 업로드
• 구독하기
• 비디오 좋아요, 싫어요
• 댓글달기, 무한 Depth 대댓글

메인 페이지

회원 가입 페이지

로그인 페이지

비디오 업로드 페이지

비디오 상세보기 페이지

Node.js 를 직접 코딩해보면서 어떤 구조로 동작하는지 알 수 있는 시간이었다.

하지만 이대로 과제를 제출하기에는 실제 유튜브의 UI와 매우 다른 모습이었고
세부적으로 기능을 더 추가해서 기능적인 부분도 클론코딩 해보고 싶었다.

또한 인강에서 사용한 css 는 antd인데 잘 모르기도 하고
현업에서 잘 사용하지 않는다는 John Ahn 님의 답변과 함께
3년전 인강인걸 감안해달라고 해주셨다.

그래서 내 만족도를 충족시키기 위해 프론트엔드에서는 거의 모든 UI 코드를 변경했고
백엔드에서는 API를 추가를 했다.

수정된 결과물

수정된 결과물이다.
antd를 모두 제거하고 emotion을 사용했다.

• 회원가입 유저 스키마 변경 - 성, 이름 통합, 닉네임 추가
• 로그인
• 업로드 된 전체 비디오 보기
• 구독한 유저들의 비디오 보기
• 비디오 업로드
• 구독하기
• 비디오 좋아요, 싫어요
• 댓글 달기 기능 축소
• 공유하기 기능 추가
• 검색하기 기능 추가
• 내가 업로드한 비디오 보기 기능 추가
• 카테고리별 비디오 보기 기능 추가
• 요청 성공, 실패 토스트 메세지 출력 기능 추가
• 조회수 올리기 기능 추가 - 실제 유튜브 방식 반영
  • 실제 유튜브에서는 재생시간 30초 초과 시 조회 수가 1 증가
  • 재생시간 5초 초과 시 조회수가 1 증가 되도록 적용

메인 페이지

로그인 페이지

회원가입 페이지

구독 페이지

내 동영상 페이지

비디오 업로드 페이지

비디오 상세보기 페이지

팀원들로부터 받은 피드백

팀원들이 또 한번 자극받았다고 한다.

팀장으로서 팀원들에게 원동력을 줄 수 있어서
뿌듯했고 부끄러웠다..

마치며

처음으로 Node.js 와 emotion을 사용해봐서 뜻깊은 시간이었다.

하지만 저 결과물이 100% 만족스럽진 못하다.

Node.js를 내가 직접 개발한게 아니고 인강을 통해서 개발한 것이며
모든 코드를 싹다 지우고 다시 개발하라고 하면 구글링이 필요할 것 같기 때문이다.

또한 모든 Model(댓글, 영상, 유저 등)에 CRUD를 구축하지 못한 것이 아쉽다.
내 역량이 부족한 탓에 시간이 부족했다..

그래서 구름톤 트레이닝 풀스택 과정을 모두 마친 후에
Spring으로 다시 백엔드를 구축해보던지 아니면 Node.js를 추가 학습하는 시간을 가져보려한다.