[6주차]레시피지 과제 제출합니다 #15

AlmondBreez3 · 2022-11-18T13:53:59Z

안녕하세요 여러분
이번에 저희는 상세페이지, 검색기능 말고도 추가 기능을 조금 구현해보았어요

무한스크롤(comming soon에다가 구현해 놓았습니다 ㅎㅎ...)
헤더에 나타난 'tv shows', 'movies,'my list'를 클릭하면 해당 페이지로 가서 영화 목록들이 나오는 기능, 넷플릭스 로고 누르면 새로고침이 되는 기능
home에서 play를 누르면 유투브 링크로 연결!
검색페이지에서 각 영화를 누르면 상세페이지를 가는게 아니라 열고 닫을 수 있는 모달 기능(모달 안에도 상세 내용 구현)
더보기에 넷플릭스 이용약관, 고객센터 등이 띄워지는 것
(반응형으로 보시면 더 정돈 된 느낌을 받으실 거에용 ㅎㅎ..)

베포링크:
https://next-netflix-16th-second.vercel.app

KEY QUESTIONS
1.
정적라우팅은 직접 경로를 일일히 설정을 해주는 것이고 동적라우팅은 한번 페이지에 따로 설정을 해주면 라우팅 프로토콜을 통해 알아서 계산되어 경로가 정해진다.
이 프로젝트의 정적 라우팅은 pagees폴더 안에다가 js파일을 넣어주면 됬다.
동적라우팅은 마찬가지로 pages폴더 안에 js파일을 넣어주면 되는데, 이름에 []를 해주고 생성해야한다.
2.
Header.js 부분에 대한 렌더링 최적화를 실행 하였습니다. react.memo를 사용해서 무한 스크롤이나 계속해서 렌더링 되는 값이 있을때 리렌더링되는 것을 방지했습니다.

개인적인 느낀점인데...저는 윈도우 쓰고 현영이는 맥북쓰는데 뭔가 다른 부분이 계속 나와서 협업할 때 어려움이 있었습니다 흑흑....이번에도 next한테 괴롭힘 받고 끝난 느낌이지만 이것저것 많이 구현해보아서 나름 뿌듯합니다~!

…mo-o3

ch9eri

안녕하세요 코드리뷰 파트너 teample의 임채리입니다.
실제 넷플릭스앱처럼 필요한 기능을 대부분 구현하셨네요!! 너무 멋집니다 ...
특히 무한스크롤은 구현하지 못했는데 레시피지팀 코드리뷰를 하며 흐름을 알아갑니다 ...🤩

ch9eri · 2022-11-20T06:06:12Z

nextjs-intro/pages/search.js

-      <SearchForm>
+      <SearchForm >
      <SmallImg src='/searchglass.png'></SmallImg> 
      <Search value={search} onChange={handleChange} placeholder={"Search for movie"}></Search>


useInput에서 handleChange함수를 만들어 이렇게 사용하셧군요 ... 커스텀훅을 쓰니 확실히 코드를 읽기 좋네욤 ... !

ch9eri · 2022-11-20T06:08:59Z

nextjs-intro/pages/search.js

                </MovieCon>
              </div>
            ))}
+          {modalState && <MovieModal {...curMovie} setModalOpen={setModal} />}


모달창 구현까지 ... 예전에 한번 써봤을 때 좀 복잡했던 기억이 있는데 엄청 깔끔하게 구현하셨네요! 저도 다음에 적용해봐야겠어요 ... 확실히 모달창 있으니까 디테일 페이지에서 뒤로가기 수월하더라구요!! 배포링크 잘봤습니당

ch9eri · 2022-11-20T06:11:34Z

nextjs-intro/pages/search.js

-                  src={`https://image.tmdb.org/t/p/original/${movie.backdrop_path}`}
+                  src={
+                    movie.backdrop_path === null
+                      ? `/netflix2.png`


대체이미지로 넷플릭스 로고 ... 조으다 ... 왜 그 생각을 못했징

ch9eri · 2022-11-20T06:13:31Z

nextjs-intro/pages/videos/[...id].js

+export async function getServerSideProps({ params: { id } }) {
+  const data = await (
+    await fetch(
+      `https://api.themoviedb.org/3/movie/${id}?api_key=${API_KEY}&append_to_response=videos`


이거 보고 엄청 신기했는데 !!!! 이 api가 있었군요 ... 레시피지 팀은 정말 꼼꼼하게 많은 것을 구현하셨네요!

heeeesoo · 2022-11-20T07:50:15Z

nextjs-intro/pages/comming-soon.js

@@ -0,0 +1,102 @@
+import { useEffect } from 'react';


우와 무한 스크롤 기능 짱이네요!! 어떻게 구현할지 감이 잘 안왔는데 덕분에 잘 알아갑니당 useInView 훅도 처음 봤어요😤

무한스크롤 너무너무 존경합니다....🤍

heeeesoo · 2022-11-20T07:55:29Z

nextjs-intro/pages/search.js

+                <MovieImg
+                  src={
+                    movie.backdrop_path === null
+                      ? `/netflix2.png`


오 그냥 엑박 안 뜨게 하고 넷플릭스 이미지로 대체한거 너무 좋네요...!!

YooSeonHo

안녕하세요 팀플 유선호입니다~
특이한 기능을 많이 구현하셔서 보는 재미가 있었습니당
되게 비슷한 듯 다른 점이 많았던 것 같네요 나중에 같이 지식 공유하면 재미있을 거 같아요 ㅎ

YooSeonHo · 2022-11-20T08:44:29Z

nextjs-intro/pages/search.js

 export default function search({TopRated}) {
-const {search,handleChange,resetChat } = useInput("");
-//const [searches, setSearchResults] =useState([]);
+const {search,handleChange,resetChat ,searches} = useInput("");


구조 분해 할당 정말 어려운데 잘 쓰시는 거 같아서 부럽습니다~! 한 수 가르쳐 주세용

YooSeonHo · 2022-11-20T08:47:33Z

nextjs-intro/pages/search.js


+  //searchsms 한단어부터 시작 이걸 async로 넘겨줘서 query값으로 가져오기
+  const data = TopRated.results;
+  if (newData === undefined) {


코드 읽다가 undefined면 어떻게 처리하지? 궁금했는데 맨 위에 올라와보니 아예 if를 쓰고 안에 리턴을 쓰셨네요 저희랑 방법이 달라서 되게 새롭습니당 ㅎㅎㅎ

YooSeonHo · 2022-11-20T08:52:24Z

nextjs-intro/pages/movies/[...params].js

-  return { props: { params } };
+const API_KEY = process.env.API_KEY;
+
+export async function getServerSideProps({ params: { params } }) {


페이지 이름을 이렇게 써도 되는군요! 찾아보니 모든 route를 잡을 떄 쓰는 방법이군요!!!! 넥제 배울 점이 정말 많은 것 같습니돠

seondal

스터디 과제로 냅다 완성형 넷플릭스를 만들어버리신... 다양하고 완성도 높은 기능들 구현하는 모습들을 코드로 볼 수 있어서 영광이였습니다 ! 코드리뷰하면서 강한 동기부여들 얻어갑니다 😆

seondal · 2022-11-20T10:34:19Z

nextjs-intro/components/Header.js

+    <HeaderWrapper>
+      <Link href={'/home'}>
+        <BannerImg src={`/netflix.png`}></BannerImg>
+      </Link>
+      <Link href={'/tv-shows'}>
+        <BannerTag>TV Shows</BannerTag>
+      </Link>
+      <Link href={'/movies'}>
+        <BannerTag>Movies</BannerTag>
+      </Link>
+      <Link href={'/my-list'}>
+        <BannerTag>My List</BannerTag>
+      </Link>
+    </HeaderWrapper>
+  );


헤더 버튼을 눌렀을때의 기능..! 저도 구현해보고싶다고 생각만 했었는데 직접 실천에 옮기신 분이 계셨더니.. 존경합니다

seondal · 2022-11-20T10:34:54Z

nextjs-intro/components/Header.js

+  width: 2.5rem;
+`;
+
+export default React.memo(Header);


React.memo !! 말로만 들었는데 사용되는 모습 보고 배워갑니다 !

seondal · 2022-11-20T10:39:57Z

nextjs-intro/components/Modal.js

+const Modal = styled.div`
+  position: relative;
+  max-width: 500px;
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
+  background: #111;
+  overflow: hidden;
+  border-radius: 8px;
+  transition: all 400ms ease-in-out 2s;
+  animation: fadeIn 400ms;
+  ::-webkit-scrollbar {
+    display: none;
+    visibility: hidden;
+  }
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none;


모달기능..! 최근 웹페이지에 정말 자주 사용되는 기능인데 구현할 엄두를 못냈었어요... 레시피지팀의 멋진 모달을 보며.. 배워갑니다 ㅎㅎ

seondal · 2022-11-20T10:43:13Z

nextjs-intro/components/MyHead.js

+export default function MyHead({ title }) {
+  return (
+    <Head>
+      <title>{title} | Next Movies</title>


헤드 이름도 변경하게 한 부분.. 디테일 너무 잘 살려주신 것 같아요 ㅎㅎ

seondal · 2022-11-20T10:44:32Z

nextjs-intro/components/NavBar.js

+        </Link>
+        <Link href="/downloads">
+          <NavItem current={router.pathname === '/downloads'}>
+            <FontAwesomeIcon icon={faArrowDown} size={'1x'} />


size 값이 1x 로 반복되는데 기본값으로 설정하는 것도 나쁘지 않을 것 같습니다 !

seondal · 2022-11-20T10:45:17Z

nextjs-intro/pages/comming-soon.js

@@ -0,0 +1,102 @@
+import { useEffect } from 'react';


무한스크롤 너무너무 존경합니다....🤍

hamo-o and others added 30 commits November 8, 2022 13:00

build: NextJs 설치

a58b97c

1.2 SPR

6c2d57f

1.3 Routing

24dfc1a

1.4 CSS Modules

8982f1f

1.5 Styles JSX

efbf220

1.6 Custom App

735f087

2.0 Pattern

c775be8

2.1 Fetch API

f1fdd7d

2.2 Redirect and Rewrite

3d6b5dd

feat: add navbar

3764624

design: change home UI

6f09c84

design: change home UI display style

d3a3261

feat:unify api

8b09dea

feat:랜딩페이지

40962b0

feat:design unify 1

e390301

feat:일단 고쳐본

d847955

design: change banner UI

59fa31f

design: change home UI

568e0ba

design: change index UI

a43501a

design: change Layout, NavBar, home, index UI

7421e27

css:icon추가

2cea3a2

fix: API_KEY 숨기기

e4b1457

design: change img align

3802eae

design: add banner text

877553f

feat:랜딩페이지 구현

9bd8e16

Merge branch 'main' of https://github.com/AlmondHam/next-netflix-16th

c33b39a

feat:합치기

079149b

Merge branch 'main' of github.com:AlmondHam/next-netflix-16th into ha…

5d131a8

…mo-o3

fix:랜딩페이지 오류

7576a03

검색기능 +css

8e87385

AlmondBreez3 and others added 23 commits November 15, 2022 17:43

fix:검색 딜레이

5971bde

feat:footer내용 morepage에 추가

509918c

옮기기

a53bfb4

feat:모달창 구현

185fa5b

feat: add detail page

48562d6

feat: fetch detail api

016f64e

feat: detail 전부 Link 걸기

e1f308c

feat: add header Link

7a20431

fix:api_key숨기기

734aebd

Merge branch 'hamo-o5' into AlmondB-03

f9f94b7

refactor: search 중복 삭제

32f8cca

fix:404에러 고치기

5c161ae

fix: searh input값 없을 때 오류 해결

4145589

feat: add youtube 예고편

608ec8b

fix: navBar jsx 수정

22d56b1

refactor: header component 분리, css 오류 해결중

d503b29

feat: add tvShows page

3d3a3a5

build: 무한스크롤에 필요한 모듈 설치

9984f82

feat: 무한스크롤 구현중

43277a2

feat: 무한스크롤 구현중

a8e42d0

feat: 무한스크롤 구현중

20e0f15

feat: 무한스크롤 구현중

1194164

fix: 무한스크롤 기능 수정

bb2b79d

AlmondBreez3 changed the title ~~레시피지 6주차 과제 제출합니다~~ [6주차]레시피지 과제 제출합니다 Nov 18, 2022

add img in comming-soon page && add Header

6d558f1

ch9eri reviewed Nov 20, 2022

View reviewed changes

heeeesoo reviewed Nov 20, 2022

View reviewed changes

YooSeonHo reviewed Nov 20, 2022

View reviewed changes

seondal reviewed Nov 20, 2022

View reviewed changes

[6주차]레시피지 과제 제출합니다 #15

Are you sure you want to change the base?

[6주차]레시피지 과제 제출합니다 #15

Uh oh!

Conversation

AlmondBreez3 commented Nov 18, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ch9eri 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!

YooSeonHo 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!

YooSeonHo Nov 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

seondal 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

AlmondBreez3 commented Nov 18, 2022 •

edited

Loading

YooSeonHo Nov 20, 2022 •

edited

Loading