[6주차] Hooking 미션 제출합니다. #13
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
refactor: removing non-using props
Feature/genre list
Feature/landing page
Feature/header
Feature/control panel
feat: api_connection wwith img datas
merge for publishing
Fix/main content
[refactor]: index.js에 ISR적용 (24시간)
…-netflix-17th into feature/search
Feature/search
Test/ssr test
Feature/search
sujinRo
reviewed
May 21, 2023
| {visible && ( | ||
| <> | ||
| {/* Image보다 LazyLoadImage가 체감 속도가 빨라서 일단 이걸로 썼음 */} | ||
| <LazyLoadImage |
There was a problem hiding this comment.
옹,,, next/Image를 사용했는데, LazyLoadImage도 있군요,, 배워갑니다!!
| @@ -1,6 +1,7 @@ | |||
| import { atom } from "recoil"; | |||
| import { v1 } from "uuid"; | |||
This comment was marked as spam.
This comment was marked as spam.
Sorry, something went wrong.
paya17
reviewed
May 21, 2023
There was a problem hiding this comment.
혹시 api폴더를 pages폴더 안에 넣으신 이유가 있나요? api폴더와 pages폴더를 따로 분리하는 게 좋을 것 같아요!
Comment on lines
+39
to
+56
| .pc-tablet-only { | ||
| display: block; | ||
| ${media.mobile} { | ||
| display: none; | ||
| } | ||
| } | ||
| .tablet-mobile-only{ | ||
| display: none; | ||
| ${media.tablet}{ | ||
| display:block; | ||
| } | ||
| } | ||
| .mobile-only { | ||
| display: none; | ||
| ${media.mobile} { | ||
| display: block; | ||
| } | ||
| } |
Comment on lines
+1
to
+11
| import { useState } from "react"; | ||
|
|
||
| export const useInput = (defaultValue) => { | ||
| const [value, setValue] = useState(defaultValue); | ||
|
|
||
| const onChange = (e) => { | ||
| setValue(e.target.value); | ||
| }; | ||
|
|
||
| return { value, setValue, onChange }; | ||
| }; |
| export const MovieDataTitle = styled.div` | ||
| font-size: 1.5rem; | ||
| font-weight: 700; | ||
| ${(props) => (props.adult ? '&:after { content: " 🔞"; }' : "")} |
There was a problem hiding this comment.
이 파일의 코드에 대한 코멘트는 아닌데,, components폴더와 hooks폴더를 src폴더 안에 넣지 않고 밖으로 따로 빼신 이유가 있으신가요??
Comment on lines
+12
to
+33
| // getServerSideProps) 외부 api 주소로 요청 | ||
| export const getPrefetchNowPlaying = async ({ pageParam = 1 }) => { | ||
| const { data } = await axios.get( | ||
| // `http://api.themoviedb.org/3/movie/now_playing?page=${pageParam}&api_key=${process.env.NEXT_PUBLIC_MOVIE_API}` | ||
| `/api/movie/now_playing/${pageParam}` | ||
| ); | ||
| return data; | ||
| }; | ||
|
|
||
| // getServerSideProps) 외부 api 주소로 요청 | ||
| export const getPrefetchSearchMovie = async (query = "test") => { | ||
| const { data } = await axios.get( | ||
| `http://api.themoviedb.org/3/search/movie?api_key=${process.env.NEXT_PUBLIC_MOVIE_API}&query=${query}` | ||
| ); | ||
| return data; | ||
| }; | ||
|
|
||
| export const getNowPlayingWithPage = async (page = { pageParam: 1 }) => { | ||
| const { data } = await fetch(`api/movie/now_playing/:${page}`); | ||
| //const { data } = await movieAxios.get(`now_playing?page=${page.pageParam}`); | ||
| return data; | ||
| }; |
There was a problem hiding this comment.
이 부분들은 movieAxios를 쓰지 않은 이유가 따로 있으신가요??
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
6주차 미션: Next-Netflix
서론
🪝 Who King? Hooking!
미션
미션 목표
기한
필수 요건
선택 사항
Key Question
정적 라우팅(Static Routing)/동적 라우팅(Dynamic Routing)이란?
src/pages/하위의 폴더에 폴더명이 라우팅 경로가 됩니다./foo/1,/foo/2...의 주소가 파일으로 매핑됨/foo/1,/foo/name/1,/foo/name/test/1...의 주소가 파일으로 매핑됨/foo/1,/foo/name/1,/foo/name/test/1, ... ,/foo까지 해당 파일으로 매핑됨.성능 최적화를 위해 사용한 방법
search.js에서 페이지에 처음 접속했을 때 react-query 함수를 페이지가 렌더링 되기 전에 미리 만들고, 필요한 데이터를 fetch 해오기 위해 사용하였습니다./search에 접속할 때 마다 실행됩니다.index.js에서 렌더링할 데이터들을 빌드 시 미리 받아놓기 위해 사용하였습니다.getStaticProps를 사용하였으며, return 안에revalidate값을 24시간으로 넣어주었습니다. 처음 빌드 시 api로부터 미리 데이터들을 fetch하여 json파일을 만들어 놓은 후, 24시간 안의 요청들은 해당 json으로 대체합니다. 24시간 이후의 요청이 들어오면 다시 api를 호출하여 데이터를 fetch하여 json을 update합니다.[id].js에서 동적 라우팅을 할 때 필요한 경로들을getStaticPaths를 통해 fetch한 후, 이를getStaticProps에 props로 넘겨줍니다.getStaticProps에서는 해당 주소들에 요청을 한 후, 필요한 data들을 미리 fetch하여 빌드시에 json으로 생성 후, 해당 페이지에 props로 넘겨줍니다.getStaticPaths의 return에서fallback값을true로 넣어주어서 paths에 없는 요청이 들어오면fallback컴포넌트를 먼저 렌더링 한 후, SSR방식으로 데이터 fetching이 완료되면 데이터가 포함된 컴포넌트를 렌더링 해줍니다.search.js와movieData.js에서 Data의 fetching상태에 따라 Skeleton UI를 렌더링하거나, 데이터가 포함된 컴포넌트를 렌더링하도록 하였습니다.배포링크
Hooking_Netflix