첫 사이드 프로젝트 🤟🏻

회고를 거의 한달 반만에 정리하는 나 😛
그래도 미리 써놓은게 있어서 다행티비 ..

부트캠프라는 커리큘럼을 벗어나,
처음으로 스터디원들끼리 자발적으로 기획-디자인-개발-배포까지 직접 서비스 및 사이트를 개발했다!

꽤나 뿌듯하기도 하고, 우리가 원하는 모양대로 맘껏 구현할 수 있어 좋았다.

기간

2023.04.10 ~ 5월 중순

1달을 잡았으나, 최종 수정까지 해서 1달 반정도 소요되었던 것 같다.
써보고 싶었던 Tech Stack 들도 써보고, 다른 라이브러리도 사용했다.
처음 써본 stack들로 인해, 시간이 좀 더 걸렸다.

Team

부트캠프에서 마음맞는 동기들과 함께 했다!
함께 할 수 있는 사람들을 주셔서 감사!

이들과 프로젝트를 기획하기 전부터, 한달 간 study를 진행했고,
매주 금요일마다 돌아가면서 각자 공부해온 주제로 세미나를 하면서 지식을 공유했다 👩🏻‍💻
디게 유익했다 ✌🏻

• 프론트엔드 3명
• 백엔드 2명

Tech Stacks

🛠️ TypeScript, React, Tailwind CSS, Recoil, Daisy UI, Figma

• 배포 : AWS S3

프로젝트 소개

암 가나 인트로듀쓰 아워 프로젝ㅌ! 💁🏻‍♀️

Project Name : meerkats (미어캐츠)
Product : 영화예고편 및 커뮤니티
Target : 주로 20대 - 50대, 영화를 좋아하는 사람들
Revenue : 영화사의 홍보비용, 멤버십 서브스크립션 비용

영화가 개봉하기 전,
영화에 대해 이런저런 이야기를 나누고 싶어하는 영사사(영화를 사랑하는 사람들)을 위해, 영화에 관련된 유튜브 링크들을 한 곳에서 보여주고,
함께 실시간으로 반응하고 소통할 수 있도록 플랫폼을 개발했다.

또 자신의 의견들을 기록하고 공유하여, 더 deep 하게 소통할 수 있도록 블로그 형태의 커뮤니티 또한 구현했다.

해당 사이트를 멤버십 단위로 구독하면, 영화 티켓값을 할인해준다던지 시사회 이벤트의 참여기회를 얻게되는 따위의 혜택들을 준비해두었다.

( + 사이트 이름을 meerkats로 지은 이유는, '영화'라는 관심사로 모인 여러 사람들이 같은 흥미와 공감대로 이야기를 나누고 싶어하는 모습들을 상상했다. 고개를 쭉 빼고, 주위를 살펴보며 자신과 같은 흥미를 느끼는 사람들을 물색하는 모습! 🦦 )

회고를 위한 나의 질문 리스트

ESTJ인 나는, 누군가의 팀회고를 참고하여, 질문 리스트를 만들어 회고록을 써보았다.
Let's get it 👇🏻🪄

👩🏻‍💻 프로젝트 관련

프로젝트에서 어떤 역할을 담당했나요?

저는 프론트엔드 개발자 역할을 담당했습니다.

프로젝트에서 무엇을 구현했나요?

페이지로는, 로그인 / 회원가입 / 블로그메인 을 담당했습니다.
로그인과 회원가입에 중요한 유효성 검사를 세세하게 구현하고, 상황에 맞는 에러핸들링 을 직관적으로 구현하기 위해 디테일한 UI/UX를 고심하며 코드를 작성했습니다.
소셜 로그인으로는 카카오와 구글을 구현하였습니다.
보안성을 높이기 위해 회원가입 시, 이메일 인증 기능을 구현했습니다.

블로그메인페이지 에서는, article들이 scroll down만 해도, 계속 알아서 보일 수 있도록, 사용자의 액션을 줄이기 위해 무한스크롤 기능을 구현하였고,
토글에 따라 다른 article들이 보이게 하는 조건부 렌더링,
내가 쓴 블로그만 모아볼 수 있도록 하는 조건부 렌더링을 구현했습니다.
블로그메인페이지 내의 검색 기능과, 전체서비스 검색기능 또한 구현하였습니다.

기억에 남는 구현은 무엇인가요?

무한스크롤 기능입니다. Intersection Observer API 라는 새로운 기술을 사용해보았는데, 저에게 이해하며 구현하기가 쉽지 않았어요.
어찌저찌 구현에는 성공하였는데, 정확히 이해를 하고 코딩을 한게 아니다보니, 추후 저희 서비스에 맞게 수정과 변경에 있어서 많은 애를 먹었었습니다.

👩🏻‍💻 기술 관련

기억에 남는 기술스택이 있나요? 있다면 어떤 이유인가요?

Recoil 입니다.
전역상태관리 라이브러리를 이 프로젝트를 하면서 처음 써보았는데, 정말 무척이나 편리함을 느꼈습니다.
Props drilling 으로 인한 골머리를 더 이상 앓지 않아도 되고, 이곳 저곳에서 구현해야 하는 기능들을 훨씬 수월히 구현할 수 있었습니다.
props를 최소화 시키니, 코드도 깔끔해져서 좋았습니다.

그러나 좀 무분별하게 사용한 것은 아닌지, 과연 해당 라이브러리를 스택으로 부담한 만큼 우리 프로젝트에 효율적으로 적당히 잘 적용시켰는지에 대해서는 자신이 없습니다 ㅜㅜ
다음번엔, 좀 더 공부를 해서 알맞은 효율성을 고려하며 적용해보고 싶네요!

도입해보고 싶은 기술스택이나 배워보고 싶은 기술스택이 있나요?

디자이너와 함께 프로젝트를 할 기회가 생긴다면, storybook도 사용해보고 싶습니다. 디자인 시스템이 참 편리하고 매력적이더군요..
또, vue.js 도 배워보고 사용해보고 싶습니다. React 가 여기저기 잘 쓰이고, 저도 React 부터 개발을 배웠지만, vue.js 의 점유율도 적지 않아서 궁금하고 배움을 더 확장시키고 싶은 스택입니다.

개발하면서 가장 고민했거나 어려웠던 점이 무엇이였나요?

되짚어보면 여러가지가 떠오르지만, 먼저 간단히 떠오르는 것은 Type 지정이었습니다. TypeScript 를 처음 써봐서, 쓰면서 찾아보고 공부하고 그랬었는데, 기초를 배우지 않은 상태에서 쓰려니 헷갈리고 답답했었습니다.

그리고 개인적으로 최적화 작업이 어려웠습니다.
또, 끝난 뒤 리팩토링 때에, 코드를 최적화시키고자 했었는데요. 생각보다 어렵고 서툴러서 조금씩 밖에 손을 못 대겠더라구요. 불필요한 렌더링을 줄이고, 불필요한 리소스를 정리하는 등 코드를 만져보았지만, 과연 내가 하는 최적화가 진정한 최적화가 맞는가.. 하는 의문이 들었었습니다. 😂 ( + 이에 이어서 클린코드도 참 어렵습니다.. 더티코드.. )

위 문제를 어떻게 해결했나요? 해결하지 못했다면 어떤 이유였나요 ?

개발자도구 내에, component 기능을 활용하며, 불필요한 렌더링이 일어나는 컴포넌트를 확인하고,
메모이제이션으로 최적화를 도와주는 React hooks 인 useMemo, React.memo, useCallback, useReducer 들도 써보려고 노력했습니다.

프로젝트를 진행하고 있을 때는, 컴포넌트랑 함수 재활용만 고민하고, 추후 최적화를 염두에 두지 못하고 코드를 짜서, 어디서부터 어떻게 최적화를 시키면 좋을지 감이 오지 않아서 아쉬운 부분입니다.
현직 개발자분들은 어떻게 최적화하시는지 직접 옆에서 보고싶은 심정..ㅋ

👩🏻‍💻 기타

개발하면서 아쉬웠던 점 / 개선해보고 싶은 점이 있나요 ?

다음 프로젝트 때는, 기획자와 디자이너가 있는 프로젝트를 꼭 해보고 싶습니다.
같은 개발자들끼리만 하다보니, 디자인과 기획하는 시간이 비효율적으로 길어지기도 하고, 에너지를 많이 쏟게 되었어서 좀 힘들었는데요.
기획과 디자인을 전담하시는 분들과 하면, 좀 더 탄탄한 기반위에서 개발에 집중할 수 있고, 개발 과정에서 꼬이고 엎어지는 일도 줄어들 것 같습니다.

( + 또 과거, 웹디자이너로 일했던 경험이 있어서, 디자이너랑 직접 소통하며 개발하는 시너지가 어떨지 개인적으로 궁금하기도 하고요! )

협업하면서 어려웠던 점이 무엇인가요 ?

시간과 체력의 효율적인 분배가 어려웠습니다.
정해진 기한 내에, 프로젝트를 마치기도 해야하고, 또 각자 욕심이 나는 부분도 있다보니, 세워놓은 계획들을 잘 못 지키게 되어 우선순위가 엉키기도 하고 지치기도 했었습니다.

팀이지만, 때때로 마이웨이가 돼버렸던 ㅜ
그걸 중간 중간 인지하고 깨닫는데도, 효율적이고 자발적으로 분배하는 게 어려웠습니다. 더 자주 소통하고 회의 하며, 리더역할이 잘 이끌어주었다면 좀 더 협업이 수월하지 않았을까 생각이 드네요.

다음 프로젝트를 한다면, 어떤 프로젝트(개발)을 하고 싶나요 ?

앱 개발! 3D 개발!

프로젝트를 하면서 무엇을 배웠고 어떤 부분이 성장한 것 같나요 ?

아직 많이 얕지만, 여러 스택들을 도전해보고 경험해 본 것이 큰 배움이 되었고, ‘구현할 수 없는 건 없다! 다 어떻게든 구현은 할 수 있다’ 하는 근거없는 힘과 자신감이 생겼습니다.

프로젝트를 통해 말 그대로 전반적인 성장이 있었던 것 같습니다. 프로젝트 없이 독학을 할 때는, 필요한 지식의 부분들만 성장시킨다면, 프로젝트는 힘들어도 한 번 시작하면, 자발적이든 반강제적이든 넓게 큰 폭으로 성장하는 걸 느낍니다.

개발자는 사이드프로젝트, 토이프로젝트를 항상 곁에 두어야하는 것 같네요.

이전의 경험을 발판삼아, 자연스럽게 더 나은 코드와 로직을 짜게 되고, 더 능숙하게 스택들을 다루게 되어서, 그로 인해 더 업그레이드 된 지식들과 경험들을 얻을 수 있게 됐어요!

그래서 두달 가까이 지난 지금, 또 다른 새로운 사람들과 새로운 사이드 프로젝트를 시작합니다! 🥹🥰
중간파토 나지않게 해주세요 주님 🙏🏻

Site 👉🏻 https://www.meerkats.monster/
GitHub 👉🏻 https://github.com/mgkkm/meerkats-frontend