[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 프로젝트 2주차 진입

 

2주차 진행

2주차에는 팀원들과 화, 금 2번의 오프라인 미팅을 가졌다. 

못 만나는 날에는 온라인으로 10시~5시 + 9시~12시 동안 코어타임으로 젭에서 같이 개발을 했다. 

진짜 다들 열정이 대단하고,, 이렇게까지 열심히 하는 팀원들을 만날 수 있어서 넘 행복했다

 

어쨌든 다들 각자 파트를 열심히 진행했고

오프라인으로 만나서 전체적인 디자인 통일+상단배너관련해서 이야기도 나눴다. 

나와 같은 선수파트를 맡으신 분이 상단배너를 개발하기로 하셨다. 

 

금요일에는 송파KT빌딩에서 멘토링을 가졌는데, 멘토님께 진행상황을 공유드리고 개발관련 팁들을 받아왔다. 

3주차에 발표팀을 선정하기 때문에 웬만한 중요파트들은 이전에 끝내야하는 상황이었다. (+추석이 껴있어서 실제 개발할수있는 시간이 더 제한적이었다)

그래서 2주차에 3주차진도를 열심히 빼느라 팀원분들 모두가 고생이 많았다.. ㅠㅠ 

---

2주차 진행상황

우선 내가 맡은 파트는 선수 상세페이지다. 

선수 상세페이지는 아래 사진처럼 특정 선수를 클릭했을 때 나오는 페이지로,

선수의 약력과 시즌별 기록, 선수 사진 등을 확인할 수 있다. 

 

(선수 상세페이지 사진)

 

사실 선수 상세페이지는 투수, 코치, 응원단 등등 다 하나의 틀을 개발하고 똑같이 적용하면 되는 형태라서

가장 많은 투수 페이지를 첫번째로 잡고 진행하기로 했다. 

 

컨퍼런스용으로는 한화이글스 페이지를 참고해서 아래처럼 세 파트로 나누어 진행하기로 했다. 

1. 선수 이미지 + 약력

2. 2024시즌 (차트 라이브러리)

3. 타선수 슬라이드(캐러셀)

 

2주차 개발현황은

1번 완료

2번 차트 라이브러리까지 구현완료

상태이다. 

---

선수 이미지 + 약력

서버구동시 나오는 선수상세페이지이다. 상세css는 아직 안 잡은상태이고 대략 이런식으로 구성해놨다.

 

이미지의 경우 저렇게 누끼딴 이미지를 받기는 힘들어서..

직접 이미지를 누끼 따서 진행하기로 했고

나머지 선수기본약력은 api를 받아왔다. 

 

선수 api 종류가 굉장히 많았는데

- 등번호, 선수이름, 영어이름 

- 생년월일, 키/몸무게, 커리어

이렇게 두가지 파트로 나누고 우선은 저 api만 받아오도록 했다. 

 

그리고 api의 경우 다른팀원들과 이야기해서 api폴더 내부의 api.ts파일내부에 같이 모아두기로 했다. 

(api는 async-await방식을 사용하기로 통일했다)

이렇게 한곳에 api코드를 모아두니 가독성도 좋아지고 코드수정도 휠씬 편했다!

---

 

차트 라이브러리

2024 시즌 실적을 표 형식보다는 아래처럼 차트로 뿌리는게 직관적으로 보였다. 

차트 라이브러리를 몇 개 찾아봤는데, recharts에도 방사형 차트가 있고 + 다른 팀원분도 recharts를 쓰고 계셔서 통일하기 위해 recharts로 구현하기로 했다. 

 

예전에 인턴으로 있을 때는 chart.js를 썼었는데 recharts는 처음이라 기대됐다

 

 

npm install recharts

위 명령어로 recharts를 설치해주고 간단하게 차트를 구현해봤다. 

아직 css나 api관련 부분을 더 수정해야겠지만! 우선은 홈페이지에서 잘 나오는 것까지 확인했다. 

3주차에 그래프 css랑 오른쪽에 숫자형태로 나오는 실적을 완성하고

선수별 캐러셀을 완성할 예정이다. 

---

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