🎬 Movie In Memory

📜 프로젝트 소개

기간 : 2022.03~2022.06 (약 3개월 반)

인원 : 4명 (프론트엔드 1명, 백엔드 3명: API, 자연어 모델, 캡셔닝 모델)

주제 : 넷플릭스 영화 문장 질의 서비스 및 커뮤니티

나의 기여 : 사이트 디자인, 웹 퍼블리싱, 프론트엔드 구현

사용 스택 : React.js, Javascript

학부에서의 마지막 전공필수 수업에 진행한 팀 프로젝트이다. 처음으로 피그마와 리액트를 사용해 본 프로젝트!

🤩 첫 피그마! 그리고 손그림과의 이별

처음에는 'Samsung Galaxy Book Flex Alpha' 유저답게 손그림으로 설계를 했었다. 하지만 이제 데이터의 한계상 도메인을 영화로 한정하고 프로젝트의 취지가 바뀌면서 달라진 UI를 피그마에 표현했다. 수정하면서 문서화를 해야했기 때문에 기존의 러프한 손그림 설계를 figma로 옮기게 되었다. 피그마에서 내가 제일 좋아하는 기능은 그룹화이다. 그룹화를 함으로써 마크업이 설계과정에서도 모양이 대강 잡히는 점이 매력적인 것 같다. 컴포넌트 분리 덕후로서 '컴포넌트를 이렇게 구성해야겠다' 하는 것들이 보여서 너무 설렜고, 결과물이 깔끔하게 만들어지는 점이 마음에 들어서 나는 이 이후로 UI설계를 피그마로 진행하게 되었다. 밑의 사진들을 보면은 확실히 피그마가 깔끔하게 만들어진다.

🤩 첫 리액트!

이번에는 첫 프로젝트였었던 가족회사 플랫폼 구축 프로젝트와 다르게 리액트를 사용했다. 프론트엔드에 관심이 생기면서 당연히 가장 인기가 많은 리액트에도 관심이 생겼다. 리액트는 내가 프론트엔드에 도전하기 전부터 이름을 들어서 익히 알고 있었던 라이브러리인데, 정확히 어떤 것인지는 알지 못했다. 그래서 이번에도 직접 부딪혀보면서 익힌 것 같다. 지금와서 생각해보면 익혔다고 말하기에도 민망한 수준으로 미흡하긴 하다. 일단 리액트로도 마크업 하듯이 진행했다. 리액트를 사용하지 않을 때와 다른 점이 없었다. 그렇게 마크업을 다 하고나서 문제는 발생했다...

😶‍🌫️ 첫 리액트...?

마크업을 다 하면 API 연동을 해야한다. 리액트 같은 경우에는 3000포트로 새롭게 서버가 열리기에 백엔드 API 서버와 연동을 하려면 proxy를 추가하고 API로 데이터를 불러와서 사용하면 된다. 저번 프로젝트에서는 html 파일 안에 script 태그를 넣어서 그 안에서 ajax 요청을 하였다. 지난 프로젝트때도 생각을 했었던 부분이지만 html 코드마다 넣기엔 너무 코드가 지저분했다. 그리고 컴포넌트 내에서 script 태그를 사용하기에도 좀 이상했다. 컴포넌트 자체가 js라서 스크립트인데, 또 script 태그를 사용한다고? 싶었다. 그리고 어찌저찌 진행해도 데이터 랜더링부분에서 문제가 발생했다. 무한 get 요청이 보내졌고, 이걸 막고자 async await를 넣었는데 promise 객체로 넘어와서 데이터가 pending 상태였다. 게다가 처음으로 리액트를 다뤄보는 거라서 구글링을 하면서 개발을 진행했는데 설명한 블로그에 따라 어떤 건 함수형 컴포넌트, 어떤 건 클래스형 컴포넌트로 선언되는 등 통일성이 없었다. 아주 산 넘어 산이였다.

👯‍♀️ 고마운 친구

이런 어려움에 처했을 때 내가 도움을 요청했던 건, 리액트를 여러 번 다뤄 본 동기 친구였다. 친구도 전공필수 팀프로젝트를 하고 있어서 바쁜데도 불구하고 나를 도와주었다. 이 친구는 내가 위에서 서술했었던 리액트에서 API 통신을 깔끔하게 하는 법을 알려주었다. 각 API를 이용하는 부분을 함수로 만들어서 모듈화를 한 후, 불러오는 방식이였다. 자바스크립트를 능동적으로 활용하지 못한 나는 모듈화라는 방식을 미처 생각하지 못한 것이었다. 친구가 알려준 이 아이디어는 나에게 큰 깨달음으로 다가왔고, 이 아이디어를 응용하여 앞으로의 개발에서도 axios 객체, 쿠키, util 등을 모듈화하여 조금이나마 똑똑하게 자바스크립트를 사용하게 되었다. 바쁜 와중에도 자기 일처럼 도와주고 같은 직군으로서 고민도 들어주는 친구한테 너무 고마웠다.

👍 팀장님한테 한 수 배우다

저번 프로젝트도 그렇고 팀 프로젝트를 하게 되면 같은 팀 동료에게서 배워가는 것이 많은 것 같다. 이번에는 API를 개발하는 백엔드(팀장이었음)와 페어로 작업을 주로 했었는데, swagger로 API 문서를 작성한 후 배포하여 나는 그것을 보고 작업하였다. 데이터를 불러오는 부분에서 API를 여러 번 호출해서 데이터를 패치해도 되는데, 나는 저 생각을 미처 못하고 한 번에 데이터가 다 오도록 요청을 했다. 기껏 백엔드 쪽에서 프론트 쪽을 생각하며 API를 설계했는데 계속해서 번복하니 이런 내가 괘씸했을 것 같다. 이런 나의 요구가 반복되니까 지금은 내가 프론트엔드가 거의 처음이니 이렇게 해 주지만 앞으로는 주어진 API 내에서 활용하여 쓰는 연습을 해 보라고 조언을 해주셨다. 그 조언으로 API를 수동적으로만 따라갔었던 나의 태도를 반성하고 능동적으로 API를 활용해보게 되었다.
그리고 커뮤니티 기능이 들어가다 보니까 프론트엔드의 작업량이 많았는데, 팀장님이 진도 체크를 하고 내가 좀 빡세 보이니까 범위를 조정했다. 본인이 프론트엔드를 어느 정도 다룰 수 있었기에 일부 기능을 구현해주셨다. 이를 통해 팀장의 역할과 리더십을 배웠고, 타인의 컴포넌트 분리와 데이터 패치, props 활용을 보면서 또 한 수 배워갔다. 원래 오류는 남이 더 잘 찾는다고 하던가. 반나절 동안 막혔었던 부분도 발견해주셔서 해결할 수 있었다. 그렇게 나는 종교가 생겼다. 우리 팀장님 만만세!

🫂 이것이 'Team'...?

팀장 뿐만 아니라 다른 팀원들에게도 고마운 점이 많다. 이 프로젝트가 전공 프로젝트였기 때문에 개발 단계별로 발표를 해야 했다. 그 중 최종 발표는 이 프로젝트의 다양한 시행착오들과 사용한 기술을 소개하고 데모까지 진행해야 했기 때문에 꽤 중요한 발표였다. 그 중요한 발표를 내가 하게 되었다. 딥러닝을 사용하는 프로젝트의 세부 로직에서 벗어난 프론트엔드 작업만을 했었기 때문에 준비가 막막하였지만 팀원들은 이런 나를 위해 특강을 열어줬다. A부터 Z까지 다 알려줬고, 모르거나 헷갈리는 부분도 내가 궁금증이 해소될 때까지 다 알려주셨다. 덕분에 발표 준비를 잘 할 수 있었고, 질의응답도 잘 해쳐나갈 수 있었다. 결과 또한 좋게 나왔다. 별 탈 없이 발표를 진행하고 프로젝트를 잘 마무리한 것이 팀원들 덕분인 것 같아서 나는 우리 팀원들한테 너무 고맙다.

😍 프론트엔드의 매력을 알게 되다

조언대로 API를 능동적으로 사용하다보니 프론트엔드가 재미있었다. 처음에는 마크업만 재밌었던 나라면 이제는 API로 백엔드를 사용하는 게 제일 재밌다. 나는 프론트엔드가 재밌어졌다. 프론트엔드 공부를 하면서 생기는 물음표가 느낌표로 변하는 순간들이 너무 짜릿하다. 아직 부족한 부분이 많지만 그만큼 느낌표로 변할 물음표가 많다고 생각하니 하루하루가 설레기 시작했다. 열심히 공부해서 꼭 멋진 프론트엔드 개발자가 되야지!