[6주차] 댄서포트(Dan-support) 미션 제출합니다. #15
Conversation
Landing페이지와 Home페이지 합침
yoojin3 to master
Home to master
feat: 랜덤 이미지 기능,스크롤시 헤더 스타일 변화 기능
design: Home페이지 애니메이션 추가
SearchPage to master
Feature/detail page
SearchPage to master
…flix-17th into feature/SearchPage
Feature/search page
| }, | ||
| }, | ||
| ); | ||
|
|
There was a problem hiding this comment.
댄서포트 팀도 useInifiniteQuery 활용하셨군요..! useInfiniteQuery를 다른 파일로 분리해서 작성하니깐 외려 더 깔끔한 것 같기도 하네요!!🙌
| </Hydrate> | ||
| ); | ||
| } | ||
| */ |
There was a problem hiding this comment.
허허 Nextjs 13 버전 사용한 팀을 드디어 만나네요..😂 고생많으셨습니다..
저희도 댄서포트 팀처럼 ssr 사용하려 했는데 오류가 나고 배포도 안되어서 지울 수 밖에 없었습니다ㅜㅠ
Nextjs 13의 경우 베타 버전이기 때문에 ssr이 적용되지 않은 경우가 많다고 하네요...! 참고자료 놓고 가겠습니다!
|
|
||
| const Content = styled.div` | ||
| display: flex; | ||
| flex-basis: 20%; |
There was a problem hiding this comment.
지난주 발표에서 언급하셨던 깔끔한 푸터의 비결..! 또 배워갑니다😎
| window.removeEventListener('scroll', handleScroll); | ||
| }; | ||
| }, []); | ||
|
|
There was a problem hiding this comment.
앗 헤더에 scroll 관련 내용이 왜 있었나 했는데 스크롤을 내리면 헤더 배경 색이 바뀌는 거였군요! 굿굿입니다👍
| `; | ||
|
|
||
| export default function DetailPage(){ | ||
| const params = useSearchParams(); |
There was a problem hiding this comment.
동적 라우팅된 파일에서 useSearchParams를 사용하면 client side에서 쉽게 라우팅된 파일의 주소를 알 수 있겠네요~!
| const Image = styled.img` | ||
| object-fit: cover; | ||
| height: 415px; | ||
| width: 375px; | ||
| position: relative; | ||
| `; |
There was a problem hiding this comment.
이부분은 Next/Image를 사용하면 렌더링 최적화에 도움이 조금이나마 되지않을까...싶어요
| {!searchText ? ( | ||
| <DafaultMovieList /> | ||
| ) : ( | ||
| <SearchMovieList searchText={searchText} /> | ||
| )} |
There was a problem hiding this comment.
searchText의 여부에 따라 다른 리스트를 보여주는것 좋은 것 같습니다!
SearchMovieList가 렌더링 될 때 페이지 내부에서는 defaultMovieList가 생성된 상태로 대기중이여서
searchText 전환에 따른 렌더링 속도에는 도움이 될 수도 있을 것 같아요!
| {pathname === item.link ? ( | ||
| <> | ||
| <Image | ||
| src={`/assets/Footer/selected${item.name}.svg`} | ||
| alt="item" | ||
| width={20} | ||
| height={20} | ||
| /> | ||
| <Text color="white">{item.text}</Text> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <Image | ||
| src={`/assets/Footer/${item.name}.svg`} | ||
| alt="item" | ||
| width={20} | ||
| height={20} | ||
| /> | ||
| <Text>{item.text}</Text> | ||
| </> | ||
| )} |
There was a problem hiding this comment.
여기는 return의 html코드를 삼항연산자를 통해 구현하는 것보다, pathname===item.link값을 Image의 props로 넘겨주고, styled-component상에서 삼항연산자를 통해 fill과 color을 통해 각각 svg와 text값에 색을 넣어주는것이 좀 더 깔끔할 것 같습니다...!
There was a problem hiding this comment.
저도 원래 그걸 도전했는데,,, 이상하게 색이 안 변하더라구요,,, 다시 도전해보겠슴당,,
| useEffect(() => { | ||
| const handleScroll = () => { | ||
| const currentPosition = window.pageYOffset; | ||
|
|
||
| if (currentPosition >= 100) { | ||
| setScroll(true); | ||
| } else { | ||
| setScroll(false); | ||
| } | ||
| }; | ||
|
|
||
| window.addEventListener('scroll', handleScroll); | ||
|
|
||
| return () => { | ||
| window.removeEventListener('scroll', handleScroll); | ||
| }; | ||
| }, []); |
There was a problem hiding this comment.
scroll이벤트 관련해서 이거랑 똑같이 적용해도 왜 저희팀 코드에서는 적용이 안됐을까요 ㅠㅠㅠㅠㅠ
| const { data, fetchNextPage, hasNextPage } = useInfiniteQuery( | ||
| ['page'], | ||
| ({ pageParam = 1 }) => getNowPlayingMovies(pageParam), | ||
| { | ||
| getNextPageParam: (lastPage, allPosts) => { | ||
| return lastPage.page !== allPosts[0].total_pages | ||
| ? lastPage.page + 1 | ||
| : undefined; | ||
| }, | ||
| }, | ||
| ); | ||
|
|
There was a problem hiding this comment.
useinfiniteQuery가 상당히 코드 깔끔하게 작성되네요 저도 한번 공부해봐야겠어요 ㅠㅠ
안녕하세요, 댄서포트 노수진, 신유진입니다~~! 😊😂
저희는 이번에 추가 기능으로 리액트 쿼리의 useInfiniteQuery와 react-infinte-scroller 라이브러리를 사용하여 무한 스크롤까지 구현하였습니다!
app directory로 하면서 어려움을 겪어,,, page directory로 안 한걸 후회했습니다,,,ㅜㅜ
열심히 했으니, 잘 봐주세요! 하하
해결하지 못한 부분
-리액트 쿼리를 이용하여 Next.js 13의 app 디렉토리 버전에서 SSR을 적용하는 방법을 찾아 구현하려고 했으나 아직 구현하지 못했습니다…. (app 디렉토리 버전에서는 getServerSideProps를 지원하지 않더라구여,,,,,,) 혹시 이런 방법으로 SSR 적용하신 분 있으신가요??
참고자료)
https://tanstack.com/query/v4/docs/react/guides/ssr](https://tanstack.com/query/v4/docs/react/guides/ssr
배포링크
6주차 배포링크!
Key Question
1) 정적 라우팅(Static Routing)/동적 라우팅(Dynamic Routing)이란?
라우팅이란 페이지 이동을 뜻합니다.
<정적 라우팅>
정적 라우팅은 고정된 페이지로 라우팅 하는 것으로, 누가 언제 접속하더라도 같은 페이지로 라우팅됩니다. 대표적인 예시로는 /login 페이지가 있습니다.
<동적 라우팅>
동적 라우팅은 가변적으로 라우팅하는 것으로, 실제 소스 코드는 한 페이지이지만, 글 번호, id에 따라 주소가 변경됩니다. 대표적인 예시로는 게시물의 상세보기 페이지가 있습니다.
Next.js에서 동적 라우팅 시, 대괄호 속 문구는 변수 기능을 합니다.
2) 성능 최적화를 위해 사용한 방법
'next.js에서 제공하는 next/Image를 이용해 Lazy loading'
이미지 영역이 화면에 보이지 않을 때는 이미지를 불러오지 않고, 화면에 보이게 되었을 때, 이미지를 불러오는 방식입니다.