🔗 기업연계프로젝트

마지막 프로젝트의 발표회와 동시에 데브캠프 수료식까지 끝났다. 기업연계프로젝트는 2개의 기업이 있었고 대용량 데이터 시각화를 시도해보고 싶었던 나는 "투자 매매 전략 공유 및 중개소셜 플랫폼"을 주제로 한 시스메틱 기업의 프로젝트에 참여하게 되었다.
팀 빌딩 이후 기업의 RFP를 기반으로 회의가 시작되었는데 짧은 기간안에 해야 할 양이 어마무시하게 많다보니 학습 블로그 기록을 할 수가 없었다..🥲 모르는게 있다면 공부를 하면서 바로 적용하고 생성된 이슈를 끝내도 바로바로 이슈가 쌓이는 수준이었다ㅋㅋ 그만큼 많은 작업을 하면서 여러모로 배운 것이 많아 기분 좋게 끝낼 수 있었던 프로젝트였다.

🔗 협업 프로젝트

기업연계프로젝트는 백엔드와 디자이너 직군과 함께 기업의 RFP를 기반으로 진행한 협업 프로젝트이다. 우리 팀은 프론트엔드 5명, 백엔드 6명, 디자이너 1명까지 총 12명의 멤버로 프로젝트를 진행했다.
간략한 팀의 협업 및 개발 진행 과정은 실제 API가 준비되기 전에 백엔드와 노션을 통해 API명세서를 공유했고, 그것을 토대로 프론트엔드는 MSW를 사용해서 빠르게 개발을 시작했다. 또한 Storybook을 활용하여 컴포넌트를 문서화해서 디자이너님, 팀원들과 공유했다. 이를 통해 직군별 피드백 및 확인 과정을 간소화하고 개발 효율을 높일 수 있었다.

🔗 담당역할

페이지 작업은 투자자들의 전략을 공유할 수 있는 전략 랭킹 페이지와 전략 상세 페이지를 담당하였고 다수의 공통 컴포넌트를 작업했다.

공통 컴포넌트

초기 공통 컴포넌트 작업으로 전략 리스트 아이템 컴포넌트(종목&매매 아이콘, 차트, 별점), 테이블 컴포넌트, 회원가입 스텝 컴포넌트 작업을 했다.

나의 담당 페이지의 디자인이 나오게되면서 페이지 작업을 시작하였고 이후 여러 페이지의 디자인이 추가로 나왔을 때 내가 작업해둔 컴포넌트와 유사해서 공통 컴포넌트가 되었다. 그렇게 추가된 공통 컴포넌트는 각 페이지에서 쓰이는 목록 헤더 컴포넌트, 전략 정보 컴포넌트, 사이드 정보 컴포넌트였다.

어쩌다보니 공통 컴포넌트 작업을 많이 하게되었고, 덕분에 컴포넌트 구조 설계 방법에 대해 많은 고민을 할 수 있었다. 공통 컴포넌트 작업을 할 때 복잡성을 낮추고 재사용성을 고려하여 설계하는 것을 우선적으로 하지만 그렇지 않은 컴포넌트는 미쳐 고려하지 못해 공통적으로 쓰이게 될 때 큰 수정이 필요한 경우가 있었다. 이 또한 초기 설계 당시 여러 방면으로 염두해두고 설계 할 필요를 느꼈다.

검색바

전략 랭킹 페이지에서 전략을 검색 할 수 있는 아코디언 형태의 검색바를 개발했다. context를 사용해서 각 버튼과 패널이 커스텀훅의 상태를 개별적으로 참조하도록 하여 열릴 때와 닫힐 때의 애니메이션이 적용될 수 있도록 했다.

트러블 슈팅

위의 코드에서 초기화 버튼의 핸들러인 onReset은 스토어 상태를 초기화하는 액션 함수인 resetState의 실행 이후 API 요청을 트리거하는데, 디버깅 과정에서 액션함수와 데이터 패치 함수의 실행 타이밍 이슈로 인해 상태가 초기화되기 전에 데이터가 패치되는 문제가 있었다. 해당 코드처럼 await을 사용해 초기화 완료 후 데이터가 패치될 수 있도록 수정하였다.

또한 검색하기 버튼의 핸들러인 onSearch는 resetState처럼 validateRangeValue를 실행하고 errOptions 상태 값이 없을 때에만 데이터가 패치되도록 하였는데 디버깅 과정에서 확인해보니 렌더링 과정중에 errOptions가 초기화 되는 것이었다.... 내가 해결한 방식은 핸들러 내부에서 getState를 통해 액션함수를 가져오고 validateRangeValue 함수에서 errOptions를 반환하도록 수정하여 최신 상태를 참조하고 데이터가 패치되도록 했다. 아래 코드가 수정된 코드이다.

스켈레톤

next.js나 tanstack-query를 통해 로딩 ui를 보여주는 많은 방법들 중에 나는 suspense를 선택했다.
아래 코드처럼 서버 컴포넌트에서는 suspense로 목록과 검색바의 컴포넌트 구조를 잡아 적절한 로딩 ui를 보여지게하였다.

클라이언트 컴포넌트에서는 suspense하위 컴포넌트를 React의 lazy를 사용하여 필요한 시점에 로드하고 suspense fallback으로 보여질 스켈레톤 컴포넌트는 Next.js의 dynamic 임포트를 하여 CSR환경에서도 적절한 로딩 상태를 표시 할 수 있었다.

아래처럼 초기 페이지 로드 시에 적절한 로딩ui가 성공적으로 보여졌다..! 🎉

🔗 리팩토링

실제 API를 연결한 이후 기획 상으로는 없으면 안될 데이터지만 목데이터가 적절하게 채워지지 않아 여러 컴포넌트에서 "Cannot read properties of undefined"가 많이 떴었다.🥲 그로 인해 초기에 불필요한 예외처리 코드가 많았었고 필요한 예외처리라 하더라도 옵셔널체이닝으로 클린하게 줄일 수 있는 부분이 몇몇 있어서 해당 코드들을 중점으로 수정했다.

기억에 남았던 멘토님의 코드리뷰 중 하나는 아래코드에서 optionsToArray는 재사용 목적이 없을 뿐더러 불필요한 메모리를 차지하게 되어 map을 사용해서 options에 객체 데이터를 담은 배열데이터를 바로 생성하는 방식으로 수정해도 좋을 것 같다는 리뷰였다. (나는 그당시 왜 이렇게 작성했을까ㅠ)

  const optionsToArray = Object.entries(CHART_SELECT_OPTIONS)
  const options: { value: string; label: string }[] = []

  for (const [key, value] of optionsToArray) {
    options.push({ value: key, label: value })
  }

너무 동의가 되서 바로 아래처럼 수정했던 기억이 있다..

  const options = Object.entries(CHART_SELECT_OPTIONS).map((option) => {
    return { value: option[0], label: option[1] }
  })

🔗 기업연계프로젝트를 마치며

대용량 데이터 시각화를 하고 싶어 시스메틱 기업을 선택하게 되었는데 하고 싶었던 것을 충분히 경험 할 수 있었다. 또한 백엔드, 디자이너와 협업했을 때 짧은 기간동안 그만큼의 효율이 나오게하려면 어떻게 소통하고 협의해야 하는지에 대한 과정도 많이 느끼고 배울 수 있었다. 초기엔 막연하게 어떡하지에 대한 고민이 많았는데 그러한 고민덕분에 MSW로 목킹하고 Storybook을 통해 컴포넌트를 문서화해서 공유하는 방법을 도입할 수 있었던 것 같다.

총 5개의 팀 중에서 우리팀만 프론트엔드 기술 스택으로 Next.js를 선택했는데 Next.js에 대해서 공부하고 경험 할 수 있게 된 것도 너무 좋았던 것 같고 팀원들 간 적극적인 코드리뷰를 통해 엄격한 컨벤션 규칙을 잘 지키고 컴포넌트 설계 방식에 대해 충분한 고민이 필요하다는 점을 다시 한번 배운 것 같다.

결과적으로 오프라인으로 진행되었던 발표회 때 우리팀이 최우수상을 받아서 6주간 고생한 것에 대해 보상을 받은 것 같아 너무 좋았다. 😆 🎉

💡 좋았던 점

1. 백엔드, 디자이너와의 협업 프로젝트 경험
2. 기업 측의 RFP를 토대로 한 프로젝트 경험
3. 서버 컴포넌트와 클라이언트 컴포넌트를 적절하게 구분하여 설계
4. suspense를 사용하여 적절한 로딩ui 처리
5. 상태 액션 함수와 데이터 패치 함수 간의 실행 타이밍 이슈를 겪고 해결
6. 소통하면서 나의 생각을 구체적으로 정리해서 말하는 연습을 자연스럽게 하게 된 것 같음

💡 아쉬웠던 점

1. 기업연계프로젝트라면 여러 방면으로 많은 것들을 배울 수 있는 프로젝트라 생각되는데 그러한 이점이 있음에도 프로젝트 기간이 짧았서 아쉬움
2. 마음이 조급해지다보니 개발할 때 꼼꼼하게 처리하지 못했던 적이 있었어서 여유를 찾고 집중을 할 필요가 있던 것 같음
3. Next.js를 미리 공부하고 경험했더라면 더 많은 것들을 얻어갈 수 있지 않았을까? 하는 약간의 아쉬움..

💡 배운 점

1. 컴포넌트 개발 이전, 구조 설계에 대한 고민의 필요성을 깨닳음
2. 적극적인 코드리뷰는 향후 프로젝트 결과물과 코드 컨벤션에 도움이 됨
3. "1인분은 하자, 피해는 주지 말자"라는 마음가짐으로 시작했지만 프로젝트가 끝난 이후 팀원들에게 "수민님이 많이 도움이 됬고 없었으면 안됬다" 라는 얘기를 듣고 자신감과 책임감을 갖고 프로젝트에 임해야겠다는 생각을 함

💡 앞으로 노력할 점

Next.js에서 SSR과 CSR, 서버 컴포넌트와 클라이언트 컴포넌트, 서버 컴포넌트에서의 API 통신 방법에 대해 더 자세하게 공부하기