[6주차] diaMEtes 미션 제출합니다. #14
Conversation
chore : 폴더 구조 변경
실시간 검색 기능
- Layout에 blank 추가 (Foooter에 가려지는 화면 제거용) - Layout 과 전역스타일 100vh 제거 - TextInfo 왼쪽 여백
11월 18일 작업 (변경사항 매우 많음 !!)
fix : search에서 movie poster_path가 null되는 거 수정!
fix : getScreenWidth 앞에 대문자로 변경(배포에러)
| useEffect(() => { | ||
| setScreenWidth(window.screen.width); | ||
| }, []); | ||
|
|
There was a problem hiding this comment.
반응형 구현은 저는 한번도 안해봤는데 화면크기 받아올때 하는법들을 하나하나 알아갑니다!
There was a problem hiding this comment.
react 에서는 미디어쿼리로 뚝딱뚝딱 하면 되는데 nextJS에서는 이렇게 일일이 받아줘야 하는군요!! 몰랐던 사실을 알아가네요 감사합니당:)
| { id: 2, info: "Movies" }, | ||
| { id: 3, info: "My List" }, | ||
| ]; | ||
|
|
There was a problem hiding this comment.
itemlist를 설정해서 조건문 써서 간편하게 css를 처리한것이 너무 신기합니다! 참고해야 겠어용
| return ( | ||
| <> | ||
| <div className="image_box">{children}</div> | ||
| <style jsx>{` |
There was a problem hiding this comment.
와 전 nextjs에서도 style-component만 썼는데... style jsx는 또 몰랐네요
style jsx가 더 편한가용?? 후기 궁금함니다
There was a problem hiding this comment.
@0909oje style-component 만큼 익숙하지는 않지만 next.js 에서 별다른 설치 없이 스타일을 스타일드컴포넌트처럼 jsx나 tsx 파일 내에서 지정할 수 있다는 점이 장점인 것 같아요 ㅎㅎ !
|
|
||
| export async function getServerSideProps() { | ||
| const topSearchesMoviesResponse = await (await fetch(getTopSearches)).json(); | ||
| const topSearchesMovies = topSearchesMoviesResponse.results; |
There was a problem hiding this comment.
옹 저희는 topSearchesMoviesResponse에 await 한 번, topSearchesMovies에 await 한 번 쓰는 식으로 코드를 작성했는데
저렇게 await을 중첩해서 쓸 수도 있네요!! 다른 코드 스타일 배워갑니당:)
| <TextInfo name={"Previews"} isPreview={true} /> | ||
| <MovieList movies={upComingMovies} isPreview={true} /> | ||
| <TextInfo name={"Now Playing"} isPreview={false} /> | ||
| <MovieList movies={nowPlayingMovies} isPreview={false} /> | ||
| <TextInfo name={"Top Rated"} isPreview={false} /> | ||
| <MovieList movies={topRatedMovies} isPreview={false} /> | ||
| <TextInfo name={"Popular"} isPreview={false} /> | ||
| <MovieList movies={popularMovies} isPreview={false} /> |
There was a problem hiding this comment.
이부분 저도 컴포넌트 분리를 위해서 고민을 했는데요... 오류가 나서 보류해두었었는데
깔끔하게 분리해 두셨네요..!!! 참고하겠습니다 〰
| overview={m.overview} | ||
| > | ||
| <img | ||
| className={isPreview ? "isCircle" : ""} |
There was a problem hiding this comment.
오 저희는 따로 뺐는데 이렇게 클래스이름으로 처리해 주셨군요!!!
styled component를 쓰니까 prop을 이용해서 수정해봐야겠어요~~~
| query: { | ||
| title: original_title, | ||
| backdrop: backdrop_path, | ||
| overview: overview, |
There was a problem hiding this comment.
저도 이부분 고민했었는데 다시한번 api를 fetch하는것보다 그냥 이렇게 query로 보내주는게 나았을 것 같네요 ...
There was a problem hiding this comment.
@hamo-o 근데 이 방법은 속도는 훨씬 빠르긴 하지만 상세페이지 내에서 새로고침을 하지 못한다는 치명적인 단점.. 이 있었답니다 8ㅁ8 최소한 분기처리를 해서 받아온 쿼리가 비어있다면 api를 fetch하는 방식을 써야할 것 같아요... :)
| } | ||
|
|
||
| export default function Layout({ children }: LayoutProps) { | ||
| const screenWidth = GetScreenWidth(); |
There was a problem hiding this comment.
이렇게 받아오는 부분 때문에 새로고침해야 적용되는 걸까요?ˀ?
실시간으로 반응형 되는거 해결하시면 알려주세요 ~~~~~~ 저도 궁금해요!!
| ) | ||
| )} | ||
| </div> | ||
| <style jsx>{` |
There was a problem hiding this comment.
지난주에 style jsx 되게 신기하다고 생각했는데 사용하기 너무 편리한 것 같아요 저도 다음에 써보고싶네요!
| } | ||
|
|
||
| export const getServerSideProps = async () => { | ||
| const nowPlayingResponse = await (await fetch(getNowPlaying)).json(); |
There was a problem hiding this comment.
await 를 두번 사용해서 한번에 처리해주셨네요! 👍
| <BackgroundPoster url={backdropURL} /> | ||
| <div className="contents"> | ||
| <div className="button-box"> | ||
| <button>▶️ Play</button> |
There was a problem hiding this comment.
오 이 삼각형을 저는 svg 파일로 넣었는데 이렇게 텍스트로 할 수도 있군요... 그럼 귀찮게 Image를 쓰지않아도 되어 좋네요
There was a problem hiding this comment.
@chaeyeonan 귀차니즘이 만들어낸 코드입니다...ㅎ 다른 이모티콘은 안되더라구요 😅
안녕하세요 diaMEtes 프론트팀입니다😀
이번 과제에서 실시간 검색 기능, 영화 상세 페이지, 반응형을 추가해봤어요!
배포링크
반응형은 사용 중인 기기의 사이즈에 맞게 화면의 크기가 알맞게 바뀌도록 했습니다.
그런데 실시간이 아니라 개발자 모드에서 화면 크기를 변경해줄 때마다 꼭 새로고침을 해야합니다!
Key Question
정적 라우팅 : 고정된 페이지로 이동하는 것, 라우터에게 필요한 정보들을 수동으로 사전 입력해야 한다.
예시) /pages/board/1 or /pages/board/2
동적 라우팅 : 가변적인 페이지로 라우팅하는 것 nextjs에서는 대괄호([])를 사용해 페이지를 동적으로 라우팅해준다. 라우팅 테이블에서 현재 상태에 따라 경로를 자동 조정해줄 수 있다.
예시) /pages/board/[boardId]
성능 최적화를 위해 사용한 방법
컴포넌트화 : 두 번 이상 사용되는 코드들 따로 컴포넌트로 빼주기
http://image.tmdb.org/t/p/w500$를 사용하는 모든 컴포넌트코드 리뷰 감사합니다!🤗