🌲깊은산골짜기 프로젝트 회고
최종 프로젝트가 드디어 끝났습니다.
최종 발표는 8월 중순에 끝이 났지만, 백엔드 팀원 두 분의 도움으로 리팩토링과 에러들을 해결하고 PlayStore까지 출시 완료를 마쳤습니다!!!
총 4개월에 걸친 프로젝트로, 이전 프로젝트인 알고리즘 파이터에서는 프론트엔드의 기초적인 맛을 보았다면, 이번 프로젝트 '깊은산골짜기'는 프론트엔드의 전체 과정을 경험해볼 수 있었던 뜻 깊은 프로젝트였습니다.
깊은산골짜기
이전 프로젝트들의 회고글에서는 배운 점들을 짤막하게 한 페이지 안에 담을 수 있었지만, 이번 프로젝트에서는 배운 점이 너무 많아 시리즈로 연재해야 할 것 같습니다. 이 메인 회고글에서는 KTP 회고 방식을 사용해 글을 작성했습니다.
프로젝트 깃허브는 여기에서 확인할 수 있습니다.
🌟 K (Keep) - 계속 유지할 점
1. 효율적인 협업과 커뮤니케이션
이번 프로젝트에서 GitHub Projects, Notion, Discord, Figma 등의 협업 도구를 활용해 팀원들과 원활하게 소통할 수 있었습니다. 각 도구의 역할을 명확히 나누고, 진행 상황을 투명하게 공유하여 협업의 효율성을 높였습니다. 특히 Git flow와 GitHub Actions를 사용해 개발 브랜치를 명확히 구분하고, 자동 배포 환경을 구축한 것은 큰 장점으로 작용했습니다. 이를 통해 각자 맡은 작업의 진행 상황을 빠르게 공유하고, 효율적인 일정 관리가 가능했습니다. 또한, eslint와 prettier를 사용하여 팀원들 간의 코딩 포맷을 일치시켜 좀 더 효율적인 개발이 가능했습니다.
2. 계속 고민하고 시도하는 태도
기술 스택 선정, 라이브러리 선택, 에러 해결 등에 있어 "왜 이걸 사용하는가?"에 대한 끊임없는 질문을 통해 더 나은 선택을 할 수 있었습니다. 예를 들어, React Query의 isLoading과 React Suspense/Fallback 중 어떤 것을 사용해야 하는지, 왜 Next.js 대신 React를 선택했는지, Vite를 도입하려 한 이유, 어떤 상태관리 라이브러리를 사용해야 하는지 등 기술적 결정을 할 때 근거를 고민하는 과정이 매우 유익했습니다. 이러한 고민은 단순히 기술적인 문제를 해결하는 것을 넘어 더 나은 개발 방식을 탐구하고, 장기적인 유지보수를 고려한 결정을 할 수 있게 해주었습니다.
또, 프로젝트가 완성된 후에도 사용자의 편의를 위해 지속적으로 새로운 기능을 추가하고자 노력했습니다. 초기에는 필수 기능을 구현하는 데 집중했지만, 프로젝트의 완성도가 높아짐에 따라 추가 기능을 계획하고 실행했습니다. 예를 들어, 아이디/비밀번호 찾기 기능을 추가하여 사용자가 로그인을 잊어버렸을 때 쉽게 복구할 수 있도록 했고, 사용자 맞춤형 리뷰 기능을 통해 더 나은 사용자 경험을 제공하고자 했습니다. 또한, 랜딩 페이지에 애니메이션을 추가하여 사용자에게 더 직관적이고 매력적인 인상을 남길 수 있도록 개선했습니다.
💡 T (Try) - 새롭게 시도한 점
1. React Query 사용하기
이번 프로젝트에서는 React Query를 도입하여 서버 상태를 효율적으로 관리하는 방법을 시도했습니다. 이전까지는 단순히 useState와 useEffect를 통해 서버와의 비동기 통신을 처리해왔지만, 이는 상태 관리가 복잡해지고 데이터 동기화에 어려움이 있는 문제를 야기했습니다. React Query를 사용함으로써 서버 데이터를 자동으로 캐싱하고, 필요에 따라 데이터를 무효화하거나 다시 불러오는 작업을 선언적으로 처리할 수 있었습니다. 이를 통해 코드의 가독성과 유지보수성을 크게 향상시킬 수 있었으며, 서버와의 통신 빈도를 줄여 성능 최적화에도 긍정적인 영향을 주었습니다.
2. 이미지 업로드 구현 및 성능 개선
프로젝트에서는 사용자들이 프로필 이미지를 업로드하는 기능을 구현했으며, 이 과정에서 성능 최적화를 위해 여러 가지 시도를 했습니다. 모바일 환경에서 대용량의 고화질 이미지 업로드로 인해 발생하는 에러를 해결하기 위해, 업로드된 이미지를 WebP 포맷으로 변환하고, 필요한 크기로 리사이즈한 후 AWS S3에 저장하는 방식으로 최적화했습니다. 이를 통해 데이터 전송 크기를 줄이고, 이미지 로딩 속도를 향상시켜 사용자 경험을 크게 개선할 수 있었습니다. 또한, 이미지 최적화를 자동화하여 사용자가 이미지 업로드 시 느끼는 불편함을 줄이고, 더욱 직관적인 UX를 제공할 수 있었습니다.
3. 배포 자동화 및 PWA 도입
AWS S3와 CloudFront를 활용하여 정적 파일을 배포하고, CDN 캐시 무효화를 통해 사용자에게 항상 최신 버전을 제공하는 방식으로 배포 프로세스를 자동화하면서 프론트엔드 배포 과정을 경험해 볼 수 있었습니다. 또한 PWA와 TWA로의 전환을 통해 앱처럼 사용자에게 제공하고, Play Store에 비공개 테스트를 진행하는 경험도 해보았습니다. 이러한 시도를 통해 네이티브 앱 수준의 사용자 경험을 웹에서도 제공할 수 있었고, 개발 외적으로는 프로젝트 홍보와 비용 관리 등 다양한 부분을 경험할 수 있었습니다.
4. 성능 개선을 위한 전방위적인 시도
이번 프로젝트에서는 성능 개선에 중점을 두고 다양한 최적화 작업을 시도했습니다. 메인 페이지와 검색 페이지 등 주요 페이지에서 불필요한 렌더링을 줄이기 위해 React.memo를 활용하고, Zustand의 전역 상태 관리를 통해 데이터의 재사용을 극대화하여 렌더링 횟수를 최소화했습니다. 또한, Tanstack Query의 캐싱과 무효화 기능을 적극 활용하여 서버 요청 횟수를 줄이고, 네트워크 비용을 절감했습니다. SEO 최적화 작업에도 집중하여, 검색 엔진에서의 가시성을 높이고, Lighthouse 점수를 개선하기 위한 메타태그와 robots.txt 설정을 추가했습니다. 그 결과를 Google Search Console을 사용하여 확인하였고, 이러한 성능 개선 작업을 통해 사용자 입장에서 생각하는 법을 터득할 수 있었고, 웹의 작동 과정에 대한 이해를 높일 수 있었습니다.
5. Chakra UI 사용
Chakra UI를 사용해 디자인 고민을 줄이고, CSS와 보일러플레이트 컴포넌트의 개발에 대한 부담을 줄일 수 있었습니다. Chakra UI는 접근성과 유연한 테마 설정을 제공해 디자인 시스템을 쉽게 유지하고 관리할 수 있도록 도와주었습니다. 이를 통해 개발 속도를 크게 향상시킬 수 있었고, 반응형 디자인을 적용할 때도 Chakra의 내장 유틸리티를 활용해 간편하게 구현할 수 있었습니다.
🌿 P (Problem) - 개선할 점
1. 더 커스터마이징된 개발 환경 설정
이번 프로젝트에서는 공식 문서에 따라 React, Vite, TypeScript를 기본으로 개발 환경을 설정했습니다. 그러나 개발을 진행하면서 프로젝트의 특성에 맞는 맞춤형 개발 환경 설정이 필요하다는 것을 느꼈습니다. 특히 개발 환경에서 초기 로딩 속도가 Vite를 사용함에도 불구하고 매우 느린 것을 확인할 수 있었는데, 최소 1000ms 이상이 소요되며 로드 시 모든 정적 파일들을 다운받아 실행되었습니다. 물론 배포 환경에서는 빌드된 파일을 사용하므로 이러한 문제가 없었지만, 개발 과정에서 불편함을 느낌에도 불구하고 개발 우선순위에 밀려 자세히 다루지 못했습니다. 향후 프로젝트에서는 초기 설정부터 최적화를 고려하여, 맞춤형 개발 환경을 구축하고자 합니다.
2. 코드 품질 문제
프로젝트의 빠른 진행을 위해 코드 리뷰와 리팩토링에 충분한 시간을 할애하지 못한 부분이 아쉬웠습니다. 특히, 중복된 코드가 일부 남아있었고, 더 나은 구조로 리팩토링할 수 있는 부분들이 존재했습니다. 이러한 부분은 자신이 작성하지 않은 코드를 수정하려고 할 때 개발 생산성을 매우 저하시켰습니다. 코드 품질 문제는 유지보수성을 떨어뜨리고, 새로운 기능 추가 시 장애물이 될 수 있음을 느꼈습니다. 향후에는 개발 일정을 조금 더 여유롭게 잡고, 코드 리뷰와 리팩토링에 충분한 시간을 할애하여 코드 품질을 향상시키고자 합니다. 특히, 처음 코드를 작성할 때부터 좋은 코드를 작성하려는 노력을 하려고 합니다.
3. 테스트 코드 작성하기
테스트 코드 작성의 필요성을 절실히 느꼈지만, 실제로 적용하기에는 여러 어려움이 있었습니다. 프로젝트 초반에는 테스트의 중요성을 간과하고 기능 개발에 집중한 나머지, 후반부에 들어서야 테스트의 부재로 인해 발생하는 문제를 직면하게 되었습니다. 코드를 수정할 때마다 예상치 못한 부작용이 발생했고, 이를 발견하고 수정하는 데 많은 비용이 들었습니다. 이러한 이유로 테스트 코드를 부분적으로 작성을 해보았으나, 기능 개발에 버금가는 생산 속도와 더불어 프로젝트 막바지에 적용되었고, 무엇보다 비동기 통신과 관련된 테스트 작성이 어려워 전체 코드에 대해서는 적용하지 못했습니다. 향후 프로젝트에서는 테스트 코드 작성을 필수적인 작업으로 여기고, 코드 작성과 동시에 테스트 코드를 도입하여 안정성을 확보하고자 합니다.
4. GPT!!!!
개발 과정에서 문제가 생기면 고민하기보다는 곧바로 GPT와 라이브러리에 의존하는 경향이 있었습니다. 효율적이긴 했지만, 스스로가 언어나 라이브러리에 대한 깊은 이해가 부족하다는 것을 느꼈습니다. 예를 들어, 캐러셀이나 모달 같은 기능도 직접 구현하기보다는 라이브러리를 사용했는데, 앞으로는 기본적인 기능은 직접 구현하며 이러한 의존을 줄이고자 합니다. GPT를 참고하되, 스스로 고민하고 학습하는 시간을 늘려 지식의 깊이를 쌓는 것이 중요하다고 느꼈습니다.
이번 '깊은산골짜기' 프로젝트를 통해 팀원들과의 협업, 기술 스택의 활용, 기능 개발, CI/CD 파이프라인 구축 등 프론트엔드 프로젝트의 처음부터 끝까지 경험해볼 수 있었습니다. 많은 것을 배우고 성장할 수 있었으며, 이번 프로젝트에서 배운 내용을 내 것으로 만드는 과정을 거쳐야겠다고 생각합니다. 위에서 언급한 내용 외에도 자세한 내용은 좀 더 세부적인 글로 순차적으로 포스팅할 예정입니다.
긴 글 읽어주셔서 감사합니다!