👩🏻‍💻 Reflection

첫번째 프로젝트, 결과는..

코드스테이츠에서 만난 팀원들과 2주간의 프로젝트를 하게되었고, 프론트엔드를 맡아서 진행했다.
그동안 배운 것들을 복습하고자 비교적 간단한 프로젝트를 기획했다. 하지만 팀원간의 소통 부족, 불충분한 기획 등등.. 이런저런 이유로 결국 기간 내에 완성시키지 못했다.
프로젝트에 들어가기 전, 꼼꼼한 기획과 같은 팀원들간의 소통이 정말 중요하다는 걸 깨닫게 해준 프로젝트였다.

리팩토링?

파이널 프로젝트를 무사히 마무리하고 수료 후에 다시 퍼스트 프로젝트 리팩토링을 시도해보았다.
근데 다시보니 코드가 너무 엉망..🤦‍♀️
파이널 프로젝트에 작성한 코드도 마찬가지로 부족하지만, 고민하면서 성장한 부분도 분명히 있었기 때문에.. 다시 퍼스트 프로젝트에 썼던 코드를 보니까 컴포넌트와 상태, 함수가 전부 중구난방이었다. 퍼스트때는 리액트 함수형 컴포넌트에 익숙하지 않아서 클래스형 컴포넌트로 작성했었는데 가독성이 너무 떨어지는것 같았다. 전부 뜯어 고치기는 시간이 아까워서 기존의 틀을 유지한 채 리팩토링을 시도했는데, 하다보니까 도저히 어디까지 고쳐야 할지 모르겠어서 그냥 아예 새로 만들어 보기로 했다!!

📻 개인 프로젝트 - MAPLY

프로젝트 소개

주제는 first project때 사용했던 것을 그대로 가져왔다.
유튜브 api를 이용해 영상을 불러와서 재생시키고, 마음에 드는 영상을 플레이리스트를 만들어 저장할 수 있는 아주 간단한 사이트다.

기능

• 소셜 로그인
  - 카카오 로그인(자체 로그인 없이 소셜 로그인으로만 구현)

• 메인페이지
  - 비디오 검색 및 재생
  - 비디오 아래 +버튼 클릭시 플레이리스트 추가 모달창 출력
  - 플레이리스트 생성 및 기존 플레이리스트에 비디오 추가
  - 홈 화면에 실시간 트렌드 비디오 렌더링

• 마이페이지
  - 플레이리스트 및 비디오 삭제

사용한 스텍

Front-End (1명) ✨

• Javascript
• React.js
  - React hooks
  - react-router-dom
• CSS
• AWS S3
  

Back-End (1명)

• Javascript
• mysql
• node.js
• AWS EC2, RDS

결과화면

1. 트렌드 비디오
유튜브 api를 이용해 메인페이지 홈화면에 트렌드 비디오를 출력하도록 구현하였다.

2. 비디오 검색 및 재생
유튜브 검색 api를 사용해 비디오를 검색하고 비디오 클릭시 재생이 가능하다.

3. 플레이리스트 및 비디오 추가
비디오 오른쪽 하단 +버튼 클릭시 모달창이 나타나고 플레이리스트를 추가하거나 기존의 플레이리스트에 비디오를 추가할 수 있다.

4. 마이페이지 플레이리스트 보기
추가한 비디오는 마이페이지 플레이리스트에 저장되고 비디오 클릭시 재생할 수 있으며 플레이리스트 목록이 나타난다.

5. 플레이리스트 및 비디오 삭제
삭제 버튼 클릭시 플레이리스트에 저장된 비디오와 플레이리스트 전체를 삭제할 수 있다.

6. 카카오 로그인
카카오 api를 이용해 소셜 로그인을 구현하였다.

배포 주소

https://bit.ly/37gD0WL

✍️ 회고

😊 좋았던 점

이번에는 코드를 짤때 컴포넌트를 전부 분리시키려고 노력했다. 간단한 프로젝트라서 코드가 어마어마하게 길어지진 않았겠지만 그래도 최대한 컴포넌트를 나눠서 가독성 있는 코드를 작성하려고 했다. 또한 함수형 컴포넌트와 Hooks를 써서 this를 남발하는 일이 없어서 좋았다.

또한, 첫번째 프로젝트를 할 때는 팀원 분들과 커뮤니케이션이 잘 되지 않아 의견 조율하는데 시간을 많이 써야했다. 이번에는 두명 밖에 없었지만 서로 진행상황을 자주 공유하고 문제가 생기면 바로바로 얘기하고 해결한 덕분에 무사히 잘 끝낼 수 있었다. 혼자 하는 프로젝트가 아닌 이상 소통은 정말정말 중요한 것 같다!! 나 또한 커뮤니케이션이 잘 되는 개발자가 되기 위해 노력할것이다.

😣 아쉬웠던 점

파이널 프로젝트에서는 리덕스를 사용해서 유저 정보나 토큰과 같이 대부분의 컴포넌트에서 공통적으로 필요한 상태들은 전역에서 관리했다. 하지만 이번 프로젝트는 기능이 간단하고 컴포넌트도 많이 없기 때문에 리덕스를 사용하지 않아도 된다고 생각했다. 그래서 props로 전부 내려주는 방식으로 작성했는데 막상 하다보니 전달해줄 상태들이 생각보다 많았다..
덕분에 컴포넌트를 렌더링 하는 부분에 코드가 길어졌고, 매번 컴포넌트를 몇번씩 거쳐서 내려줘야했다. 심지어 중간중간 부모 컴포넌트를 거쳐서 다른 형제 컴포넌트에 전달해줘야 하는 상황이 발생해서 선언해 놓은 상태와 함수를 전부 상위 컴포넌트로 옮기는 작업도 여러번 했다..🤦‍♀️
리덕스를 사용하지 않아서 그런 것도 있지만 처음부터 구체적인 기획을 하지 않고 해서 그런것 같다ㅠㅠ 기획미스로 터졌던 프로젝트였는데 똑같은 실수를 반복하다니.. 아무리 간단한 프로젝트라고 하더라도 기획은 중요, 또 중요하다. 시간을 투자해서 구체적인 계획을 세우고 시작하면 오히려 나중에 쓸데없는 작업에 낭비하는 시간을 줄일 수 있다는 것을 또 한번 깨달았다.