프로젝트 기간 : 2024.09.02 ~ 2024.09.27
프로젝트 주제 : React로 KTwiz 정보제공 페이지 만들기
추가로 디자인 바꾸고 싶은거 의견내고 취합하느라 생각했던 것보단 시간이 걸렸지만, 공통컴퍼넌트 작업을 일요일까지 완료했다!
너무 친절하신 멘토님이랑 주 1회 온라인 미팅을 진행하고 있고,
이제는 issue랑 PR을 사용해서 충돌해결하고 merge하자고 말해서
다들 어색해하는 것 같지만, 그렇게 작업중이다
🔥 TODO
🫨 Landing 페이지 작업
기존 심플한 웹사이트에서
ktwiz만의 구단 색깔을 살려서 강렬하고 힘이 있어보이지만 (red + black) 심플한 요소들을 살렸다.
그래서 디자인적인 요소를 바꿔보고자 랜딩페이지를 새롭게 꾸며보았다.
└> 🤔❓ Problem (문제)
동영상을 데이터 파싱하는건 처음이라, 어떻게 해야할지 감이 안잡혀서
서치를 해보니 <iframe>이라는 태그를 써서 한다고 했다.
기존 <video>태그랑 다른점은
웹 페이지에 직접 비디오 삽입하고 재생할 때, 재생/볼륨 등 컨트롤 할 수 있음
video:
<video controls>라고 적으면
이런 비디오 모양이 뜸: 외부 웹페이지나 동영상을 현재페이지에
iframe⭐임베드할 때!
: 직접 재생하는게 아니라, 프레임 안에 외부 웹페이지를 삽입하는 역할
이번에 네이버tv를 임베드 하는거였는데, clipNo이 같이 api에 넘어왔다!
그 안에서 map으로 돌릴 때,split으로 (clipNo=)을 자르게 되면, [앞에주소, clipNo번호]가 나오니까 [1] 두번째 인덱스를 고르면 번호를 추출해서 임베드 할 수 있다!
📝 회고록
- Kepp (유지)
: 성공적으로 수행 / 긍정적인 경험 / 만족하는 부분 / 앞으로 유지할 부분
-
랜딩페이지 전체 데이터 받아오기 성공 + UI 리뉴얼 😆
-
useFetchData 커스텀 훅 생성해서 팀원들과 공유해 재사용성 ↑
- Problem (문제)
한 팀원이 혼자 계속 랜딩페이지가 데이터 fetch가 안돼서 한참을 다같이 고민하고 시간을 썼다.
결론적으론 내가 커스텀 훅을 만들 때,
어쨌든 멘토님의 API 서버이기도하고, 보안상 + 유연성의 이유로,
.env에 BASE_URL변수를 만들어놓고, 그걸 데이터 패치할 때 사용하고 있었는데
팀원이 .env는 gitignore에 해놨기 때문에 아무리 새로 받아도 안됐던 것이다,,,
근데 우리가 문제점을 파악못하고 헤맸던 이유는
BASE_URL이 없을 땐 "" 값이 없는 문자열로 해놨기때문에
개발자도구에서도 에러를 발견못하고 계속 로딩중만 떴던 것이다,,
└> 😆❗ Good Point
이번에 갑자기 인스턴스가 죽어서 api주소 변경되는 일이 생겼었다
한번에 바꿀 수 있어서 편했다 !!
- Try (시도)
: 다음 스프린트에서 시도해 볼 새로운 아이디어나 개선 사항
-
랜딩페이지
애니메이션 추가
지난경기 하이라이트 => 하이라이트 영상에 따로 추가
-
정규리그
테이블 차트 라이브러리 TRY해서 페이지 구현 START...!!!
——————————————————————————
본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.
