단순히 부분적인것들을 구현하는게 아닌, 처음 기획부터 배포까지 팀원들과 함께 진행한 첫 프로젝트에 대해 글을 남기려고 한다.
My Type이라고 이름붙인 이 웹 어플리케이션은 자신이 만든 카테고리에 자신만의 기준으로 유튜브 동영상들을 저장해놓을 수 있는 기능을 가지고 있다. 기본적으로 추천하는 키워드들이 표시되어있고, 검색을 통해 실제로 유튜브에 올라와있는 영상들을 검색할 수 있다. 아래는 MyType의 기능시연 영상이다.(클릭해야 재생됨)

이 프로젝트는 front-end쪽에 한명, back-end쪽에 한명, 그리고 팀장 및 full-stack을 맡은 나까지 총 세명의 팀원이 진행을 하게되었다.
Q. 내가 맡은 부분과, 그것들을 구현하기 위해 사용한 스택 및 이슈사항은?
맡은 포지션은 full-stack이였지만, 프론트엔드쪽이 비교적 해야할 작업의 양이 많았기 때문에 데이터베이스 스키마를 짜거나 백엔드를 맡은 팀원이 도움을 요청할때를 제외하고는 거의 프론트엔드쪽 작업을 담당했고, 백엔드와 프론트엔드 간의 필요한 커뮤니케이션을 하는 중간 다리역할을 했다.
프론트엔드에서 사용한 기술스택은 react, redux, SPA(Single Page Application)를 구현하기 위해 사용한 react-router-dom과 마지막으로 소셜로그인 기능을 위한 Oauth2.0 정도라고 볼 수 있을것 같다.
redux를 사용하면서 어려웠던점은 어떤 기준으로 리듀서 함수들을 나누어야할지, 어디에 어떤 state가 필요한지 등을 생각해 내는것이였다. 이정도로 많은 액션들과 state들이 필요한 경우에 대해서는 처음 접해보게 되어서 처음에 어느정도의 구조를 생각하고 시작하였음에도 작업을 진행하면서 계속해서 리듀서함수가 수정되고, state들이 추가되면서 복잡해지기 시작했다.
그렇게 진행하면서 느낀점은 'redux를 사용하지 않고 순수하게 react로만 상태관리를 했다면 겉잡을 수 없이 전체 구조가 복잡해졌을것 같다' 였다. 확실히 이렇게 redux를 제대로 사용해보니 왜 redux가 필요한지, 어떻게 액션함수들과 state들을 정의해야할지가 조금은 감이 잡히는 것 같다.
구글 소셜로그인 기능을 구현할때 어려웠던점은 '소셜로그인은 대체 어떤 흐름으로 사용자 인증을 하게되는거지?'라는 질문에 대한 답을 찾는것이였다. 좀더 세분화시켜보면,
1. 클라이언트와 서버중 누가 구글과 소통을 해야하는걸까?
2. 구글아이디로 로그인에 성공했다면, 그 결과를 어떤식으로 우리 앱의 인증방식(토큰을 사용하였다)에 적용시켜야할까?
이렇게 나눌 수 있을것 같다. 결과적으로 클라이언트가 먼저 구글에게 구글아이디로 로그인 요청을 보내게 되고, 그결과로 받은 응답데이터를 우리 앱의 서버에 전송하고, 서버에서는 받은 데이터를 이용해 DB에서 사용자 정보를 검색하거나 입력한 후에 토큰을 발급해주면 될것 같다는 것을 생각하게 되었고, 이부분은 클라이언트쪽과 서버쪽 모두를 전담하여 기능구현을 진행하였다.
Q. 프로젝트를 진행하면서 힘들었던 부분은?
가장 어려웠던 부분은 '프로젝트'라는 것을 나를 포함한 팀원들 모두가 처음으로 해봤기 때문에 어떤것을 해야하는지에 대해 전혀 모르고 그냥 부딫혀가면서 진행했던 부분인 것 같다.
프로젝트가 지난 지금 되돌아보면서 생각해보면,
1. 기획 단계에서 어떤부분들을 확실히 정해야하는지
2. 각자 작업해야 할 것들을 어떤식으로 배분해야 할지
3. 작업에 들어가기 전, 프론트와 백엔드간에 협의가 필요한 부분들이 무엇인지
4. 프론트와 백엔드의 작업속도가 다를때 어떻게 맞추어 가야할지
등이 있는 것 같다. 팀장의 역할과 풀스택의 역할을 맡았기 때문에 계속해서 프론트와 백엔드간의 의사소통을 신경써야 했고, 프로젝트의 전체적인 흐름을 항상 파악하면서 조절함과 동시에, 내가 맡은 기능들을 구현하는 것에도 집중해야 했기에 처음에는 너무 정신이 없었다.
하지만 그렇게 부딫혀가며 하나씩 개선해 나아가는것이 재밌게도 느껴졌다. 어떤 기능하나를 구현하기 전에 프론트와 백엔드가 모여서 '어떤 api가 필요하고, 주고받는 데이터 모양은 이런식으로 하자'등의 논의를 진행하였고, 각자의 작업에 방해가 되지 않으면서도 어느정도 작업이 진행되었는지를 파악하기 위해 Notion문서를 이용해 작업을 세분화하여 해야할 작업, 진행중인 작업, 완료된 작업들을 표시하여 한눈에 알아볼 수 있도록 하였다. 또한 하루에 한번씩 모여서 각자의 코드를 보여주며 다같이 리뷰하는 시간을 가지면서 내가 구현하지 않은 기능들에 대한 코드들도 살펴볼 수 있고, 코드에대한 피드백을 주고받으며 모두가 같이 성장할 수 있는 시간을 가지게 됐다.
Q. 프로젝트를 진행하면서 중요하다고 생각되는 부분은?
프로젝트라는것을 실제로 체험해보기 전에는 당연히 '개개인의 이해도나 실력' 이라고 생각했다. 하지만 평생 혼자 일할것이 아니라면, 물론 실력도 중요하겠지만 '커뮤니케이션 능력'이 너무나 중요하다는 것을 알게되었다. 자신의 상황을 잘 알릴 수 있어야하고, 상대방의 얘기를 잘 들을 수 있어야 하며, 긍정적인 언어로 피드백을 주고받는 등 '같이 일하는 능력'이 필요하다는 것을 절실히 느꼈다.
'project' 카테고리의 다른 글
Final Project 3주차 (typeorm-seeding) (0) | 2020.03.28 |
---|---|
Final Project: 2주차 (Deploy) (0) | 2020.03.21 |
Final Project: 2주차 (multer-s3) (0) | 2020.03.21 |
Final Project: 1주차 (testcase 환경설정) (0) | 2020.03.15 |
Final Project: 1주차 (typeORM 초기환경 설정) (0) | 2020.03.15 |