[6주차] diaMEtes 미션 제출합니다. #14

heeeesoo · 2022-11-18T12:28:17Z

안녕하세요 diaMEtes 프론트팀입니다😀
이번 과제에서 실시간 검색 기능, 영화 상세 페이지, 반응형을 추가해봤어요!

반응형은 사용 중인 기기의 사이즈에 맞게 화면의 크기가 알맞게 바뀌도록 했습니다.
그런데 실시간이 아니라 개발자 모드에서 화면 크기를 변경해줄 때마다 꼭 새로고침을 해야합니다!

Key Question

정적 라우팅(Static Routing)/동적 라우팅(Dynamic Routing)이란?

정적 라우팅 : 고정된 페이지로 이동하는 것, 라우터에게 필요한 정보들을 수동으로 사전 입력해야 한다.
예시) /pages/board/1 or /pages/board/2

동적 라우팅 : 가변적인 페이지로 라우팅하는 것 nextjs에서는 대괄호([])를 사용해 페이지를 동적으로 라우팅해준다. 라우팅 테이블에서 현재 상태에 따라 경로를 자동 조정해줄 수 있다.
예시) /pages/board/[boardId]

성능 최적화를 위해 사용한 방법

컴포넌트화 : 두 번 이상 사용되는 코드들 따로 컴포넌트로 빼주기
- getImage() : http://image.tmdb.org/t/p/w500$ 를 사용하는 모든 컴포넌트
- : Link를 사용할때 영화 정보들을 함께 전달하는 모든 컴포넌트
- : 홈, 영화상세 페이지
- components > common : 두개 이상의 페이지에서 두번 이상 쓰이는 공통 컴포넌트
- compnenents > layout : 레이아웃에서 한번 쓰이는 컴포넌트 (레이아웃 컴포넌트 포함)

코드 리뷰 감사합니다!🤗

chore : 폴더 구조 변경

실시간 검색 기능

- Layout에 blank 추가 (Foooter에 가려지는 화면 제거용) - Layout 과 전역스타일 100vh 제거 - TextInfo 왼쪽 여백

11월 18일 작업 (변경사항 매우 많음 !!)

fix : search에서 movie poster_path가 null되는 거 수정!

fix : getScreenWidth 앞에 대문자로 변경(배포에러)

AlmondBreez3

안녕하세요 코드리뷰 파트너 이한비입니다!
css처리, 반응형, 그리고 컴포넌트, 파일 분리가 너무 깔끔합니다! 저는 css에서 항상 고통을 겪었는데 Diametes의 css코드들을 보면서 배워갈 점이 많은 것 같아요 그리고 저희 팀은 js를 썻는데 확실히 ts를 쓰면 더 정돈된 코드를 작성할 수 있다는 점이 와닿게 됬어요!
스터디 떄 뵈용

AlmondBreez3 · 2022-11-19T16:48:12Z

src/assets/getScreenWidth.tsx

+  useEffect(() => {
+    setScreenWidth(window.screen.width);
+  }, []);
+


반응형 구현은 저는 한번도 안해봤는데 화면크기 받아올때 하는법들을 하나하나 알아갑니다!

react 에서는 미디어쿼리로 뚝딱뚝딱 하면 되는데 nextJS에서는 이렇게 일일이 받아줘야 하는군요!! 몰랐던 사실을 알아가네요 감사합니당:)

AlmondBreez3 · 2022-11-19T16:50:05Z

src/components/home/Header.tsx

+  { id: 2, info: "Movies" },
+  { id: 3, info: "My List" },
+];
+


itemlist를 설정해서 조건문 써서 간편하게 css를 처리한것이 너무 신기합니다! 참고해야 겠어용

JeeeunOh · 2022-11-20T06:55:22Z

src/components/common/BackgroundPoster.tsx

+  return (
+    <>
+      <div className="image_box">{children}</div>
+      <style jsx>{`


와 전 nextjs에서도 style-component만 썼는데... style jsx는 또 몰랐네요
style jsx가 더 편한가용?? 후기 궁금함니다

@0909oje style-component 만큼 익숙하지는 않지만 next.js 에서 별다른 설치 없이 스타일을 스타일드컴포넌트처럼 jsx나 tsx 파일 내에서 지정할 수 있다는 점이 장점인 것 같아요 ㅎㅎ !

JeeeunOh · 2022-11-20T07:01:43Z

src/pages/search.tsx

+
+export async function getServerSideProps() {
+  const topSearchesMoviesResponse = await (await fetch(getTopSearches)).json();
+  const topSearchesMovies = topSearchesMoviesResponse.results;


옹 저희는 topSearchesMoviesResponse에 await 한 번, topSearchesMovies에 await 한 번 쓰는 식으로 코드를 작성했는데
저렇게 await을 중첩해서 쓸 수도 있네요!! 다른 코드 스타일 배워갑니당:)

hamo-o

안녕하세요! 이번 코드리뷰 파트너 recipeasy의 이현영입니다!!
컴포넌트 분리를 깔끔하게 해주셔서 많이 배운 것 같아요!!!
이번주도 수고하셨습니다~~

hamo-o · 2022-11-20T08:21:33Z

src/pages/home.tsx

+          <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} />


이부분 저도 컴포넌트 분리를 위해서 고민을 했는데요... 오류가 나서 보류해두었었는데
깔끔하게 분리해 두셨네요..!!! 참고하겠습니다 〰☺️

hamo-o · 2022-11-20T08:24:19Z

src/components/home/MovieList.tsx

+            overview={m.overview}
+          >
+            <img
+              className={isPreview ? "isCircle" : ""}


오 저희는 따로 뺐는데 이렇게 클래스이름으로 처리해 주셨군요!!!
styled component를 쓰니까 prop을 이용해서 수정해봐야겠어요~~~

hamo-o · 2022-11-20T08:30:56Z

src/components/common/LinktoMovieData.tsx

+        query: {
+          title: original_title,
+          backdrop: backdrop_path,
+          overview: overview,


저도 이부분 고민했었는데 다시한번 api를 fetch하는것보다 그냥 이렇게 query로 보내주는게 나았을 것 같네요 ...

@hamo-o 근데 이 방법은 속도는 훨씬 빠르긴 하지만 상세페이지 내에서 새로고침을 하지 못한다는 치명적인 단점.. 이 있었답니다 8ㅁ8 최소한 분기처리를 해서 받아온 쿼리가 비어있다면 api를 fetch하는 방식을 써야할 것 같아요... :)

hamo-o · 2022-11-20T08:38:16Z

src/components/layout/Layout.tsx

+}
+
+export default function Layout({ children }: LayoutProps) {
+  const screenWidth = GetScreenWidth();


이렇게 받아오는 부분 때문에 새로고침해야 적용되는 걸까요?ˀ?
실시간으로 반응형 되는거 해결하시면 알려주세요 ~~~~~~ 저도 궁금해요!!

chaeyeonan

안녕하세요 포겟미낫 안채연입니다
전체적으로 코드가 깔끔해서 보기 좋았어요! 저번주 발표 때 말씀해주셔서 style jsx 를 처음 알았는데, 다음에 기회가 된다면 저도 써보고싶네요
과제 너무 수고많으셨습니다 !!

chaeyeonan · 2022-11-20T08:51:00Z

src/components/home/Header.tsx

+          )
+        )}
+      </div>
+      <style jsx>{`


지난주에 style jsx 되게 신기하다고 생각했는데 사용하기 너무 편리한 것 같아요 저도 다음에 써보고싶네요!

chaeyeonan · 2022-11-20T08:52:59Z

src/pages/home.tsx

+}
+
+export const getServerSideProps = async () => {
+  const nowPlayingResponse = await (await fetch(getNowPlaying)).json();


await 를 두번 사용해서 한번에 처리해주셨네요! 👍

chaeyeonan · 2022-11-20T08:53:48Z

src/pages/movies/[...movieData].tsx

+        <BackgroundPoster url={backdropURL} />
+        <div className="contents">
+          <div className="button-box">
+            <button>▶️ Play</button>


오 이 삼각형을 저는 svg 파일로 넣었는데 이렇게 텍스트로 할 수도 있군요... 그럼 귀찮게 Image를 쓰지않아도 되어 좋네요

@chaeyeonan 귀차니즘이 만들어낸 코드입니다...ㅎ 다른 이모티콘은 안되더라구요 😅

seondal and others added 30 commits November 8, 2022 18:19

[Set] create-next-app

0722d1d

chore : 폴더 구조 변경

e7aa6c5

feat : footer 기능

718b2ef

feat : footer에 router 추가

26cb3e0

test : home 페이지에 movie api 적용해보기

86f634d

feat : nowPlayingMovies api data 불러오기 테스트

b6bd0be

feat : nowPlaying에 movie image 추가

e2b5931

feat : home 페이지에 top rated movie list 추가

cbe7100

feat : popular movie 홈페이지에 추가

d889118

chore : home 페이지 스타일 수정

eab70b3

feat : home 페이지 중간 바 추가

1d51cca

feat : header 추가

208ff67

fix : 화면 상단 맞추기

88bc19d

fix : 사진 배경으로 옮김

9d574c0

Merge pull request #1 from diaFEtes/heeeesoo

2af09da

chore : 폴더 구조 변경

feat : get top rated movies

52bf317

feat : 검색페이지 -> 상세페이지 연결

b7750ac

feat : 상세페이지 구현

dd7bfa4

refact : search 페이지 getServerSideProps()

9d65c0c

refact : movies api

da0101b

refact : home 페이지 getServerSideProps 방식 변경

137a270

refact : 폴더 구조 변경 & fix : 푸터 새로고침시 스타일 적용 안되는 오류 수정

8a14858

del : 불필요한 import 삭제

b39d18b

del Layout.tsx

9e44cd5

fix : 로고 화면에서 푸터가 보이는 현상 제거

a5f5075

refact : styled-component 전부 삭제 -> <style jsx/> 형식으로 변경

86a466b

style : Layout style 설정

133e534

edit : footer styled-components 삭제

ca96436

Feat : 메인페이지 -> 영화 상세 페이지 연결

190afad

set : api_key process.env 로 숨김

15c6faa

heeeesoo and others added 25 commits November 16, 2022 17:24

chore : api 수정

596f1c8

fix : 실시간 검색 수정

e285cb5

Merge pull request #7 from diaFEtes/Logo

0187f9c

실시간 검색 기능

[Docs] api.tsx 주석 추가

de61848

style : footer 디자인 수정

123bb2b

style : 영화 상세페이지 스타일 지정

93b85cd

refact : �FirstMovie 컴포넌트화

0c4be94

edit : getImage()로 교체

9fe98ca

refact : LinkToMovieData 컴포넌트화

6da53de

fix : 리스트들에 key 추가

168b387

style : home 글자 여백 수정

74f2364

style : 자잘한 스타일 이슈 수정

c7172f1

- Layout에 blank 추가 (Foooter에 가려지는 화면 제거용) - Layout 과 전역스타일 100vh 제거 - TextInfo 왼쪽 여백

edit : 타입 any 제거

c358277

folder : component > layout 폴더정리 + 푸터 세세한 스타일 변경

d22c111

style : searchList 스타일 적용

f49226c

style : input-box 스타일 적용

0874412

feat : 기기 화면 크기에따라 화면 크기 변경

d2ea807

fix : 오타수정

294682a

Merge pull request #8 from diaFEtes/seondal

308ddd5

11월 18일 작업 (변경사항 매우 많음 !!)

fix : search에서 movie image null 에러 처리

158c87b

fix : footer에 버튼 누르면 font도 흰색으로 변하게

1f66757

fix : margin 조정

89cf90c

Merge pull request #9 from diaFEtes/test_hs

456ee22

fix : search에서 movie poster_path가 null되는 거 수정!

fix : getScreenWidth 앞에 대문자로 변경(배포에러)

d4cf26b

Merge pull request #10 from diaFEtes/test_hs

2396226

fix : getScreenWidth 앞에 대문자로 변경(배포에러)

AlmondBreez3 reviewed Nov 19, 2022

View reviewed changes

JeeeunOh reviewed Nov 20, 2022

View reviewed changes

hamo-o reviewed Nov 20, 2022

View reviewed changes

chaeyeonan reviewed Nov 20, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[6주차] diaMEtes 미션 제출합니다. #14

[6주차] diaMEtes 미션 제출합니다. #14

heeeesoo commented Nov 18, 2022 •

edited

Loading

AlmondBreez3 left a comment

AlmondBreez3 Nov 19, 2022

JeeeunOh Nov 20, 2022

AlmondBreez3 Nov 19, 2022

JeeeunOh Nov 20, 2022

seondal Nov 20, 2022

JeeeunOh Nov 20, 2022

hamo-o left a comment

hamo-o Nov 20, 2022

hamo-o Nov 20, 2022

hamo-o Nov 20, 2022

seondal Nov 20, 2022

hamo-o Nov 20, 2022

chaeyeonan left a comment

chaeyeonan Nov 20, 2022

chaeyeonan Nov 20, 2022

chaeyeonan Nov 20, 2022

seondal Nov 20, 2022

[6주차] diaMEtes 미션 제출합니다. #14

Are you sure you want to change the base?

[6주차] diaMEtes 미션 제출합니다. #14

Conversation

heeeesoo commented Nov 18, 2022 • edited Loading

AlmondBreez3 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hamo-o left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chaeyeonan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

heeeesoo commented Nov 18, 2022 •

edited

Loading