[6주차] Team 포토그라운드 강다혜 & 이희원 미션 제출합니다. #12
Conversation
hiwon-lee
changed the title
| export default function DetailScreen({ | ||
| data, | ||
| }: { | ||
| data: { title: string; poster_path: string; overview: string }; |
There was a problem hiding this comment.
혹시 interface로 따로 type을 지정하지 않으신 이유가 있으신가용
There was a problem hiding this comment.
저도 궁금합니다! 자주 쓰일 수 있는 인터페이스라면 파일에 따로 정의해두고 꺼내써도 좋을 것 같아요~
| function shuffleArray(array: MovieProps[]) { | ||
| for (let i = array.length - 1; i > 0; i--) { | ||
| const j = Math.floor(Math.random() * (i + 1)); | ||
| [array[i], array[j]] = [array[j], array[i]]; // 요소 교환 | ||
| } | ||
| return array; | ||
| } |
| <div className="topTenIcon"> | ||
| <p className="top">Top</p> | ||
| <p className="ten">10</p> | ||
| </div> | ||
| <div className="title">#2 in Nigeria Today</div> | ||
| </TopTen> |
There was a problem hiding this comment.
styled component는 그 자체에 모드ㄴ 스타일 요소를 반영해서 한 눈에 알아보기 위해 사용하는 부분도 있으니, className을 사용하시는 것도 좋지만 바로바로 알 수 있는 요소를 사용하시는 것도 좋을 것 같아요!
만약에 겹치는 요소가 많아서 className을 쓰신 거라면,
공통적인 요소를 미리 선언하고, 그걸 끌고 오는 형태로 바꿔도 좋을 것 같습니다!
const Common = css`
display: flex;
justify-content: center;
align-items: center;
gap: 3rem;
margin-bottom: 2.5rem;`
const Ten = styled.p`
${Common}
어쩌구
`
| font-size: 26.75px; | ||
| font-weight: 700; | ||
| line-height: 20px; | ||
| letter-spacing: -0.07339449226856232px; |
| font-size: 20.92px; | ||
| font-weight: 700; | ||
| line-height: 15.64px; | ||
| letter-spacing: -0.05740566551685333px; |
| letter-spacing: 0.7511110901832581px; | ||
| `; | ||
|
|
||
| export default function SearchList({ |
There was a problem hiding this comment.
그 searchList가 searchPage 쪽 컴포넌트인 것 같은데 현재 배포 페이지에는 아예 나오지가 않아요ㅠㅠ 확인 부탁드려요!
| return ( | ||
| <html lang="ko"> | ||
| <body> | ||
| <StyledComponentsRegistry>{children}</StyledComponentsRegistry> |
There was a problem hiding this comment.
요 친구가 어떤 컴포넌트인지는 아직 확인하지 못했지만 전체적인 레이아웃에서 footter navbar가 화면이랑 떨어져서 나오고 있습니다! 확인해주세용!
| </TransparentButton> | ||
| </InputContainer> | ||
|
|
||
| <SearchList query={query} movieList={movieList} /> |
| @@ -0,0 +1,16 @@ | |||
| export default function SearchIcon() { | |||
There was a problem hiding this comment.
혹시 svg를 그냥 파일로 public 폴더에 넣지 않은 이유가 있으신가요?
| <ButtonContainer | ||
| className="w-full h-full text-center" | ||
| type={type} | ||
| // onClick={onClick} |
There was a problem hiding this comment.
github action 저도 써보고 싶었는데 다음엔 시도해봐야겠어요👍👍
| const MENU_LIST = [ | ||
| { title: 'Home', icon: HomeIcon, href: '/home' }, | ||
| { title: 'Search', icon: SearchIcon, href: '/search' }, | ||
| { title: 'Coming Soon', icon: ComingSoonIcon, href: '/soon' }, | ||
| { title: 'Downloads', icon: DownloadsIcon, href: '/download' }, | ||
| { title: 'More', icon: MoreIcon, href: '/more' }, | ||
| ]; |
There was a problem hiding this comment.
배포 링크에서 soon, download, more 쪽은 404 에러가 나고 있어서 페이지를 만들어주시면 좋을 것 같아요!
| export default function DetailScreen({ | ||
| data, | ||
| }: { | ||
| data: { title: string; poster_path: string; overview: string }; |
There was a problem hiding this comment.
저도 궁금합니다! 자주 쓰일 수 있는 인터페이스라면 파일에 따로 정의해두고 꺼내써도 좋을 것 같아요~
| useDebounce( | ||
| () => { | ||
| router.replace(`/search?query=${query}`); | ||
| }, | ||
| [query], | ||
| 1000, | ||
| ); |
There was a problem hiding this comment.
debounce 간단하게 적용하신 점 좋네요!!
검색페이지 처음 들어가면 경로가 query= 인 상태로 끝나서 query가 빈 값일 때는 popular 데이터를 부르는 식으로 api 호출의 경우를 나눠 처리해주셔도 좋을 것 같습니다~!
6주차 미션: Next-Netflix
결과물
Key Questions
무한 스크롤과
Intersection Observer API의 특징에 대해 알아봅시다.무한 스크롤
무한 스크롤은 스크롤을 무한으로 할 수 있는 기능이다.
페이지 최하단에 도달했을 때 신규 콘텐츠를 로드하는 식으로 무한 스크롤이 구성된다.
이 전에는 페이지네이션을 활용해 콘텐츠를 확인하는 방식을 사용했다.
무한스크롤의 장점 : 별도의 추가 동작이 필요하지 않음.
무한스크롤의 단점 : 한 페이지 내에 많은 콘텐츠가 로드 되므로, 페이지 성능이 느려진다. 많은 컨텐츠 로드 후, 눈여겨봤던 콘텐츠로 다시 돌아가기 어렵다.
Intersection Oberserver API
해당 API는 무한 스크롤을 구현할 수 있도록 돕는다.
Intersection Oberserver(교차 관찰자)는 요소(Element)가 뷰포트(ViewPort)와 교차하고 있는 지 감지한다. 즉, 관찰 중인 요소가 사용자가 보는 화면 영역 내에 들어왔는 지 알려준다.
객체 생성
객체 생성 시 root(관찰 대상이 화면에 들어왔음을 감지하는 영역), rootMargin(감지 영역을 바깥 범위까지 확장), threshold(관찰 대상이 화면 내 얼마나 들어왔을 때 콜백 함수를 콜백할 지) 등의 값을 작성하면 된다.
tanstack query의 사용 이유(기존의 상태 관리 라이브러리와는 어떻게 다른지)와 사용 방법(reactJS와 nextJS에서)을 알아봅시다.tanstack query(이전 이름 : React Query)
웹 애플리케이션에서 데이터 가져오기, 캐싱 동기화 및 서버 상태 업데이트를 간편하게 만들어주는 리액트 라이브러리다.
즉, React에서 API 요청과 상태 관리를 쉽게 해주는 도구다.
React나 Next.js와 함께 사용하는 경우 서버에서 데이터를 효율적으로 가져오고 캐싱 및 동기화를 관리할 수 있게 해준다.
[ReactJS, Next.js에서의 사용]
ReactJS :
Next.js :
[사용 방법]
기본적인 git add, commit, push, pull, merge, rebase 등의 명령어에 대해 알아봅시다(+ git branch 전략이나 다른 git 명령어도 좋습니다!)
Git에서의 흐름을 기준으로 git 명령어에 대해 설명한다.
git add명령어로 스테이징 영역에 올립니다.git commit명령어로 로컬 리포지토리에 저장git push로 원격 리포지토리에 업로드Merge와 Rebase
특히 협업 할 때 중요하 쓰인다.