[엘리스 SW트랙 6기] 2차 프로젝트 회고록 + 수료 후기

진짜 너무너무너무나도 바빴기에..(졸업프로젝트) 한참이 지나고 쓰는 2차 프로젝트 회고록이다.

2차 프로젝트는 13~15주차 (11/13~12/1) 동안 진행하였다.

그래서.. 더 늦기 전에 지금이라도 쓰려구요 ㅎㅎ;

 

프로젝트에서 맡은 역할

이번 프로젝트도 내가 팀장을 맡았다.. 정말 능력도 없고 부족하지만 맡겨주신 팀원분들께 너무 죄송하다..

인원은 6명, 프론트엔드 4명과 백엔드 2명으로 구성되었다.

팀원분들이 어쩌다보니 전부 프론트를 희망하셨는데, 백엔드 희망 인원이 없어서 2분께서 자발적으로 백엔드를 맡아주셨다.

나는 프론트엔드 / 팀장을 맡아서 이번 프로젝트를 진행하게 되었다.

역시나 졸업프로젝트와 병행하다보니.. 매일 4시쯤 자는 것은 일상이였다. 😂

 

이번 프로젝트는 프로젝트 시작 전 일주일 동안 준비기간이 있어서, 기획을 미리 할 수 있어서 좋았던 것 같다.

여러가지 주제가 나왔었는데, 결론적으로는 플레이리스트 공유 서비스를 만들어보자는 의견으로 통일되었다.

나 또한 음악을 매우 좋아하기도 하고, 평소에 나의 취향을 공유할 수 있고

사람들과 소통할 수 있는 플랫폼이 있었으면 좋겠다고 생각했기 때문이다.

 

서비스명은 Mingle로 결정했는데, Mingle이라는 단어의 뜻이 섞다, 섞이다, (사람들을 많이) 만나다 라는 뜻이다.

우리 서비스가 플레이리스트 공유 SNS 서비스이고, 여러 사람들의 취향을 공유하는 의미로 딱 좋겠다는 생각이 들었다.

뭔가 어감이 귀엽기도 하고...ㅎㅎ

그렇게, 기획도 하고 1주차부터 피그마에 UI 와이어프레임을 만들었다.

저번 프로젝트처럼 디스코드에서 상시 접속해 있고, 필요할 때 마이크 키고 소통하는 규칙을 만들었다.

그래서 이번 프로젝트도 수월하게 흘러가겠구나? 했는데..

 

위기상황 발생

이제 막 개발을 들어가려는데 팀원 한 분이 사정상 나가시게 되었다.

저번 프로젝트에서 인원 이탈이 없었어서 그런가, 처음 겪는 상황에 솔직히 좀 많이 당황하긴 했다.

그럴 수 있지라고 생각했지만...

남들보다 한명 더 적은 불리한 상황에 내가 이 프로젝트를 잘 이끌어 갈 수 있을지가 많이 걱정되었다 ㅠㅠ

하지만 팀장인 내가 불안해하면 다른 팀원분들에게도 영향이 갈 것 같았다.

그래서 남은 인원들끼리라도 열심히 해서 꼭 멋지게 완성하자는 목표를 세우고 개발에 들어가게 되었다.

어떻게 보면 침체될 수도 있는 상황이었는데, 위기를 기회로 만들자는 생각에 더 열심히 하게 되었던 것 같다.

 

UI 구현

페이지 단위로 진행했던 저번 프로젝트와는 달리, 컴포넌트 기반으로 잘게 쪼개서 개발에 들어갔다.

아래는 내가 구현했던 UI이다.

검색창 컴포넌트

재생바 컴포넌트

앨범아트 컴포넌트

재생목록 아이템 리스트

차트 컴포넌트

로그인 컴포넌트

회원정보 수정 컴포넌트

유저 상세 페이지

이번 프로젝트에서는 tailwind를 처음으로 사용해보았다. 처음에는 ant design + styled-components를 사용해서 진행했는데,

코치님께서 요즘에 핫한 tailwind + emotion을 사용해서 UI 구현을 해보면 어떻겠냐고 하셔서 처음 도입해 보았다.

물론 오류도 많이 발생했고.. (오류 해결하느라 하루 종일 코딩 못한날도 있었음) 문법도 좀 익숙하지 않은 편이었으나,

익숙해지고 나니까 너무나도 편하고 사람들이 왜 많이 사용하는지 알 것 같은 그런 느낌이었다.

 

그리고 한번쯤 멋부려보고 싶었던 앨범아트에 앨범 빙글빙글 돌아가는 애니메이션도 구현해보았다.

css로 그라데이션도 넣어서 표현했는데, 생각했던 것보다는 그렇게 어렵지 않게 구현할 수 있었다.😊

그리고 표 아이템을 클릭할 때 강조되는 효과라던지, 리스트 아이템 클릭할 때 강조되는 효과 등

UX적으로도 사용자에게 직관적으로 다가올 수 있도록 구현하고자 노력했다.

 

기능 구현

기능 구현 관련해 생성했던 Merge Request들이다.

• 회원 기능
  • 회원가입
  • 로그인 / 로그아웃
  • 회원 탈퇴
  • 회원정보 get (회원정보 수정 페이지)
  • 전역 axios 설정 (http header에 토큰 담아서 보내도록)
  • 로그인 이메일 저장 기능
• 곡 관련 기능
  • 곡 재생 기능
  • 곡 / 가수명 검색 기능
  • 페이지네이션
  • 장르별 음악 get
  • 유저가 좋아요한 음악 get
  • 곡 상세 페이지 좋아요 기능
• 플레이리스트 관련 기능
  • 특정 플레이리스트 조회 (재생목록 페이지) 기능
  • 피드 페이지 (팔로우한 유저의 플레이리스트 조회)기능
  • 플레이리스트 좋아요 / 좋아요 해제 기능
  • 플레이리스트 검색 기능
• 유저 관련 기능
  • 프로필 사진 변경 기능
  • 유저가 좋아요한 플레이리스트 구현 (마이페이지)
  • 팔로우 실시간 반영되도록 수정

 

일단은 이 정도로 정리할 수 있을 것 같은데.. 팀원분들을 도와드리다보니 사실상 많은 기능을 도와드리게 되었다.

그래서 대부분의 페이지에서 관련 기능들을 구현하게 됐는데,

어려움을 겪었던 부분이 너무 많았기 때문에 따로 트러블 슈팅을 분리해서 작성해보고자 한다.

 

트러블 슈팅

1. 오디오 재생 react-h5-audio-player 라이브러리 관련 이슈

일단은 곡 재생 기능에서 시간을 많이 들였다.

react-h5-audio-player라는 라이브러리를 사용하여 구현을 했는데, 아무리 해도 커스텀 디자인이 먹히지 않는 것이다.

분명히 노래는 재생이 되는데.. 재생바와 컨트롤 버튼 등이 도무지 보이지를 않는다....😇

그래서.. 오디오 태그에서 직접 곡의 시간을 받아와 실시간으로 재생바가 이동하는 모션을 구현하기에 이르렀다.

하지만 나는 뻘짓을 하고 있었던 거였다.

import 'react-h5-audio-player/lib/styles.css';

이거 한줄을 포함을 안해서 css가 적용이 안되고 있었던 것이었고, 당연히 커스텀 디자인도 먹히지 않는 것이었다.

진짜 너무나도 간단한 해결 방법인데 이 때의 나는 왜 그랬는지는 몰라도 직접 구현해보겠다며 아까운 시간을 낭비했다.

코치님께서 찾아주신 오류인데 진짜 좀 많이 부끄럽고 나 자신이 한심했다..

앞으로 뭐가 안될 땐 공식문서를 꼭 다시 한번 보는 습관을 가지자. 🥲

 

2. 로그인 토큰 관련 이슈 (access token)

로그인 access token을 In memory 방식으로 recoil을 통해 전역 변수로써 관리하는 방식을 채택했다.

그래서 custom axios hook을 만들고, axios Interceptor를 통해

axios 요청을 보낼 때마다 http header에 access token을 실어 보내는 방식으로 구현을 했는데..

새로고침을 할 때마다 자꾸 access token이 유실되는 현상이 발생하였다.

 

1차원적인 생각으로 recoil-persist를 쓰면 어떨까? 라는 생각에 recoil-persist를 설치를 해서 사용했다.

하지만 token을 보안이 취약한 localStorage에 저장하기 싫어서 In memory 방식을 채택했던 건데,

recoil-persist 역시 localStorage에 저장해서 새로고침 후에도 값이 유지되는 방식이라 사실상 변수에 저장하는 의미가 없었다.

 

그래서 서버에서 access token의 유효기간을 같이 받아서 현재 시간과 유효기간을 비교하여 만약 토큰이 만료되었거나

혹은 refresh token은 존재하지만 access token만 새로고침 등으로 유실되었을 경우를 axios 요청마다 체크하여,

바로 refresh token을 재발급하는 함수를 실행할 수 있도록 코드를 수정하였다.

 

3. 로그인 토큰 관련 이슈 (refresh token)

앞에서 access token과 관련된 이야기를 했는데, refresh token 쪽에서도 문제가 발생했다.

access token은 변수에, refresh token은 쿠키에 저장을 하는 방식으로 구현을 했는데,

로컬에서는 잘 작동하였으나 배포 후에 갑자기 기능이 작동을 하지 않는 것이다..!!

그래서 부랴부랴 구글링을 해보니, 로컬에서는 다른 도메인의 쿠키에 저장되어 있는 값을 불러올 수 없다는 것이다 ㅠㅠ

 

그렇게 refresh token은 localStorage에 저장하는 방식으로 급하게 수정을 하였다.

뭐 결론적으로는.. 쿠키에 대해서 잘 알아보지 못했던 나의 잘못인 것 같다.

그래서 결론적으로, access token은 변수에, refresh token은 localStroage에 저장하여 토큰을 관리하는 방식으로 진행했다.

 

전체적인 회고

이렇게 나의 엘리스 SW트랙 6기에서의 여정이 모두 끝이 나게 되었다.

1차 스터디, 1차 프로젝트, 2차 스터디, 2차 프로젝트에서 모두 팀장을 맡았고 총 4개의 프로젝트를 진행했다.

솔직히 많이 힘들었고 진짜 울고 싶었을 때도 있었다.

 

2차 프로젝트에서는 나의 의욕이 앞서서 팀원분들을 조금 힘들게 하지 않았을까 걱정이 된다.

react-query나 recoil, typescript등 이제 막 개발을 시작한 분들이라면 조금 어려울 수도 있을 기술스택을 채택했다.

그 과정에서 잘 못 따라오시는 팀원분도 계셨고, 내 할일 하랴 팀원분 도와드리랴 진짜 정신이 없고 바빴다.

안그래도 한분이 이탈하여 일손이 부족한데 전체적인 진행 상황도 느려서.. 많이 힘들었다.

 

그렇지만 그냥 나 바쁘다고 모른척 지나칠 수가 없었다. 우리 모두 같은 팀이고, 같이 달려나가는 사람들이니까.

혼자서 해결하려고 하면 힘들지만 누군가와 같이 해결하면 금방 해결되는 상황이 분명히 존재하기 때문이다.

같이 부딪히며 나도 많은 것을 배웠고 팀장의 입장에서 팀프로젝트라는 것을 정말 찐하게 경험하고 가는 것 같다.

아쉬운 점도 많았지만, 결론적으로는 힘든 상황에서도 잘 마무리 할 수 있어서 정말 다행이었다.

 

사실 이 부트캠프를 진행하기 전에는 많이 수동적인 성격이었고, 리더는 최대한 피하자라는 생각이 있었다.

하지만 이번 상반기에 회사를 경험해보면서 정말 많은 부족함을 느꼈고 성장하고 싶다는 생각이 강하게 들었다.

그래서 처음으로 용기를 내어서 스터디도 만들어보고 프로젝트를 이끌어가면서 점점 자신감이 생겼다.

사실 처음이 어려운 것이고, 어쩌다 정신을 차려보니 모든 과정에서 나는 리더가 되어 있었다.

 

어찌보면 짧을 수도 있고 길 수도 있는 4개월 동안 엘리스 SW트랙을 진행하고,

그 과정에서 졸업 프로젝트도 병행하여 46개팀 중 6위 안에 들어 장려상을 수상하는 좋은 결과를 얻었다.

그러면서 다이어트까지 해서 6kg정도를 감량했다. (TMI지만.. 그냥..)

 

어쨌든 정말 많이 성장한 2023년 하반기였다.

자괴감에 빠져있던 7~8월 시즌과 달리 많은 자신감을 얻고 가는 것 같다.

이 글을 읽는 누군가는 나도 한번 도전을 해볼까 생각하는 사람도 있을 것 같은데,

단순히 엘리스 부캠이 좋고 말고가 문제가 아니라 대하는 마음가짐에 따라 달라지는 것 같다.

그냥 적당히만 하면서 묻어가고, 매일 코드 받아쓰기만 하고 이러면 어디를 가든지 성장하지 못한다.

어딜 가든 자신이 열심히 하고자 하는 마음이 있고 성장하고자 싶은 욕구가 있다면 나는 한번쯤 도전해봐도 좋을 것 같다고 생각한다.

살면서 이렇게 몰입하고 도전해가면서 며칠 밤낮 고생하고 이러는 경험이 많이는 없을 것 같기 때문에..

아주 귀중한 경험을 하고 떠나는 것 같다. 고생했다 나 자신! 🥰