2주 프로젝트 회고, My Surpin

코드스테이츠에서 몇 달간의 이머시브 과정을 지나 드디어 첫 프로젝트를 완료했다.

첫 프로젝트인 만큼 아쉬운 부분, 힘든 일이 많았지만 좋은 팀원들 덕분에 2주라는 시간을 재밌게 보낼 수 있었다!

프로젝트에 대한 소개와 느꼈던 점을 정리하기 위해 회고글을 작성해보려 한다.

 

깃헙링크 (소개 글은 Github에 더욱 자세히 되어있습니닷!)

배포링크

My Surpin🏄‍♂️ 이란?!

---

당신만의 북마크를 만드세요!

My Surpin는 웹 서핑(Surfing🏄‍♂️)을 하면서 마음에 드는 사이트를 핀( Pin📌)을 꽂아 고정한다는 뜻을 가지고 있다.
즉, My Surpin = My + Surfing🏄🏼‍♂️+ Pin📌의 합성어다!!

 

인터넷에는 정말 유용한 사이트들이 많다! 이런 사이트들을 기억하기 위해 우리는 보통 북마크를 한다. 또한 유용한 정보들을 모아놓은 Github Repo가 있는 것을 보았는데, 많은 사람들이 나중에 보기위해 fork를 한 것을 볼 수 있었다.

현재 내 북마크..

그렇다면 주제에 따른 자신만의 혹은 남들의 유용한 사이트 모음들을 쉽게 공유할 수 있다면? 이라는 생각에 아이디어를 제안하게 되었다. Melon, 유튜브 재생목록도 자기만의 리스트를 공유한다는 점에서 비슷한 역할을 하는 것 같아 니즈가 있을 것 같았다.

 

이러한 아이디어를 기반으로 구체화하여 탄생한 것이 My Surpin이다.

주요 기능

---

1. 회원가입 및 로그인

일반 회원가입 이외에 Google Oauth2.0을 이용해 회원가입 및 로그인을 가능하게 했다. 또한 편의성을 위해 구글로 회원가입시 자동으로 로그인까지 이어지도록 구현했다.

핀터레스트에서 디자인을 참고해서 나름 동적인? 모습을 표현하며 단순히 회원가입 / 로그인을 구현하는 그 자체가 너무 재밌었다.

하지만 지나고나서 생각을해보니 요즘 비회원으로 서비스를 이용하지 못하는 사이트는 왠만해선 없는 것 같다..!

그래서 다음 프로젝트때에는 비회원도 기능을 충분히 이용할 수 있는 서비스를 만들기로 다짐했다!

 

2. 메인 페이지

서핑의 이미지에 걸맞게 동적인 작동 및 효과

• useRef()로 컴포넌트 DOM의 위치에 접근
• 왼쪽 MAIN, BEST, NEW 버튼 클릭 시, 해당하는 Section의 위치로 이동
• BEST Section의 물결 애니메이션 (다른 분이 올리신 CSS 코드를 참고했는데 너무 재밌었다..!)
• 태그 검색 시 결과 페이지 이동

 

3. Surpin

Surpin이란?
개인의 관심사 별로 웹사이트를 저장할 수 있는 모음집 (북마크)

거의 메인인 이 기능들은 에이스 팀원분이 혼자 구현하셔서 도움을 많이 못드렸었다.

썸네일 같은 경우 AWS S3 버킷을 이용했는데, 따로 공부를 해야할 것 같다!

 

3-1) 서핀 생성 및 편집 

• 썸네일 이미지 업로드
• URL 입력 시 자동으로 페이지 Title 가져오기
• Drag & Drop으로 간편하게 URL 순서 조정

3-2) 다른 사람의 서핀 가져오기

3-3) 서핀 공유하기 

(좌) 유저의 서핀 리스트 / (우) 서핀

개발 과정

---

1. 사용 스택 및 이유

 

React (Hooks)

• 화면을 구성하는 부분, 기능에 따라 컴포넌트 별로 관리가 용이하며 재사용하기 편함
• Class형에 비해 Life Cycle 관리가 쉬움

Redux

• 상태의 중앙화로 전체 상태 관리 용이
• React내에서 props를 일일이 내려주지 않아도 어디서나 다른 컴포넌트 상태에 접근 가능
• 모든 데이터를 스토리지에 저장해 브라우저 종료 이후에도 동일 시점부터 데이터 유지 가능 (Persist)

Sass

• 가독성이 높음
• 상위 selector을 참조하기 때문에 클래스명을 여러번 반복해 적는 등의 코드 중복 방지 가능

 

2. Flow Chart

 

3. API 개요

 

4. DB 스키마

느낀 점

---

2주 간 4명이서 한 팀이 되어 프로젝트를 협업하며 진행하면서 미숙한 부분이 많았고, 나 또한 팀원으로서 역할을 제대로 못한 부분들이 많다고 생각한다. 느꼈던 것들을 생각만 하기 보다 기록으로 남겨 앞으로 팀으로 협업하는 데 있어서 되새겨볼 것이다!

 

업무 내용 공유 및 피드백 부족

우리 팀이 소통이 없었다는 것은 절대 아니다. 아침 10시부터 매일 밤 12시 ~ 2시 까지 줌을 켜놓고 이슈가 있을 때마다 항상 공유를 했다.

대부분의 팀들은 아침에 슬랙을 통해 이야기를 하고 각자 알아서 구현하면 그때그때 공유를 한다는 것을 듣고 나름 자부심을 가졌었다.

 

하지만 중요한 것은 다들 첫 프로젝트고 맡은 기능들을 구현하느라 다른 팀원들을 신경쓰지 못한 것 같다. 단순히 이런 식의 반복이었다.

• A 팀원 : OO님 어느 부분 끝나서 Merge(머지)할게요!
• B 팀원 : 넵!
• 나 : 고생하셨습니다~!

즉, 서로의 코드에 대해 파악할 시간이 없었다. 

예로 한 팀원분이 맡았던 컴포넌트, 기능들을 내가 수정할 일이 생겼었는데, 코드를 파악하는 데에 시간을 많이 소모하는 일이 생겼었다. 복잡하진 않았지만 만일 서로의 코드를 리뷰하는 시간이 있었다면 이러한 시간을 줄일 수 있었을 것 같다.

이는 프로젝트의 규모가 커질수록 더욱 큰 결과를 초래할 것이라고 생각한다. 실제로 코드리뷰를 통한 리팩토링을 하지않아 중복되는 코드가 상당히 많아졌었다..!

 

다음 프로젝트때에도 물론 미숙하고 기능구현을 하느라 바빠 리팩토링할 시간이 부족하겠지만, 팀원들과 코드리뷰를 하는 시간을 마련하고자 한다. 

 

비효율적인 Git 관리

git과 github를 사용하는 것이 아직도 이해가 안가고 어렵다. 다들 git에 미숙하다보니 프로젝트 중반에는 git을 통해 코드를 공유하는 것이 아니라, 슬랙을 통해 코드를 주고받았었다..! (말도 안되지만 ㅠㅠ) 그러다보니 다른 팀원의 코드를 merge할 때 이상하게 겹치는 일이 발생하고 결국 시간도 뺏겼다.

 

핑계라면 짧은 시간 동안 git에 대해 파고들 생각조차 못했었다. 하지만 좋은 개발자가 되기 위해서는 정말 이는 핑계라고 생각한다. git을 사용안하는 회사를 찾기 어려울 정도로 많은 회사들이 git을 통해 협업을 한다. 실제 개발자로 취업을 한다면 반드시 갖춰야 할 역량 중 하나가 바로 프로젝트 git 버전관리다! 짧은 시간에 상관없이 프로젝트의 git 관리에 신경을 더 써야했던 것이 사실이다.

다음 프로젝트를 진행할 땐 칸반보드, 커밋 메시지 규칙, 이슈 규칙 등을 팀원들과 사전에 합의하여 진행하도록 할 것이다. 

마무리

---

느낀점을 적다보니 부정적인 부분들만 적은 것 같다. 하지만 좋은 개발자가 되기 위해서는 꼭 개선해야할 점이라고 생각한다!

말 그대로 내가 느낀점(보완해야할 점) 이니깐..!

 

좋은 팀원들을 만나 정말 좋다! 다음 프로젝트 (파이널 흡..😭) 도 같은 팀원분들과 진행할 것이다.

2주라는 짧은 시간동안 하루에 3~4시간 자며 정말 힘들었지만 팀원들 덕에 즐겁게 진행할 수 있었다.  

 

첫 프로젝트를 진행하며 느낀 점들을 토대로 보완해나가며 파이널 프로젝트에서는 당연히 아쉬운 점들이 생기겠지만, 같은 후회를 하지 않기 위해 노력할 것이다!!!