Boongranii

최고의 열정을 뽐내는 쿼카 🐶

3 분 소요

여든 여덟 번째 포스팅

안녕하세요! 여든 여덟 번째 포스팅으로 찾아뵙게 되어 반갑습니다!♥

오늘의 포스팅 내용은 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 프로젝트코스 4주차에 관한 내용입니다.
자세한 내용을 알아보러 갑시다❗️

[Boongranii] Here We Go 🔥

1️⃣ 프로젝트코스 4주차 회고

길다면 길고 짧다면 짧았던 4주간의 프로젝트코스의 마무리와 총 6주간의 유데미x스나이퍼팩토리의 프로젝트 캠프가 마무리 되었다.

4주차의 회고를 시작하겠다.

👌 최종 발표팀 선정

image

9월 23일에 최종 성과 발표회의 발표팀으로 선정되었다! KT 기업에서는 두 팀이 선정되었다!🎉

선정되자마자 더욱 바쁘게 진행되었다. 일정이 있어 데일리 스크럼에는 참여하지 못했지만 해야 할 일을 노션을 통해 정리했다.

  • 발표는 누가 하며 몇 명이서 할 것인가?
  • 발표 PPT는 누가 어떤 템플릿을 사용하여 만들 것인가?
  • 발표 목차는 어떻게 구성할 것인가?
  • 남은 가벼운 개발 파트는 누가 할 것인가?

가장 앞에 놓인 문제점을 파악하여 역할 분담을 하였다.

image

위 기준에 따라 최종 우수팀이 되기 위해 준비했다. 이미 100점이라고 생각했다 ㅋ

발표 목차는 다음과 같이 정해보았다.

  1. 프로젝트 정보 및 소개
    • 팀 이름
    • 프로젝트 목표, 기획
  2. 팀원 소개 및 역할
    • 사진을 통한 간단한 자기 소개 및 역할
  3. 프로젝트 진행 및 협업 방법
    • 컨벤션 설정 및 환경 구축(CI/CD 배포, husky, eslint, prettier)
  4. 주요 기능
    • 우리의 목표
    • 페이지 별로 어떤 식으로 개선 되었는지
    • 간단한 사진 및 영상
  5. 회고
    • 추후 이루어질 개발 사항 및 향후 계획
    • 회고
  6. Q&A

위와 같은 목차로 정하여 PPT를 구성하기로 하였다.

👌 남은 나의 역할

내가 맡은 사항은 맡은 파트 개발 완료하기 및 전체적인 코드 리팩토링, 버그 찾아 수정하기였다.

먼저 내가 마무리 중이었던 GAME-관전 포인트 파트를 최대한 빨리 마무리 하였다. 관전 포인트의 기능을 완료 하고 코드가 너무 뒤죽박죽이라서 zustand를 이용하여 스토어를 만들어 전역적으로 데이터를 관리하여 리팩토링을 진행하였다.

특히, 저번 중간 발표 때 해상도로 인해 깨지는 요소 문제가 발생하여 그 부분의 버그를 수정하였다. footer 부분이 하드코딩 되어있었는데 resize 이벤트 핸들러를 통해 자동으로 조정되도록 수정하였다.

또한, 각종 console에 찍히는 에러(파이 그래프에서의 중복된 키 값), 사이드바에서 위로 가기 버튼을 눌렀을 때 백그라운드가 안보이는 문제 등 기존에는 보이지 않았던 오류나 버그가 보이기 시작해 수정하였다.

또한, 스타일의 추가 및 수정을 통해 ui/ux를 개선하였다.

image

최종 발표하기 전에 멘토님께도 보여드리기 위해 main 브랜치로 병합하여 vercel을 통해 오류 없이 배포가 되는 지 확인했다.

배포 환경이라 그런지 이미지 상대 경로의 문제가 발생해 절대 경로로 변경 해주었다.

또한, 새로고침 시 404오류가 발생하는 것은 vercel.json파일에

1
2
3

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

를 추가하여 해결하였다.

또한, 네이버 뉴스의 api를 불러오는 과정에서 로컬 환경에서는 렌더링이 잘 되었지만 배포 환경에서는 렌더링이 되지 않는 오류도 해결하였다.

img 파일 서버에 받아 처리하였다. 키 값의 이름을 바꾸어 이 안에 데이터를 추가해 저장된 캐싱 이미지 경로를 받아 사용하도록 하였다.

이런저런 오류를 해결하고 배포 환경에서 오류 없이 잘 돌아가는 것을 확인하였다.

멘토님께 피드백 받은 점은 PPT의 내용이 너무 많다는 점이었다. PPT 담당하시는 팀장님께서 열심히 양을 줄여 핵심적인 내용만을 담게 되었다.

👌 성능 개선 표

우리 팀은 성능 개선의 차이를 보여주기 위해서 라이트하우스를 사용하여 성능 표를 만들었다.

useCallback이나 메모이제이션, tanstack-table을 사용한 데이터 관리 등을 통해 성능이 향상되었을 것이라 생각하였다.

image

가장 중요한 성능 측면에서는 약 30점의 점수나 올랐다. 하지만, 접근성과 SEO 측면에서는 많이 떨어졌다. 아무래도 CSR로만 제작해서 그렇다고 생각한다.

👌 발표 및 결과

발표 준비 및 개발을 모두 마치고 9월 27일 대망의 최종 발표회를 진행했다.

222

웅진 건물은 정말 웅장했고 광화문은 정말 크고 회사 천국이었다..

111

들어와보니 정말 깔끔하고 잘 되어 있었다.

image

우리 4yclingHomerun은 두 번째 순서였다.

kt wiz의 발표이다 보니 발표자님께 내 kt wiz 유니폼을 입혀 드리고 입은 채로 발표를 진행하였다. 시연 및 PPT 진행은 내가 옆에서 도와드렸다.

PPT 발표 약 15분, 시연 약 10분, Q&A 약 5분으로 해서 총 30분으로 발표 시간을 딱 맞게 채운 것 같다.

발표는 원활하게 진행 되었고 Q&A도 원활하게 진행되어 걸리는 답 없이 잘 대답한 것 같다.

그렇게 모든 발표가 끝나고 나서.. 대망의 최종 우수팀을 가릴 시간..

펄핏기업의 스텝업팀이 최종 우수팀으로 선정되었다❗️🎊

사실 너무 아쉬웠다. 1등할 줄 알았다. 성능 최적화 부분을 가시적이고 명료하게 언급한 팀은 우리팀 밖에 없었다. 우리팀은 CRUD가 없었지만 CRUD보다는 많은 데이터 처리하는 것이 더 어렵다고 생각했다. . .

아쉬웠지만 그래도 다들 고생하셨고 스텝업 팀 정말 축하드립니다❗️

333

1등팀을 제외한 모든팀은 다 우수상 및 2등이라고 한다.

👌 추후

추후 일정은 코드 리팩토링 및 기능 추가이다. 명료하게 정하지는 않았지만 추가 개발 사항이 이루어질 것으로 예상된다.

마지막주에는 급해서 코드리뷰도 못하고 한 번에 머지하고 그러느라 코드가 많이 엉망진창일 것 같은데 그 부분을 수정하여 코드의 가독성 및 관심사 분리를 하도록 할 것이다.

6주동안 모두 고생하셨고, 다툼 및 차질 없이 함께 프로젝트 임해주신 우리 4yclingHomerun 형누님들 정말 고생하셨고 감사합니다. 또한, 우리 KT 기업 멘토님이셨던 이승혁 멘토님 정말 친절하게 잘 지도해주시고 피드백 주셔서 정말 감사했습니다❗️

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.

댓글남기기

참고