[회고] 구름_PBL(B유형) 인스타그램 클론 코딩 과제를 끝내며 짧은 회고

요즘 개인 프로젝트를 진행하면서 과제까지 병행하느라 블로그 포스팅 및 개인 학습 부분에 많이 소홀해진 것 같다. 과제가 끝난 오늘 회고를 작성하며 마음을 정리하고 다시 나아가 보자 한다!

과제 ?

7월 10일(월)을 기점으로 Todo 앱 제작, 온라인 이력서 제작, 유튜브 퍼블리싱 클론 코딩이라는 과제가 매주 주어지며 이번 인스타그램 클론 코딩의 경우는 프런트와 백엔드를 나눠 개발을 진행하게 되다.
이번 과제를 진행하며 git에 대한 숙련도, 협업하는 능력, CSS를 작성하는 부분 등 생각지도 못한 성과를 얻게 되기도 했지만.. 사실 9월부터 진행되는 이 과제 과정을 갑작스럽게 7월에 미리 당겨와서 실행하는 것은 시기 상조인 느낌이 들었다. 또한 과제가 진행되는 중간에 지난 과제를 정리하거나 부족한 부분을 공부하는 등의 시간 없는 부분이 가장 아쉬웠다.

인스타그램 탐색

클론 코딩을 시작하기 전에 살짝 인스타그램을 탐색해 봤는데, 기능들이 참 많다. 사실 사용할 때는 잘 몰랐지만 막상 기능을 적어보며 살펴보니 역시 전 세계인들이 사용하는 웹사이트 답다는 생각을 했다.
인스타그램도 React로 제작됐기 때문에 클론 코딩 주제로 매우 적합하다고 생각했고 인터랙티브한 디자인도 없었기에 UI를 금방 만들 수 있다고 생각했다.
UI를 만들기 전 가장 걱정했던 부분은 drop-down 버튼과 무한 스크롤인데, 두 가지 모두 사용해 본 경험이 없었기 때문이다. 하지만 이번 기회를 계기로 알아가면 된다!

클론 시작!

7/31일(월)부터 개발을 시작했고 피드가 있는 메인 페이지를 제작하게 되었다. 좌측 사이드 메뉴바와 중앙의 피드, 우측 회원 추천 기능이 들어갈 프레임을 만들고 사이드 메뉴바부터 UI 제작을 시작했는데, 문제없이 원활하게 진행 중 문제의 drop-down 기능이 들어가는 setting 버튼을 만나게 되었다. 하지만 걱정과는 달리 absolute와 relative를 사용해 금방 완성했다.
사이드 메뉴바를 완성하고 두 번째로 고민했던 무한 스크롤이 존재하는 feed 컴포넌트를 만들게 되었는데 구글에 검색해 보니 다양한 방법이 존재했다.
IntersectionObserver API를 사용해서 구현하는 방법이 존재했는데, 사실 가이드라인만 따라가면 코드를 작성할 수 있지만 이미 npm에 라이브러리가 존재하기 때문에 라이브러리를 사용해서 구현했다.

react-intersection-observer

라이브러리를 사용하니 간단한 보일러 플레이트 코드만 작성해도 기능 구현이 가능했고, 더미 데이터를 이용해 메인 피드를 구현할 수 있었다. 이후 중간 점검 차원에서 코드를 종합하고 테스트를 진행했는데,
오랜만에 CORS를 만나게 되었다. 옛날에 저를 많이 괴롭히던 CORS.. 팀원들과 원인을 분석하기 위해 구글에 검색하던 중 대다수의 게시글이 이미 읽은 상태(보라색)인 것을 보고 과거의 내가 이 에러를 봉착했었구나 하는 놀라움과 같은 상황을 곧바로 해결하지 못하고 또 검색하는 부분에서 기분이 찝찝했다. 서버에서 설정을 추가해 CORS를 잘 해결하고 남은 기간에 매일매일 진행 상황을 공유하며 개발을 진행했고 과제 기간이 끝나는 오늘 목표로 정했던 기능들을 구현하며 과제를 끝내게 되었다!

후기

사실 처음 클론 코딩을 진행할 때 기쁜 마음으로 진행하지는 않았던 것 같다. 개인 프로젝트와 학습을 병행하기도 했고, 클론 코딩 자체가 큰 도움이 되지 않을 것이라고 생각했기 때문이다. 하지만 진행하면서 git으로 협업을 하는 부분에서 팀원 분들께 많은 도움을 받기도 하고, 사용해 보지 못했던 다양한 라이브러리, CSS를 사용하며 좋은 경험을 쌓았다고 생각한다. 비록 모든 기능을 완성하지는 못했지만 처음 목표한 기능들을 구현했고, 개발하던 과정에서 많은 것을 배웠기 때문에 값진 시간이었다고 생각한다.

아쉬움

• 아직 호흡을 맞추는 단계인지라 시간이 부족했던 것 같다. 내부적으로는 서버와의 API 통신 테스트를 완료했지만 GitHub로 배포된 프로젝트에는 더미 데이터로만 동작되기 때문에 시간이 조금 더 있었다면 서버까지 배포해서 완성도를 높일 수 있었지 않을까 하는 아쉬움이 남는다.

• 프론드엔드 단에서 아쉬운 점은 React Query를 적용해 보지 못한 부분이다. 최근 React Query를 공부하며 서버 데이터를 캐싱 하는 작업을 직접 수행해 보고 싶었는데, 적용하지 못해 큰 아쉬움이 남는다!

• 커밋을 나누는 단위를 잘 못 맞춘 것 같은데, 코드를 작성하고 한 번에 모아서 커밋을 종종 했던 것 같다. 앞으로는 상황별로 작성한 코드를 커밋으로 잘 나누어 관리할 예정이다.

• 프론트엔드 개발 과정에서 컨벤션을 통일하지 못했던 것 같다. 더 많이 소통했어야 했는데, 이 과정이 부족했던 것 같다. 소통하는 능력도 개발자에겐 중요한 소양이기 때문에 더 분발하도록 노력해야겠다.

처음 팀 단위로 프로젝트를 진행한 만큼 서로의 역량을 100% 다 발휘하지 못했다고 생각한다. 나도 이번 프로젝트를 진행하며 부족한 점을 많이 느꼈기 때문에 남은 기간에 CSS, 이미지 관리에 대한 코드 등의 부분을 보완해서 다음 프로젝트 때는 이미 알고 있는 부분은 더 능숙하게 진행하며 같은 실수를 반복하지 않도록 더욱 준비할 예정이다!
2주 동안 고생하셨습니다 팀원분들!! 🙇🏻‍♂️

인스타그램 클론 코딩 GitHub