[5주차] ForgetMeNot 미션 제출합니다 #4
Conversation
fix: 마지막 key 수정이길..
fix: 진짜진짜 마지막 key 오류 수정
fix: 진짜 최종
|
추가로, 이번 과제를 하면서 겪었던 어려웠던 점에 대해.. 글을 남겨보았습니다:) |
| return <Component {...pageProps} /> | ||
| } | ||
| const App = ({ Component } : any) => { | ||
| return ( |
There was a problem hiding this comment.
안녕하세요! 코드리뷰 파트너 Teample의 임채리입니다!
라우터 보니까 search와 detail 페이지까지 구현하셨네요...! 멋집니다 .. 🤩
| useEffect(() => { | ||
| setTimeout(function(){ | ||
| location.href='home'; | ||
| }, 2000) |
There was a problem hiding this comment.
헛 저희도 이 방법 사용했는데 애니메이션 보여주는 시간 정하는 것도 은근 까다롭더라구용 ㅎㅎ
| @@ -100,8 +98,13 @@ const Input = styled.input` | |||
| outline: none; // 인풋 포커스 했을때 border 안생기게 | |||
| <Link | ||
| href={{ | ||
| pathname: "/detail", | ||
| query: { id: movie.id }, |
There was a problem hiding this comment.
저희는 아직 detail 페이지로 연결하는 기능을 구현하지 않아서 link태그의 query에서 전송하는 것은 처음 봤네요!!! useRouter에서만 가능한줄 알았는데!!!
| { id: 3, src: "navi4", text: "Downloads", link: "" }, | ||
| { id: 4, src: "navi5", text: "More", link: "" }, | ||
| ]; | ||
|
|
There was a problem hiding this comment.
확실히 ts를 쓰면 이렇게 깔끔하게 정보를 저장해두고 styled나 코드 적용할 때 갖다 쓸 수 있군요!
| }; | ||
|
|
||
| export default Header; | ||
|
|
There was a problem hiding this comment.
Header을 component로 따로 빼서 전체적으로 깔끔한 것 같습니다
| <title>Netfilx</title> | ||
| <link rel="icon" href="https://ifh.cc/g/bCkXTX.png" /> | ||
| </Head> | ||
| <Component {...pageProps} /> |
There was a problem hiding this comment.
지은님 블로그 보니까 이부분에서 pageprops가 빠져 있어서 고생하셨다던데 저는 그냥 처음부터 있었어가지고 이 pageprops의 중요성을 몰랐는데 읽으면서 굉장히 중요한 역할을 했다는 것을 알게되었습니다~
|
|
||
| return { props: { latest, now_playing, popular, top_rated, upcoming } }; | ||
| } | ||
|
|
There was a problem hiding this comment.
async함수 선언을 하고 제가 참고한 공부 문서&영상에서는 async await await를 썻는데 오류가 뜨지는 않더라고요! 아마 저희도 await한 번만 썻으면 오류가 떳을 것 같습니다
There was a problem hiding this comment.
와 await이 두번이나 써도 되는 존재였군요..! 원리가 궁금해지는.. 답변이네요 조언 감사합니다 더 공부해봐야겠네요:)
| value={text} | ||
| onChange={handleChange} | ||
| placeholder="Search for a show, movie, genre, e.t.c" | ||
| /> |
There was a problem hiding this comment.
custom hooks를 이용해 간단하게 처리하셨군요 ㅎㅎ 저도 다음주 과제할때 cutom hooks를 사용하려고 했는데 이렇게 보니까 더 간단하고 좋네용 ㅎㅎ
처음 협업 과제였는데 확실히 협업으로 하니까 혼자 과제를 할 때보다는 막막함이 덜 했던 것 같아요!
next.js 를 처음 접해봐서 초기 build를 이해하는 것부터 data fetching 까지 시간이 조금 걸렸네요 ㅠㅠ .. . .
더 깔끔하고 효율적인 코드를 위해 고민을 많이 했는데, 역시나 너무 어렵네요
지금 작성해놓은 코드를 어떻게하면 더 깔끔하게.. 작성할 수 있을지 계속해서 고민을 해보고 고쳐나가야할 것 같습니다!!
Team Member
안채연, 오지은
구현한 페이지
배포링크
https://next-netflix-16th-k7yg.vercel.app
수정해야할 부분
Key Questions
1. Server Side Rendering과 Client Side Rendering의 차이
Server Side Rendering
SSR은 클라이언트가 웹 페이지를 렌더링하는 것이 아니라 서버에서 웹 페이지를 생성해서 클라이언트는 이를 가져와서 띄우는 방법이다.
서버에서 웹 페이지 정보를 모두 가지고 있기 떄문에 서버가 무거워지고 서버 비용이 증가한다는 단점이 있으나
서버가 가지고 있는 웹 페이지 정보를 검색엔진이 인식할 수 있기 때문에 SEO를 통해 네이버, 구글 등에 웹 페이지가 쉽게 노출될 수 있다는 장점이 있다.
Client Side Rendering
서버는 클라이언트에게 HTML, JS 정보만 보내주고 클라이언트가 이를 받아 브라우저에서 직접 페이지를 렌더링하는 방법이다.
서버가 가벼워지고 서버의 성능에 신경쓰지 않고 페이지를 개발할 수 있다는 장점이 있으나
클라이언트가 직접 페이지를 렌더링하기 때문에 페이지의 초기 로딩 시간이 길고 SEO가 잘 되지 않는다는 단점이 있다.
2. SEO란
SEO란 검색 엔진 최적화를
이 SEO를 위해 개발자는 구글, 네이버 등에 자신의 페이지가 상위에 노출되기 위해
태그, 링크 구조를 개선하여 검색 엔진이 자신의 페이지를 잘 검색할 수 있도록 해야한다.
SEO를 위한 작업들
가독성을 고려해서 작성하자.
이 요소를 잘 정의해놓아야 트래픽이 증가하고 이런 트래픽 증가는 검색 상위 노출을 위한 평가에 영향을 준다.
3. 전반적인 협업 과정