[6주차] gotcha팀 미션 제출합니다 by silverain02 · Pull Request #14 · CEOS-Developers/next-netflix-18th

silverain02 · 2023-11-17T14:47:51Z

배포링크

Key Question

정적라우팅vs동적라우팅

라우팅은 기본적으로 url이동, 즉 데이터를 보낼 경로를 선택하는 과정으로 리액트는 정적, 동적 라우팅을 지원한다.
정적라우팅은 미리 정해놓은 주소로 이동하는 것으로, 사용자 모두가 같은 페이지로 라우팅 된다.
반면 동적 라우팅은 주소가 자동으로 설정되어 가변적 페이지로 라우팅된다.

이번 과제에서는 상세페이지를 동적라우팅으로 구현했는데 데이터 전달방식에 있어서 queryString이나 pathVariable을 사용하는 것과 props로 전달하는 방식 중 더 효율적인 방식에 대해 고민해 볼 수 있었다.

성능 최적화를 위해 사용한 방법

페이지는 SSR로 구현해도 업데이트가 빈번한 컴포넌트 CSR로 구현해 불필요한 렌더링을 최소화하도록 했다

후기

은비: 이번 넷플릭스 클론은 불러오는 데이터가 많다보니 로딩 속도가 생각보다 길어져서 성능최적화의 필요성을 많이 느낀 미션이었습니당
다들 이번주도 고생하셨어요~~

지혜: 검색 기능 구현하며 react-query를 사용해봤는데, 수많은 에러를 마주했지만... 어찌저찌 해낸 것에 의의를 두려고 합니다. debounce, isLoading 등 더 다양하게 사용해보면 좋았을 것들을 적용해볼 수 있기를 바랍니다... 유독 이번 주차 과제 진행하며 기능 구현 외적인 에러가 많았는데, 이렇게 낼 수 있어서 정말 기쁩니다😂

Feature/1 setting

[chore] 라우팅수정

Feature/3 mainpage

Feature/1 setting/ api연동

style : MainControlBox style

[chore] 브랜치충돌 해결

style : MainImage style

Feature/4 movie list

[feat]화면 반응형으로 조정

Feature/7 api connect re

Feature/6 style change

Feature/8 detail

[feat] 검색 기능 구현

Feature/11 detail check

rmdnps10

이번 한 주 동안 고생 많으셨습니다~
리액트 쿼리를 도입하려고 하신게 특히 인상 깊었습니다!! 일요일날 봬요 :)

rmdnps10 · 2023-11-18T03:52:38Z

+  baseURL: BASE_URL,
+  headers: {
+    "Content-Type": "application/json",
+    Authorization: `Bearer ` + process.env.NEXT_PUBLIC_AUTH,


.env 파일 숨기신 점 잘하신 거 같아요:)

rmdnps10 · 2023-11-18T03:56:40Z

+  return (
+    <div
+      className={`fixed top-0 flex justify-between items-center w-full max-w-[450px] h-[57px] px-4 md:px-5 lg:px-6 py-8 pr-8 z-50 transition-all duration-300 ease ${
+        scrollPosition > 100


Header안에서 scrollPosition에 따라 배경을 다르게 하신 디테일 너무 좋아요~~

rmdnps10 · 2023-11-18T04:00:38Z

@@ -0,0 +1,93 @@
+'use client';


만약에 SSR로 구현한다면, 상세페이지에서 useEffect를 쓰는 대신에 async() - await 패턴을 적용해서 data fetching을 진행할 수 있을 거 같습니다!
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating

rmdnps10 · 2023-11-18T04:02:25Z

+"use client";
+
+import React, { useState } from "react";
+import { Hydrate, QueryClientProvider, QueryClient } from "react-query";


오 리액트 쿼리!!!! 튜토리얼 보고 너무 무서워서 도입하려다 말았는데 도전정신 멋있습니다...

rmdnps10 · 2023-11-18T04:05:08Z

+  );
+
+  return (
+    <div className="flex flex-col w-full h-screen items-start max-w-[450px] scrollbar-none">


지금은 검색했을 때 이미지가 렌더링되면 검색 부분 height가 밑에서 지정해준 20으로 줄어들고 잇는데, 검색 부분의 height 특정 값으로 지정해주면 좋을 것 같아요!

rmdnps10 · 2023-11-18T04:07:05Z

+
+const MainControlBox = () => {
+  return (
+    <div className="flex flex-col items-center gap-11 pt-2.5 px-11 pb-11 w-full">


Taillwind css 를 잘 적용하시는 거 같아요!!

wokbjso

tailwind 로 마이그레이션에 일부 성공하셨다는 점에서 박수 드립니다 ㅋㅋㅋㅋㅋ 너무 수고하셨고 작성하신 코드를 읽어보며 많은 공부가 되었습니다. 시간관계상 양질의 코드리뷰를 못해드린점 죄송하고 수고하셨습니다!!

wokbjso · 2023-11-18T10:07:02Z

+
+const api = axios.create({
+  baseURL: BASE_URL,
+  headers: {
+    "Content-Type": "application/json",
+    Authorization: `Bearer ` + process.env.NEXT_PUBLIC_AUTH,


axios 인스턴스 설정 좋네요 ㅎㅎ

wokbjso · 2023-11-18T10:07:38Z

+        <Image
+          src={'/images/netflix-logo.svg'}
+          width={57}
+          height={57}
+          alt="logo"
+        />


next/image 를 통해 최적화 하신 점 좋네요 ㅎㅎ

wokbjso · 2023-11-18T10:08:10Z

+const MainControlBox = () => {
+  return (
+    <div className="flex flex-col items-center gap-11 pt-2.5 px-11 pb-11 w-full">


오 tailwind 로 마이그레이션 성공하셨네요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 축하드립니다

wokbjso · 2023-11-18T10:11:44Z

@@ -0,0 +1,92 @@
+'use client';


추후 리팩토링을 통해 페이지 최상단 'use client' 선언을 방지한다면 사용자 경험이 더욱 개선될 것 같아요!!

wokbjso · 2023-11-18T10:12:23Z

+
+const PlayBut = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 18.9375rem;
+  height: 2.8125rem;
+  border-radius: 0.35156rem;
+  background: #c4c4c4;


시간상 모든 부분은 tailwind 로 바꾸지 못하신 것 같네요 ㅋㅋㅋㅋㅋㅋ

wokbjso · 2023-11-18T10:13:41Z

+
+        <div className="flex flex-col pl-4 gap-3 pb-8">
+          {upComingData && (
+            <MainItemList title="Previews" data={upComingData} circle={true} />
+          )}
+          {popularData && (
+            <MainItemList
+              title="Popular on Netflix"
+              data={popularData}
+              circle={false}
+            />
+          )}
+          {topRatedData && (
+            <MainItemList
+              title="Trending Now"
+              data={topRatedData}
+              circle={false}
+            />
+          )}
+          {nowPlayingData && (
+            <MainItemList
+              title="Now Playing"
+              data={nowPlayingData}
+              circle={false}
+            />
+          )}
+        </div>


이 부분 MainItemList 의 정보를 array 변수로 선언한 뒤 map 함수로 렌더링한다면 가독성과 추후 확장성에 더 좋을 것 같다는 개인적인 의견 드립니다!!

geeoneee

코드가 깔끔해서 리뷰 하기 편했어요:) 과제 수고 많으셨습니다~~

geeoneee · 2023-11-19T05:57:21Z

+
+  return (
+    <div
+      className={`fixed top-0 flex justify-between items-center w-full max-w-[450px] h-[57px] px-4 md:px-5 lg:px-6 py-8 pr-8 z-50 transition-all duration-300 ease ${


tailwind로 바꾸신 점 좋은 것 같습니다:)

geeoneee · 2023-11-19T06:02:25Z

+              handleItemClick(id, link);
+            }}
+            selected={selected}
+          >


handleItemClick로 링크를 처리하는 대신 next/Link 이용해서 코드를 작성하면 더 간결해질 수 있을 것 같아요!

geeoneee · 2023-11-19T06:08:17Z

+        {searchResults &&
+          searchResults.results.map((movie: any) => (
+            <SearchingItem key={movie.id} movie={movie} />
+          ))}


검색어가 없을 때는 영화들이 뜨지 않는 것 같아요🥲

앗ㅜㅜ 해당 항목 디테일을 놓쳤네요. 추후 수정할 수 있도록 하겠습니다!!

geeoneee · 2023-11-19T06:10:28Z

+              fill
+              style={{
+                objectFit: "cover",
+              }}


영화의 포스터가 없을 때는 대체 화면(넷플릭스 로고 등)을 띄우게 하면 좋을 것 같아요:)

따로 대체 이미지를 넣지는 않고, poster-url이 없을 때는 회색 박스가 뜨도록 설정해놨었어요! 그런데 추후에 스켈레톤 컴포넌트 추가하게 된다면 헷갈릴 수 있으니 대체 이미지를 넣는 방식도 좋을 것 같습니다😊

geeoneee · 2023-11-19T06:12:32Z

+            alt={"delete"}
+            width={28}
+            height={28}
+          />


버튼을 눌럿을 때 detail 화면으로 넘어가야 하는데, 넘어가지 않는 것 같아요!

geeoneee · 2023-11-19T06:14:03Z

+          }}
+        />
+      )}
+      <div className="absolute z-10 w-full h-full bg-gradient-to-b from-black via-transparent to-black"></div>


gradient 적용하신 디테일 좋은 것 같습니다:)

kyuhho

한 주동안 고생하셨습니다~~ react-query를 사용해서 구현한 점이 인상 깊네요 👍👍

kyuhho · 2023-11-19T07:36:30Z

overflow: hidden; 를 이용해서 브라우저의 scroll bar를 없애주면 더 깔끔한 UI가 될거 같아요~!

kyuhho · 2023-11-19T07:42:28Z

+  const {
+    data: searchResults,
+    isLoading,
+    isError,
+  } = useQuery(
+    ["search", { query: inputValue }],
+    () => getSearchResults(inputValue),
+    {
+      enabled: inputValue !== "",
+    }
+  );


searchResults를 가져올 때 아무것도 입력되지 않으면 Top Searches가 뜨지않는 문제가 발생하는거 같아요!

kyuhho · 2023-11-19T07:47:02Z

+    };
+
+    fetchData(movieId);
+    console.log(data);


console.log 는 배포 시 지워주면 좋을거 같아요~~

silverain02 and others added 30 commits November 8, 2023 10:01

[feat]nextjs 프로젝트 생성

13d5e27

[chore] 파일경로이동

841d111

[chore]폴더 구조 수정

f7dd432

Merge pull request #1 from team-gotcha/feature/1_setting

107d08e

Feature/1 setting

[chore] 라우팅수정

f3ff54d

Merge pull request #2 from team-gotcha/feature/1_setting

d8ab520

[chore] 라우팅수정

feat : lottie 띄우기

dc56d11

feat : 애니메이션 이후 main 이동

7f93a87

style : globalstyle 설정

4726352

[feat] axios 인스턴스화, data fetching test

565fe63

style : Header, NavBar style

53de400

[feat] img 데이터 fetching

f2d34aa

[chore]폴더정리

54af881

Merge pull request #3 from team-gotcha/feature/3_mainpage

727764c

Feature/3 mainpage

Merge branch 'master' into feature/1_setting

7362a46

Merge pull request #4 from team-gotcha/feature/1_setting

13a33f7

Feature/1 setting/ api연동

style : MainControlBox style

318f8d9

Merge branch 'master' into feature/3_mainpage

81e9cdc

Merge pull request #5 from team-gotcha/feature/3_mainpage

fc16c08

style : MainControlBox style

[chore] 브랜치충돌 해결

839ea3a

Merge branch 'master' into feature/4_movieList

5e9e156

Merge pull request #6 from team-gotcha/feature/4_movieList

185a48f

[chore] 브랜치충돌 해결

style : MainImage style

4ffd269

Merge pull request #7 from team-gotcha/feature/3_mainpage

313ca85

style : MainImage style

[feat] movie이미지리스트

07e4b9a

[feat] data추가

ef4fb35

[feat]main random img bar

a76c3ac

Merge pull request #8 from team-gotcha/feature/4_movieList

b2f8cd9

Feature/4 movie list

[feat]화면 반응형으로 조정

10b702f

Merge pull request #9 from team-gotcha/feature/4_movieList

7da6aeb

[feat]화면 반응형으로 조정

silverain02 and others added 25 commits November 15, 2023 14:04

[feat] api SSR방식으로 변경

7ae6111

Merge pull request #13 from team-gotcha/feature/7_apiConnectRe

0306120

Feature/7 api connect re

Merge branch 'master' into feature/6_styleChange

1737dbc

Feature/6 style change

669f712

Feature/6 style change

[feat] 이미지 url 오류 수정

cbeca62

[feat] 상세페이지 라우팅 처리

4921b42

[feat] api 통신

2fd517b

[feat] API연동 CSR방식으로 변경

18b555c

[feat] API연동, 스켈레톤 구성

c2407d9

[chore] Image수정

43fc3e9

[feat]상세페이지 마크업

0e1b447

[fix] mainImage안뜨는 오류 수정

a741f08

Merge pull request #15 from team-gotcha/feature/8_detail

a4c2150

Feature/8 detail

[feat] 검색 기능 구현

39d7503

[feat] 검색 기능 구현

3df89f1

[feat] 검색 기능 구현

Update Header.tsx

5f89f22

Update NavBar.tsx

3f4c744

Update page.tsx

826b836

[style] 메인 이미지 디테일 수정

a79e43d

[feat] NavBar pathname 따라 움직이는 로직 추가

5c1d349

[refactor] deploy 위한 시도

8d3cf17

[fix] deploy 위한 오류 수정

69a9e71

[fix]deploy 위한 수정 2

73e1269

Merge pull request #18 from team-gotcha/feature/11_detailCheck

05ea54d

Feature/11 detail check

[fix] deploy 위한 수정 3

d70af5d

rmdnps10 reviewed Nov 18, 2023

View reviewed changes

[chore]주석제거

1256228

wokbjso reviewed Nov 18, 2023

View reviewed changes

geeoneee reviewed Nov 19, 2023

View reviewed changes

kyuhho reviewed Nov 19, 2023

View reviewed changes

Conversation

silverain02 commented Nov 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

배포링크

Key Question

후기

Uh oh!

rmdnps10 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wokbjso left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

geeoneee left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kyuhho left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

silverain02 commented Nov 17, 2023 •

edited

Loading