[6주차] JobDri 구민교 & 이윤서 과제 제출합니다.#14
Conversation
Feature/landing page UI
Feature/main page UI
feature/#3-search-ui
Feautre/migration
Feature/refactoring
Feature/main refactor
| return () => { | ||
| window.clearTimeout(resetTimer); | ||
| window.clearTimeout(timer); | ||
| controller.abort(); | ||
| }; |
There was a problem hiding this comment.
검색 요청에서 debounce와 AbortController를 함께 사용하여, 입력이 빠르게 변경될 때 불필요한 요청과 stale response가 최신 상태를 덮어쓰는 문제를 함께 방지할 수 있는 점이 좋았습니다!
React 공식 문서에서도 Effect에서 비동기 요청을 다룰 때 이전 요청 결과가 뒤늦게 상태에 반영되는 race condition을 주의해야 한다고 설명하고 있는데, 현재 구현이 그 흐름에 잘 맞는 것 같습니다!
| @@ -0,0 +1,8908 @@ | |||
| { | |||
There was a problem hiding this comment.
pnpm으로 패키지 매니저를 통일한 상태라면 package-lock.json은 제거하는 방향이 좋아 보입니다!
pnpm-lock.yaml과 package-lock.json은 각각 pnpm과 npm이 사용하는 lockfile이라, 의존성 설치 기준을 명확히 하기 위해 pnpm-lock.yaml만 남기는 방향을 고려해보면 좋을 것 같습니다!
There was a problem hiding this comment.
제가 migration이 처음이라 이 부분을 놓쳤네요!! 피드백 감사드립니다🙇♀️🙇♀️
| const { searchParams } = new URL(request.url); | ||
| const query = searchParams.get("query") ?? ""; | ||
| const pageParam = Number(searchParams.get("page") ?? "1"); | ||
| const page = Number.isFinite(pageParam) && pageParam > 0 ? pageParam : 1; |
There was a problem hiding this comment.
Number.isFinite()이나 pageParam > 0 에서 문자나 음수가 들어가는걸 막는 방어로직이 좋은거 같아요!
| title={title} | ||
| className="flex h-[76px] w-full items-center bg-grey-800" | ||
| ariaLabel={`${title} 상세 페이지로 이동`} | ||
| > |
| @@ -0,0 +1,58 @@ | |||
| "use client"; | |||
| function filterValidMedia(items: TmdbTrendingItem[]): TmdbTrendingItem[] { | ||
| return items | ||
| .filter((item) => item.media_type !== "person") | ||
| .filter((item) => getTmdbImagePath(item)); | ||
| } |
There was a problem hiding this comment.
검색 결과 렌더링 전에 person 타입과 이미지가 없는 데이터를 필터링해둔 점 좋네요! 덕분에 빈 카드가 생기거나 영화/TV 목록에 인물 데이터가 섞이는 경우를 방지할 수 있어서 UX가 더 안정적일 것 같습니다.
| </Link> | ||
| <p className="mt-6 text-xs text-gray-400"> | ||
| <span className="text-red-600">|</span> Error Code{" "} | ||
| <span className="font-semibold">NSES-404</span> |
There was a problem hiding this comment.
에러 코드까지 Netflix 원본 UI처럼 반영한 디테일이 좋은 것 같아요!
| useEffect(() => { | ||
| const controller = new AbortController(); | ||
| const searchParams = new URLSearchParams(); | ||
|
|
||
| if (mediaType) { | ||
| searchParams.set("mediaType", mediaType); | ||
| } | ||
|
|
||
| async function loadDetail() { | ||
| setIsLoading(true); | ||
|
|
||
| try { | ||
| const response = await fetch( | ||
| `/api/detail/${id}?${searchParams.toString()}`, | ||
| { signal: controller.signal }, | ||
| ); | ||
|
|
||
| if (!response.ok) { | ||
| setDetail(null); | ||
| return; | ||
| } | ||
|
|
||
| const data = (await response.json()) as DetailResponse; | ||
| setDetail(data.detail); | ||
| } catch { | ||
| if (!controller.signal.aborted) { | ||
| setDetail(null); | ||
| } | ||
| } finally { | ||
| if (!controller.signal.aborted) { | ||
| setIsLoading(false); | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
이 상세 데이터 fetch는 page.tsx에서 처리해서 props로 내려줘도 좋을 것 같아요!
5 participants
링크
Next 넷플릭스
협업 노션
Migration
npm → pnpm
pnpm-lock.yaml,pnpm-workspace.yaml추가Webpack → TurboPack
next dev --turbo적용Refactoring
로딩 UX 개선
search/loading.tsx,detail/[id]/loading.tsx추가상세페이지 포스터 로딩 속도 개선
/api/detail/[id]Route Handler 신설로 상세 데이터 서버 사이드 pre-fetchDetailPageContent,DetailLink컴포넌트 분리하여 페이지 컴포넌트 슬림화MovieRow,MyListRow,TopTenSection의 중복 데이터 fetch 제거공통 컴포넌트 추출
TopTenCarousel,MainBar제거MovieCarousel신설 —MovieRow,MyListRow의 공통 캐러셀 로직 통합6주차 과제 요건
무한 스크롤
SearchPageContent)tmdb.tsAPI에 페이지네이션 파라미터 추가/api/searchRoute Handler에page쿼리 처리검색 로딩 스켈레톤
SearchResultsSkeleton컴포넌트 신설느낀점 및 배운점 (민교)
이번 일주일 동안 과제와 프로젝트를 동시에 진행하며 GitHub를 사용한 협업 방식에 많이 익숙해질 수 있었습니다. 브랜치를 나누어 작업하고, PR을 통해 변경 사항을 공유하고, merge 이후의 흐름까지 확인하면서 실제 협업에서 GitHub가 어떻게 활용되는지 더 잘 이해할 수 있었던 시간이었습니다.
또한 코드 리뷰의 중요성도 느꼈습니다. 내가 작성한 코드를 다른 팀원이 확인해주고, 반대로 다른 팀원의 코드를 보면서 구현 방식이나 놓친 부분을 함께 점검하는 과정이 프로젝트의 완성도를 높이는 데 큰 도움이 된다는 것을 느꼈습니다. 그리고 이를 위해서는 PR을 꼼꼼히 적는 습관을 가지는게 좋을 것 같다는 생각이 들었습니다.
더불어 피그마에 있는 요소들을 실제 코드로 옮기는 방식에도 점점 익숙해졌습니다. 디자인에 있는 레이아웃, 간격, 색상, 컴포넌트 구조를 확인하고 이를 화면에 최대한 가깝게 구현하면서, 디자인을 코드로 변환하는 경험을 쌓을 수 있었습니다.
Research Question
민교
윤서
이번 작업에서는 프로젝트의 개발 환경을 전반적으로 개선하는 데 집중했습니다.
기존에 사용하던 npm을 pnpm으로 마이그레이션하고, 번들러를 Turbopack으로 전환하면서 패키지 설치와 빌드 양쪽 모두에서 속도 개선을 이끌어냈습니다. 저번주 코드 리뷰에서 지적해 주셨던 비효율적인 구조들을 함께 리팩토링하며 코드베이스의 유지보수성과 확장성을 높이는 데 공을 들였습니다.
협업 측면에서도 개선이 필요하다고 판단해, Notion 페이지를 새로 개설하여 작업 현황과 프로젝트 컨텍스트를 한 곳에서 관리할 수 있는 구조를 만들었습니다