[6주차] Pre:folio 미션 제출합니다. #16
Conversation
Feature/skeleton component 추가
Feature/컨플릭트 해결 후 머지
Fix/Mixed content 해결
feat/무한스크롤 기능 도입 시작
Feature/검색 + 무한 스크롤
Fix/검색어 변경 시 재렌더링
Feature/검색 시 스켈레톤 이미지 적용
Fix/존재하지 않는 페이지 라우팅 되는 현상 수정
Fix/initialData에 스켈레톤 로딩 시 스켈레톤 이미지 삽입 및 안쓰는 import 삭제
| @@ -0,0 +1,64 @@ | |||
| import { useInfiniteQuery } from '@tanstack/react-query'; | |||
| import client from '../../api/client'; | |||
| const API_KEY = process.env.NEXT_PUBLIC_TMDB_API_KEY; | |||
There was a problem hiding this comment.
다른 분들 코드에도 종종 process.env.NEXT_PUBLIC_TMDB_API_KEY 가 보이던데 이게 어떤 의미인지...
궁금합니당 구글링해도 별 게 안 나오네요 ㅜ
There was a problem hiding this comment.
.env 파일에 NEXT_PUBLIC_TMDB_API_KEY="고유 api key"를 써 준 뒤에 .gitignore에 .env 파일을 추가해서 저장소에 업로드 되지 않도록 숨긴 뒤 api key가 필요할 때는 저렇게 사용하는 거예요! 참고 링크 남기고 갑니당... 😸
참고 링크
|
|
||
| export const searchMovies = (inputWord: string, page?: number) => { | ||
| return client.get(`search/movie/?api_key=${API_KEY}&query=${inputWord}&page=${page}`); | ||
| }; |
There was a problem hiding this comment.
요렇게 깔끔하게 api들 정리해놓은거 너무 좋아요!! 깔끔 is best
| return { | ||
| board_page: res.data.results, | ||
| current_page: pageParam, | ||
| isLast: res.data.total_pages === pageParam, //미쳤다. |
There was a problem hiding this comment.
전설의 시작... 무한스크롤 쩌네요...
현재 페이지가 Last가 아니면 계속 nextPage Params를 가져오는건가요????
이번 발표가 기대되네요:)
There was a problem hiding this comment.
네 맞아요!! 영준님 발표 기대하세요 히히
|
|
||
| const SearchList = () => { | ||
| const [searchWord, setSearchWord] = useRecoilState(searchWordState); | ||
| const debouncedSearchWord = useDebounce(searchWord, 500); |
There was a problem hiding this comment.
옹 디바운스까지!! 확실히 무한스크롤을 구현하려면 디바운스가 필수겠네요:)
기준을 0.5초로 잡은 이유가 있을까요?????
There was a problem hiding this comment.
이전에 useDebounce 훅 만들어 둔 것을 가져왔는데 1초는 사용자가 이용할 때 검색이 지연된다고 느낄 것 같아서 0.5초로 했어욥!!
chaeyeonan
left a comment
chaeyeonan
left a comment
There was a problem hiding this comment.
안녕하세요 포겟미낫 안채연입니다 ~~
정말 저랑 같은 과제를 한게 맞는지.. 코드를 보는 내내 감탄과 놀라움을 금치 못했네요
스켈레톤, 무한스크롤, 리액트쿼리까지 엄청나게 많은걸 하셨군요 !!!!!!!!! 대단해요 ........
이번주 발표가 너무 기대돼요 !!!!! 얼른 듣고싶네요 ..
너무 수고하셨어요~~!
| ); | ||
| }; | ||
|
|
||
| export default React.memo(SearchItem); |
There was a problem hiding this comment.
React memo 어떻게 사용하는건지 잘 몰랐는데 이렇게 사용하는거군요! 알아갑니다~ 👍 👍
| href={{ | ||
| pathname: `/home/${props.id}`, | ||
| query: { | ||
| title: props.original_title, |
| setSelectedIcon(pageName); | ||
| }, []); | ||
|
|
||
| const { isLoading: nowPlayingLoading, data: nowPlayingData } = useQuery(['now-playing'], getNowPlaying); |
There was a problem hiding this comment.
헉 react-query 사용까지... o0o 리액트 쿼리를 사용했을때 장점이나 사용 용도가 궁금한데 빨리 발표를 듣고싶네요
4 participants
안녕하세요 Pre:folio입니다!
무한 스크롤은 아직 반만... 완성돼서 무한스크롤을 적용하지 않은 버전으로 일단 배포해서 올립니다... 🥲
+) 프짱❤️💕🫶🏻님의 도움으로 무한스크롤까지 완성해서 새로우 버전으로 다시 링크 올렸습니다! 최고!!!!! 😻
✔️ 배포 링크
Key Question
정적라우팅은 직접 경로를 일일히 설정을 해주는 것이고, 동적라우팅은 한번 경로를 설정 해주면 라우팅 프로토콜을 통해 알아서 계산되어 경로가 정해진다.
next js 의 경우, 파일 시스템 기반의 라우팅을 통해 성능을 높힐 수 있다.
pages 컴포넌트 밑에 ts(또는 js) 파일을 만들어 파일명을 대괄호 안의 워딩으로 설정해주면, 프레임워크가 대괄호를 보고 동적으로 라우팅 된다는 것을 인식하게 된다.
대괄호 안에 지정된 이름은 router 객체의 query 속성으로 들어가기 때문에, url 파싱을 통해 손쉽게 대상의 고유성을 나타내는 id 등을 가져올 수 있다 !
사용자가 값을 입력할 때마다(한 단어마다) API를 호출하게 되면 낭비가 심해지기 때문에,, useDebounce 훅을 만들어서 0.5초에 한 번 api를 요청하도록 해 봤습니다!
그리고 React.memo로 SearchItem과 SkeletonItem을 감싸 주긴 했는데… 이게 여기서 효과가 있는진 모르겠네용,,