[6주차] Teample 미션 제출합니다 #13
Conversation
Parsing error : Cannot find module 'next/babel 해결
끝...............?
ch9eri->teample
와 끝~!#$ㄸ~@$@~$~2
AlmondBreez3
left a comment
AlmondBreez3
left a comment
There was a problem hiding this comment.
안녕하세요 코드 리뷰 파트너 이한비입니다!
저희 팀도 js를 써서 그런지 코드 이해하기 너무 쉬웠어용!
api를 따로 빼서 깔끔한 코드 작성한게 기억에 남습니다!
스터디 때 뵈용
| export async function getUpcoming() { | ||
| const upcoming = await api.get('upcoming?'); | ||
| return upcoming; | ||
| } |
kongnayeon
left a comment
kongnayeon
left a comment
There was a problem hiding this comment.
안녕하세요!
이번 주 코드 리뷰 파트너입니다 😸
코드가 깔끔해서 리뷰 하기 편했어요!
레피피지 팀도 그렇고 팀플 팀도 그렇고 아이콘 라이브러리 되게 잘 사용하시는 것 같아요!
저희도 다음에 꼭... 🤩
그리고 api key 관련해서 코멘트 남겨 뒀는데 확인해 보시면 좋을 것 같아요!
과제 하느라 수고하셨고 스터디 시간에 봬요 😻
| const ChangeNow = (e) => { | ||
| setNow(e.currentTarget.id); | ||
| router.push(routing[e.currentTarget.id]); | ||
| }; |
There was a problem hiding this comment.
우와 각 id 값을 숫자로 주니까 코드가 되게 깔끔해지네요...!
| <> | ||
| <Box> | ||
| <Children>{children}</Children> | ||
| </Box> |
| } | ||
|
|
||
| //pre-rendering => html,js가 먼저 랜더링 되고 js가 나중에 랜더링 돼서 css in js 를 쓰면 스타일이 나중에 적용 | ||
| //요게 해결책~! |
| baseURL: 'https://api.themoviedb.org/3/movie/', | ||
| params: { | ||
| api_key: 'f85ba1745021cb0f98ac340407ad592b', | ||
| }, |
There was a problem hiding this comment.
api key 같은 경우에는 .env 파일 만들고 숨겨 주신 후에 .gitignore에 .env 추가하고 업로드 안 되도록 하시면 좋을 것 같아용! 참고 링크
| if (searchMovie !== undefined) { | ||
| return searched.title | ||
| .toLowerCase() | ||
| .includes(searchMovie.toLowerCase()); |
hamo-o
left a comment
hamo-o
left a comment
There was a problem hiding this comment.
안녕하세요!! 이번 코드리뷰 파트너 레시피지 팀의 이현영입니다!!
코드가 깔끔해서 읽으면서 이해가 쉬웠던 것 같아요!!
생각나는대로 적는 저를 반성하게 되었습니다,,
이번주도 수고많으셨어요 ~ ~ ~
|
|
||
| const ChangeNow = (e) => { | ||
| setNow(e.currentTarget.id); | ||
| router.push(routing[e.currentTarget.id]); |
There was a problem hiding this comment.
router.push()를 이용하는 경우 a태그를 만들지 않기 때문에 크롤링되지 않아서 SEO에 불리하다고 하네요!!
근데 Link가 왜 오류가 났을까요...🥲
|
|
||
| const Footer = () => { | ||
| const routing = { 0: '/home', 1: '/search' }; | ||
| const [now, setNow] = useRecoilState(NowState); |
There was a problem hiding this comment.
오 이런식으로 현재 선택되었는지를 알 수도 있겠네요!! 아직 recoil이 익숙하지 않아서 생각지도 못했어요..
router.pathname 요 방법도 참고해보시면 좋을 것 같아요 -!!
yjoonjang
left a comment
yjoonjang
left a comment
There was a problem hiding this comment.
안녕하세요 코드리뷰 파트너 장영준입니다 :)
디테일한 부분에 신경쓰신게 많은 것 같다고 느껴서 짱이라고 생각했습니다...
과제 힘드셨을 텐데 수고하셨고 스터디때 봬용 :)
| <> | ||
| <Box> | ||
| <Children>{children}</Children> | ||
| </Box> |
| @@ -0,0 +1,6 @@ | |||
| /** @type {import('next').NextConfig} */ | |||
| const nextConfig = { | |||
| reactStrictMode: true, | |||
There was a problem hiding this comment.
저는 console.log()가 렌더링 2번 되서 아래 글 보고 reactStrictMode false로 바꿨는데 잘 되시나요 ㅠㅠ 나만 그런건가 ㅠㅠ
참고링크
| preview: JSON.stringify(movie.overview), | ||
| }, | ||
| }} | ||
| as={`home/${movie.id}`} |
| setSearchMovie(e.target.value); | ||
| }} | ||
| /> | ||
| <AiOutlineClose className="closeBtn" onClick={clearInput} /> |
There was a problem hiding this comment.
아맞다 input 초기화 하는거 안했었는데,,,덕분에 기억하고 가요...ㅎ
6 participants
안녕하세요 Teample의 임채리, 유선호입니다.
이번에도 많은 에러와 함께한 한주였습니다 ...^____^
효정님과 선호님의 친절한 설명 덕분에 무사히 과제를 마쳤습니다...
아래에 어려웠던 점을 해결한 방식에 대해 적어뒀는데 좋은 방법인지 모르겠어서 더 고민해보겠습니다!
배포링크
[key questions]
라우팅이란 페이지 이동을 뜻한다. Next.js에는 자체 라우터가 내장되어있다.
정적라우팅은 고정된 페이지로 라우팅하는 것으로 누가 언제 접속하더라도 같은 페이지로 라우팅된다.
동적라우팅은 가변적인 페이지로 라우팅하는 것으로 실제 소스코드는 한 페이지지만 id 등에 따라서 주소가 변경된다.
성능 최적화 중 하나인 렌더링 최적화의 목표는 리플로우를 최대한 적게 발생시키면서(리페인트 속성 사용) 빠르게 화면을 그리는 것이다.
브라우저의 스타일이 그려지는 순서 : js -> style -> layout -> paint -> composite
리플로우: 레이아웃의 넓이, 높이, 위치 등에 영향을 주는 css 속성을 변경할 경우 Layout부터 다시 그려지게 되는 것
리페인트: 레이아웃에 영향을 주지 않는 속성을 변경하면 레이아웃을 건너뛰고 paint 작업부터 다시 수행
또한 복잡한 DOM 트리와 인라인 스타일 사용을 지양해야한다.
[어려웠던 점]
이 방식의 문제점 : await를 사용하지 못해서 promise pending이 나옴
해결 방법: useEffect 내에서 함수 사용