[6주차] 로컬무드팀 미션 제출합니다. #13

geeoneee · 2023-11-17T10:44:05Z

🔍 서론

안녕하세요 로컬무드팀 김현민 김지원입니다~ 👀
저희는 이번 과제 추가 기능으로 검색 페이지 무한스크롤, 검색 페이지 스켈레톤 컴포넌트 구현해보았습니다:)
열심히 했으니 잘 봐주세용:) 😊😊😊

🔍 배포링크

https://next-netflix-18th-woad.vercel.app/

🔍 Key Features

결과화면의 상세 페이지와 검색 페이지
상세 페이지 : 동적 라우팅으로 구현
검색 페이지 : 실시간 키워드 검색, 무한 스크롤, 스켈레톤 컴포넌트
Figma의 디자인 그대로 구현
SSR 적용
반응형 고려

🔍 KEY QUESTIONS

1. 정적 라우팅(Static Routing)/동적 라우팅(Dynamic Routing)이란?

Next.js는 파일 시스템 기반 정적 라우팅과 동적라우팅을 지원합니다.

정적 라우팅
-> 직접 경로를 설정

동적 라우팅
-> 한번 경로를 설정하면 라우팅 프로토콜을 통해 알아서 계산되어 경로가 설정.
-> 예를 들어, 보여줄 화면이 너무 많아 버리게 되면 각각의 상품에 따라 페이지를 만들어 정적라우팅을 해주기는 어렵기 때문에 효과적으로 처리하기 위해서 동적 라우팅 을 사용합니다.
-> 동일한 UI를 보여주면서, 이미지 경로나 제목만 바뀌게 할 수 있습니다.

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

Next jsImage 컴포넌트 활용

이미지 최적화를 통한 성능 개선

데이터 fetch 시 적절한 캐싱처리
ssr 과 서버컴포넌트, 클라이언트 컴포넌트의 분리를 통한 사용자 경험 개선

Feat: Header 작성

Feat:Footer 작성

Feat:랜딩 페이지 구현

슬라이더 컴포넌트 추가

Feature/searchpage

Feature/skeleton

Feat:실시간 검색으로 변경

Feat:스켈레톤 애니메이션 추가

Refactor:useInfiniteScroll 함수 통합

oooppq

한주동안 수고하셨습니다~~ 정말 다양한 라이브러리를 사용하여 기능을 구현해주신 것 같아요! 저도 사용해보지 않은 기능들을 많이 보게 됐는데, 잘 배워서 나중에 사용해볼게요~~

oooppq · 2023-11-18T09:40:52Z

app/main/components/Slider/CustomSlider.tsx

+import { twMerge } from "tailwind-merge";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import Slider from "react-slick";


react-slick 라이브러리르 사용하셨네용 저도 다른 프로젝트 할 때 썼었는데 간단하게 슬라이더 만들기 편리한 라이브러리인 것 같아요~~

oooppq · 2023-11-18T09:45:38Z

app/main/components/Slider/CustomSlider.tsx

+          slidesToScroll: 1,
+        };
+  return (
+    <div className={twMerge("bg-background-main", className)}>


tailwind에서 이런 기능도 제공하는군요 담에 써봐야겠어요!

oooppq · 2023-11-18T09:47:33Z

app/main/components/Slider/CustomSlider.tsx

+                placeholder="blur"
+                blurDataURL="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVR42mN8//HLfwYiAOOoQvoqBABbWyZJf74GZgAAAABJRU5ErkJggg=="


blur로 속성 지정하고 원하는 이미지를 보여주는 방식으로 구현한 것 같네여 Image 컴포넌트를 잘 활용하신 것 같습니다~~

oooppq · 2023-11-18T09:48:33Z

app/main/page.tsx

+        data={await getMovies(sliderInfo[0].url)}
+      />
+      <PlayBar />
+      {sliderInfo.map(async (slider, index) => (


아예 각각의 슬라이더 정보를 배열로 만들어서 map함수로 간단하게 표현한 부분 좋은 것 같습니다~~

oooppq · 2023-11-18T09:51:33Z

app/search/components/MovieList.tsx

@@ -0,0 +1,45 @@
+import { BiPlayCircle } from "react-icons/bi";
+import InfiniteScroll from "react-infinite-scroller";


아예 무한스크롤 기능을 제공하는 라이브러리를 사용하셨네요! 저는 react-intersection-observer을 사용해서 간단하게 구현했는데, 사용하신 라이브러리가 개발할 때에는 훨씬 편할 것 같아요! 제가 사용한건 직접 기능을 구현해줘야하긴 하거든요..

oooppq · 2023-11-18T09:55:30Z

app/search/page.tsx

+      <Suspense fallback={<SearchMovieSkeletonList />}>
+        <MovieList searchText={searchText} />
+      </Suspense>


Suspense 기능을 이용해서 로딩중일 때에는 skeleton component가 표현되도록 구현하셨네요! 저도 suspense를 이용하려다가 검색어 입력에 따른 검색결과 출력 과정에서의 로딩의 skeleton을 표현하기엔 한계가 있는 것 같아서 사용하지 않게 되었습니다.. 페이지를 전환할 때에 suspense를 적극적으로 사용한다면 ux적으로 견고한 웹을 만들 수 있을 것 같아요!

silverain02

이번 주도 고생하셨습니다~! ssr로 데이터 불러오는 방식 많이 배워가요!!

silverain02 · 2023-11-19T03:48:39Z

app/detail/[id]/queries/getMovieDetail.tsx

+  const apiKey =
+    "eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIzZDJjYWU5NGI2Yzk1MWNiY2EyMmVjMTc5Y2JmZDM3ZSIsInN1YiI6IjYzZDhiNDYzM2RjMzEzMDA4MjMyZTkyMSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.fMlQjoW-zgChmdjBWD4oB0mHbaJ4fRjmXL8XAGougHY";


axios instance생성하셨을 때 처럼 API key는 env파일로 빼는 것도 좋을 것 같아요!

silverain02 · 2023-11-19T03:51:41Z

app/detail/[id]/queries/getMovieDetail.tsx

+  const headers = {
+    Authorization: `Bearer ${apiKey}`,
+  };
+
+  const res = await fetch(url, { headers });
+  const data = await res.json();


요기서 생성해둔 axios instance를 활용하지 않고 fetch를 쓴 이유가 있을까요?!

저도 궁금합니다! next 13으로 오면서 getServersideProps 대신 fetch 방식으로 불러오면 데이터 fetching을 자동적으로 해준다고 해서 사용해보려고 했다가... 데이터가 undefined로 넘어오더라구요ㅜ 해당 부분 염두에 두시고 fetch로 사용하신 것일까요? 그렇다면 저희 코드에도 반영해보고 싶습니다..😅

silverain02 · 2023-11-19T03:52:46Z

app/detail/[id]/page.tsx

+        <Image
+          alt="영화 이미지"
+          src={getMoviePoster(movieInfo.poster_path)}
+          sizes="100vw"
+          fill={true}
+          placeholder="blur"


Next Image활용하셨군요! 저희는 쓰다가 size설정이 안되는 오류때문에 그냥 img태그를 썼는데 참고해갑니다~!

width, height 에 매몰되어 있었는데... sizes 설정도 할 수 있었군요🥲 참고하겠습니다!!!

silverain02 · 2023-11-19T03:54:49Z

app/main/components/Slider/CustomSlider.tsx

+        </div>
+      )}
+      <Slider {...settings}>
+        {data.map((movie) => (


slider 이미지들 map처리하니까 코드 가독성이 높아진 것 같아요!

silverain02 · 2023-11-19T03:56:27Z

app/main/page.tsx

+      <Header />
+      <CustomSlider<getMainSliderMovieResponse>
+        type="big"
+        data={await getMovies(sliderInfo[0].url)}


async-await으로 server-side component에서 데이터 불러오는 방식 좋은 것 같아요!

mod-siw

이번 주차 과제도 수고 많으셨습니다!!
저도 이번에 처음 tailwind CSS를 사용해봤는데, 코드 리뷰하면서 tailwind를 어떻게 하면 보다 잘 사용할 수 있는지 많이 배웠어요. 몰랐던 속성들도 많이 배워가고, 무한 스크롤 관련해서도 보면서 많이 익혀갑니다!😄
스터디 시간에 뵈어요!

mod-siw · 2023-11-19T06:15:24Z

app/common/components/layout/Header.tsx

+      {HeaderState.map((state) => (
+        <a
+          key={state}
+          className="hover:text-button-main cursor-pointer transition duration-300 ease-in-out"


단순 cursor-pointer만 준 게 아니라 hover했을 때 색 변경 디테일 좋은 것 같습니다👍👍

mod-siw · 2023-11-19T06:19:22Z

app/common/components/layout/button/PlayButton.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import { ImPlay3 } from "react-icons/im";
+import { twMerge } from "tailwind-merge";


저번 주차 스터디에서 스타일 컴포넌트 단점과 비교하여 tailwind 장점으로 컴포넌트별 디테일 설정을 들어주셨었는데 이렇게 쓸 수 있었군요! twMerge를 몰랐었는데 덕분에 리뷰하면서 알아갑니다. 잘 활용하면 굉장히 효율적일 것 같아요😊😊 리뷰하며 예시 코드까지 함께 배워갑니다!

mod-siw · 2023-11-19T06:20:33Z

app/detail/[id]/page.tsx

+        <Image
+          alt="영화 이미지"
+          src={getMoviePoster(movieInfo.poster_path)}
+          sizes="100vw"
+          fill={true}
+          placeholder="blur"


width, height 에 매몰되어 있었는데... sizes 설정도 할 수 있었군요🥲 참고하겠습니다!!!

mod-siw · 2023-11-19T06:23:44Z

app/detail/[id]/queries/getMovieDetail.tsx

+  const headers = {
+    Authorization: `Bearer ${apiKey}`,
+  };
+
+  const res = await fetch(url, { headers });
+  const data = await res.json();


저도 궁금합니다! next 13으로 오면서 getServersideProps 대신 fetch 방식으로 불러오면 데이터 fetching을 자동적으로 해준다고 해서 사용해보려고 했다가... 데이터가 undefined로 넘어오더라구요ㅜ 해당 부분 염두에 두시고 fetch로 사용하신 것일까요? 그렇다면 저희 코드에도 반영해보고 싶습니다..😅

mod-siw · 2023-11-19T06:28:09Z

app/search/components/MovieList.tsx

+
+export default function MovieList({ searchText }: { searchText: string }) {
+  const { getByFarMovieData, hasNextPage, fetchNextPage } = useGetSearchMovies({
+    api: searchText === "" ? "/movie/now_playing" : "/search/movie",


아무것도 입력하지 않았을 때도 아이템 띄워주는 디테일 좋네요!!👍👍

mod-siw · 2023-11-19T06:32:19Z

app/search/components/SearchMovieSkeleton.tsx

@@ -0,0 +1,10 @@
+export default function SearchMovieSkeleton() {


스켈레톤 컴포넌트까지 구현하신 거 너무 좋은 것 같습니다...🥹 배포 페이지에서 애니메이션까지 같이 들어가는 거 보고 감탄했네요!!

mod-siw · 2023-11-19T06:33:37Z

app/search/components/SearchMovieSkeletonList.tsx

+export default function SearchMovieSkeletonList() {
+  return (
+    <ul
+      className="hide-scrollbar flex-1 overflow-y-scroll pt-[0.9rem]"


tailwind에서 스크롤 숨기는 설정이 자기 멋대로 된다 싶었더니... hide-scollbar로 입력하는 거였군요 저는 scollbar-hide로 입력하고 있었네요...^^ 안되는 이유가 있었군요....

mod-siw · 2023-11-19T06:35:35Z

app/search/components/SearchMovieSkeletonList.tsx

+  return (
+    <ul
+      className="hide-scrollbar flex-1 overflow-y-scroll pt-[0.9rem]"
+      style={{ scrollSnapType: "y proximity", scrollSnapAlign: "start" }}


scrollSnapType 이라는 속성도 있었네요!! 이렇게 따로 설정해줄 수 있는 속성이 있는 줄 몰랐었는데 덕분에 배워갑니다~~!!

mod-siw · 2023-11-19T06:39:29Z

app/search/page.tsx

+  };
+
+  return (
+    <div className="bg-background-main pt-[4.4rem]">


배포 페이지에서 결과가 없는 검색어를 입력하면 TopSearches 밑으로 흰색 배경이 떠서 배경 설정이 안되어있나 싶었는데 되어있네요..! 확인해보시고 height 등을 통해 배경색이 전체적으로 입혀질 수 있도록 해주셔도 좋을 것 같습니다!

mod-siw · 2023-11-19T06:40:29Z

app/search/queries/useGetSearchMovies.tsx

+  searchText?: string;
+  api: string;
+}) {
+  const { data, hasNextPage, fetchNextPage } = useInfiniteQuery({


무한 스크롤에서 useInfiniteQuery 사용하는 방법 배워갑니다👍👍

mod-siw · 2023-11-19T06:44:45Z

app/detail/[id]/page.tsx

+        <div className="font-main text-white mb-[2.4rem]">Previews</div>
+        <p className="text-white movie-detail-sub">{movieInfo.overview}</p>
+      </div>
+    </div>


상세 페이지에서도 footer 넣어주시면 좋을 것 같아요!

wokbjso and others added 30 commits November 6, 2023 20:36

Feat: Next + yarn-berry 초기세팅

9112c0e

Feat:Styled-components 설정와 기본 라우팅 설정

db4dc6f

Chore:미디어 쿼리 수정

bc56776

Feat:react-slick 이용한 슬라이더 레이아웃 생성

53240a5

Feat:슬라이더 responsive 설정

b83591b

Feat:css TailwindCSS 로 변경

804c881

Feat: Header 작성

3022e78

Feat:Footer 작성

b7feebf

Chore:page.tsx 복구

47c6d10

Chore:header 확인용 코드 수정

17b0717

Feat: 슬라이더 컴포넌트 레이아웃 tailwind 로 작업

70fede4

Style:로고 반응형으로 수정

b05d239

Style: Icon 반응형 수정

f1919ab

Chore:use client 수정

c7f966b

Chore:page.tsx 복구

6eb2975

Merge pull request #1 from CEOS-LocalMood-Front/feature/header

47650cf

Feat: Header 작성

Merge pull request #2 from CEOS-LocalMood-Front/feature/footer

8f5aecb

Feat:Footer 작성

Feat:영화 데이터 가져오는 함수 생성

581ca37

Feat:랜딩페이지 생성

eb4e955

Feat:3.5초후 화면 메인페이지로 전환

c6477f8

Feat:api url 변수로 정리

60e60cf

Merge pull request #3 from CEOS-LocalMood-Front/feature/landing

b6e0ff4

Feat:랜딩 페이지 구현

Merge branch 'main' into feature/slider

17cb2d3

Merge pull request #4 from CEOS-LocalMood-Front/feature/slider

b17a966

슬라이더 컴포넌트 추가

Feature:PlayBar 구현

b8fa2c1

Style: Header, Footer 수정

09fef4b

Feat: MainImage 컴포넌트

8ecf25b

Style:MainImage Gradient 효과

6b44ec0

Style:Header Fixed 수정

2b1a4cd

Style:넷플릭스 로고 변경

f70f694

wokbjso and others added 25 commits November 16, 2023 00:39

Feat:Suspense 로 fallback 에 skeleton 지정

893123c

Feat:Suspense 로 fallback 에 skeleton 지정

cffc61d

Feat:Image 태그 blur 설정

2a3ed64

Search page 인자 개수 오류

fd688e5

Chore:테스트

889b925

Feat:SearchPage 검색 기능 구현

195a2b1

Feat:포스터 이미지가 없는 영화의 경우 넷플릭스 로고 띄우기

3774138

Feat:포스터 이미지가 없는 영화의 경우 넷플릭스 로고 띄우기(MovieList)

bf18707

Style:영화 제목 길이에 따른 버튼 크기 변동 오류 수정

178186d

Chore:useGetSearchMovies 타입 지정

3a7202e

Feat:검색 페이지와 Detail 페이지 연결

02e9a6a

Feat:검색 페이지와 Detail Page 연결

01a540e

Merge pull request #3 from CEOS-LocalMood-Front/feature/searchpage

230324f

Feature/searchpage

Merge branch 'test' into feature/skeleton

7a1de87

Merge pull request #4 from CEOS-LocalMood-Front/feature/skeleton

3b6f025

Feature/skeleton

Chore:충돌 해결

017648f

Chore:충돌 해결

cbc0304

Feat:detail 페이지 next/image 로 변경

3c45a4b

Feat:실시간 검색으로 변경

63e204a

Merge pull request #5 from CEOS-LocalMood-Front/feature/searchpage

c4b0f28

Feat:실시간 검색으로 변경

Feat:스켈레톤 애니메이션 추가

c8178bd

Merge pull request #6 from CEOS-LocalMood-Front/feature/skeleton

9da5dc1

Feat:스켈레톤 애니메이션 추가

Refactor:useInfiniteScroll 함수 통합

dd73ce8

Merge branch 'test' into refactor/infinitescroll

ee42906

Merge pull request #7 from CEOS-LocalMood-Front/refactor/infinitescroll

3c50c4f

Refactor:useInfiniteScroll 함수 통합

oooppq reviewed Nov 18, 2023

View reviewed changes

Feat:stale time 지정

19f67a6

silverain02 reviewed Nov 19, 2023

View reviewed changes

mod-siw reviewed Nov 19, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[6주차] 로컬무드팀 미션 제출합니다. #13

[6주차] 로컬무드팀 미션 제출합니다. #13

geeoneee commented Nov 17, 2023

oooppq left a comment

oooppq Nov 18, 2023

oooppq Nov 18, 2023

oooppq Nov 18, 2023

oooppq Nov 18, 2023

oooppq Nov 18, 2023

oooppq Nov 18, 2023

silverain02 left a comment

silverain02 Nov 19, 2023

silverain02 Nov 19, 2023

mod-siw Nov 19, 2023

silverain02 Nov 19, 2023

mod-siw Nov 19, 2023

silverain02 Nov 19, 2023

silverain02 Nov 19, 2023

mod-siw left a comment

mod-siw Nov 19, 2023

mod-siw Nov 19, 2023

mod-siw Nov 19, 2023

mod-siw Nov 19, 2023

mod-siw Nov 19, 2023

mod-siw Nov 19, 2023

mod-siw Nov 19, 2023

mod-siw Nov 19, 2023

mod-siw Nov 19, 2023

mod-siw Nov 19, 2023

mod-siw Nov 19, 2023

		placeholder="blur"
		blurDataURL="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVR42mN8//HLfwYiAOOoQvoqBABbWyZJf74GZgAAAABJRU5ErkJggg=="

		@@ -0,0 +1,45 @@
		import { BiPlayCircle } from "react-icons/bi";
		import InfiniteScroll from "react-infinite-scroller";

		const apiKey =
		"eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIzZDJjYWU5NGI2Yzk1MWNiY2EyMmVjMTc5Y2JmZDM3ZSIsInN1YiI6IjYzZDhiNDYzM2RjMzEzMDA4MjMyZTkyMSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.fMlQjoW-zgChmdjBWD4oB0mHbaJ4fRjmXL8XAGougHY";

		@@ -0,0 +1,10 @@
		export default function SearchMovieSkeleton() {

[6주차] 로컬무드팀 미션 제출합니다. #13

Are you sure you want to change the base?

[6주차] 로컬무드팀 미션 제출합니다. #13

Conversation

geeoneee commented Nov 17, 2023

🔍 서론

🔍 배포링크

🔍 Key Features

🔍 KEY QUESTIONS

1. 정적 라우팅(Static Routing)/동적 라우팅(Dynamic Routing)이란?

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

oooppq left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

silverain02 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mod-siw left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment