[프로젝트 회고] 물품 대여 서비스 BilliG

dk.han·2022년 12월 30일
0

엘리스 SW-3기 2차 프로젝트로 기획, 개발 포함 3주 동안(22.12.12 ~ 22.12.30) 진행하였고, 프론트엔드 4명, 백엔드 2명으로 팀을 구성했고, 나는 팀장이자 프론트엔드 포지션으로 프로젝트에 참여하였다.
팀장이라고 특별히 한 것은 없지만, 프로젝트를 무사히 끝냈고 팀원들도 결과물에 만족해하는 걸 보면 그래도 잘 이끌고 왔다는 생각이 든다.
엘리스 과정 이후 가장 바쁘게 살아온 3주였다. 프론트엔드를 제대로 개발해 본 적이 없어 부담감이 컸고, 새로운 스택을 선택하고 공부하는 과정의 연속이었던 거 같다. 최고의 선택들이었는지는 모르겠으나 팀원들과의 커뮤니케이션을 통해 최선의 선택들이었다고 생각한다.

지금부터 회고를 시작해보도록 하겠습니다.

BilliG 프로젝트 소개

  • 기획의도
  1. 잠깐 쓸 물건을 구매하기엔 부담되는 경우가 있다.
  2. 사고싶은 물건을 구매하기전에 빌려서 사용할 수 있으면 좋겠다.
  3. 물건을 빌려주면서 수익을 얻을 수 있으면 어떨까?
    3가지 아이디어에서 <물품 대여 서비스>를 기획하게 되었다.
    사용자들이 사용료와 기간을 1:1채팅을 통해 정하고 직거래와 택배를 통해 물건을 빌리고, 빌려주는 서비스다.

프로젝트에서 만족한 점 (Keep)

  1. Zustand와 React-Query를 활용한 상태관리
    프론트엔드 개발자인 동생에게 추천받은 상태 관리 라이브러리이다. Client-side-state는 Zustand, Server-side-state는 React-Query를 활용해 관리하였다. 나는 리덕스 사용법이 굉장히 불편하다고 생각했던 한 사람으로서, 두 가지 상태 관리 라이브러리는 학습하는데 크게 어려움도 없었고, 모듈화를 통해 편하게 상태를 관리할 수 있었다.
    특히 리액트 쿼리는 Key 값을 잘 관리해야 하는 불편함이 있었지만, 캐싱과 retry를 지원하기 때문에 서버에서 가져오는 동적 데이터들을 보다 효율적으로 관리할 수 있었다. 다만 리액트 쿼리를 효율적으로 사용했냐? 하면 그렇지 않은 게 분명하지만 앞으로 학습을 통해 보완하면 될 부분이라고 생각한다. 또한 프론트엔드를 개발하면서 느낀 점은 유용한 라이브러리들이 굉장히 많기 때문에 선택 시 이것이 꼭 필요한가를 생각해 보아야 하고, 사용하는 데는 '꼭 이유가 존재해야 한다'를 느꼈다. 또한 라이브러리들이 많은 만큼 공부해야 할 것도 굉장히 많다고 느꼈다.

  2. 기획했던 기능을 모두 구현
    기획 단계에서 서비스 로직을 구상하다 보니 굉장히 많은 기능을 구성하게 되었다. 그래서 Basic / Advanced 기능으로 나누고, 프로젝트 기간 동안은 Basic 기능은 꼭 구현하는 걸로 팀원들과 다짐하였다. Basic 기능이라도 양이 꽤 많았기 때문에 걱정스러운 부분이 많았지만 너무나도 고맙게 팀원들이 학습능력도 뛰어난데 열정도 넘쳐서 성공적으로 기능들을 구현해낼 수 있었다. 또한 프론트엔드와 백엔드가 협업 시 커뮤니케이션이 너무 잘 이루어져 요구사항과 피드백이 빠르게 이루어진 부분도 성공적인 프로젝트의 한 부분이라 할 수 있다.

  • 내가 맡은 부분
  1. 로그인 유지
    서비스에 글쓰기, 채팅 기능이 있기 때문에 로그인이 풀려버리면 UX가 나빠질 것이라 판단해 Access, Refresh 두 가지 토큰을 사용하여 로그인 유지를 구현하였다. Access 토큰의 만료시간을 짧게, Refresh는 길게 설정하고 Refresh는 쿠키에 담아 보내줌으로써 보안성을 향상시켰다.
    axios interceptor를 이용하여 Access 토큰이 만료되면 Refresh 토큰으로 재발급 받아 request Header에 토큰을 교체해 주는 방법으로 로그인 유지를 구현하였다.

  2. submain, searchpage, mypage
    세 페이지의 공통점은 유저들이 등록한 게시물을 보여주고 확인하는 페이지다. 때문에 기능적으로는 어려운 부분이 없었으나 UI 적으로 어떻게 구성해야 깔끔하게 할 수 있을까 많이 고민했었다. 그래서 내가 자주 이용하는 크림, 29CM, 무신사, 쿠팡 같은 커머스 사이트들을 돌아다니며 디자인을 참고하였다. mypage에서 프로필 확인, 수정하는 페이지가 그래도 좀 까다로웠는데 프로필 수정 시 프로필 사진 미리 보기 기능은 어렵진 않았지만 처음 구현해 본 거라 재밌게 공부했었다. 유저정보와 관련된 API 설계를 위해 백엔드와 많은 소통을 했는데 협업이 잘 이루어진 것 같아 뿌듯하다.

프로젝트에서 아쉬웠던 점 (Problem)

  1. 컴포넌트의 재사용성을 고려하지 못한 점
    개발 단계에서 컴포넌트의 재사용성을 고려하지 않은 것은 아니나, 짧은 시간으로 인해 UI를 만들어내는데 급급해서 재사용을 효율적으로 하지 못하였다. 개발하면서도 이 부분이 굉장히 신경 쓰였지만, 리팩토링 때 개선하기로 하고 미뤄두었다. 아직 개발 경험이 많지 않기에 컴포넌트 설계를 한 번에 효율적으로 하지 못한 부분이 있는데 앞으로 공부해나가면서 이 부분은 꼭 염두에 두어 공부하도록 하자.

  2. 효율적이지 못한 상태관리 (React-query)
    위에서 언급하였지만, 효율적으로 리액트 쿼리를 사용하지 못했다. 데이터 캐싱이나 invalidate를 이용해 네트워크 통신을 조금 더 효율적으로 한 부분은 있지만, Key 값에 대한 코드 컨벤션이 없었기 때문에 같은 데이터를 다른 키값으로 받아온다든지, 여러 번 사용되는 useQuery 함수를 모듈화 시키지 못해 똑같은 코드가 여러 번 사용되는 문제들을 해결하지 못하였다. 이 점은 팀원 모두가 문제라고 느끼고 있었기 때문에 리팩토링 기간에 가장 먼저 보완해야 할 점이라 생각한다. 또한 리액트 쿼리에 대해 심도 있는 학습이 필요하다고 느꼈다.

  3. Typescript
    Typescript를 적용해서 개발해 보자라고는 했지만...? 내가 제대로 쓴 게 맞나?라는 의문점이 든다. 타입설정 시 Type, Interface 중에 무엇을 써야 되는 거며, 타입 관리는 어떻게 해야 되는지 이런 부분들을 제대로 알지 못한 체, 타입 오류가 뜨면 그때 선언해서 쓰는 식으로 사용했기에 무늬만 tsx인 느낌이다. 리액트에서 Typescript를 어떤 식으로 사용하는지 공부가 필요하다.

개선해야 할 점 (Try)

  1. 코드의 재활용성을 고려한 리팩토링
    타입선언, React-Query, Zustand의 코드 뿐만아니라 컴포넌트 재사용성까지 고려해서, 코드를 개선하고자 한다.
    모듈화를 통해 재사용성을 높이면 한층 더 효율적이고 퀄리티있는 코드가 되지 않을까 기대한다.

  2. React Suspense 적용
    리액트 v18에서 추가된 기능인데, 로딩화면을 리액트쿼리의 isLoading을 받아와서 처리하였다. 이러한 비동기적 코드를 조금 더 우아하게 처리할 수 있는 기능이라고 알고있는데, 학습을 통해 적용해보고자 한다.

  3. config 파일들에 대한 이해
    프로젝트 내에 TS, ESlint, Prettier, tailwind, 등등... 초기 셋팅에 필요한 config 파일들에 대한 이해도가 많이 부족해서 설정하는데 꽤나 오랜 시간이 걸렸다. 이번 프로젝트에 적용된 config들을 정리하면서 공부하는 시간을 가져보고자 한다.

느낀점

한층 성장한 나

2차 프로젝트 전까지 백엔드를 공부했었기에, 프론트엔드 포지션을 선택할 때 팀에 짐 덩어리가 될까 봐 부담감이 있었다. 프론트엔드 개발 지식은 조금 부족했지만 채워나가고자 열심히 노력했기에 나의 역할을 다 할 수 있었다. 프로젝트를 진행하면서 백엔드에 대한 이해도가 있는 프론트엔드 개발자는 소통에 있어 굉장히 이점이 많다고 느꼈다. auth나 api에 대한 이야기를 할 때 편했고 의견 제시도 할 수 있어서 소통이 잘 됬던게 아닌가 생각한다. 앞으로 한 분야에 매몰될 것이 아니라 두 포지션 모두 이해도를 갖춘 개발자로 성장해야 한다고 느꼈다.

좋은 자극제이자 동료였던 팀원들.

프로젝트 기간에도 느꼇던 부분들이지만 팀원들이 너무 열심히 프로젝트에 참여하더라.... 칸반에 적은 Task를 기간 내에 학습하고 구현해 내는 모습에 자극을 받으며 긴장감을 가지고 더 열심히 프로젝트에 임하게 되었다. 때문에 책임감을 가지고 개발을 진행할 수 있었고 결과물도 만족스럽게 나오지 않았나 싶다. 팀원들에게 정말 감사한 마음을 가지고 있으며, 앞으로도 쭉 인연을 이어나고 싶은 친구들이다.

빌리지 링크 Billig

이상으로 Billig 프로젝트에 대한 회고를 마치도록 하겠습니다.

0개의 댓글