TIL_230211_ 최종 프로젝트 - 스터디 타임

정윤숙·2023년 2월 11일

TIL

목록 보기

103/192

내일배움캠프 4기 스파르타코딩 React B반

📒 오늘의 공부

1. JS 스터디

프로젝트에 대해 떠들떠들만 하다가 헤어짐ㅋㅋ

2. 최종 프로젝트 - 스터디 타임

프로젝트 관련 공부하기

Next.js - 노마드 강의

공부한 내용 git repo

알게 된 것

Next.js의 장점
- 사전 렌더링(SSR/SSG)으로 인해 HTML에 소스 코드가 들어간 상태
- javascript가 비활성화되더라도 버튼 클릭 등의 이벤트는 동작하지 않겠지만 이미 존재하는 HTML 요소는 눈으로 확인이 가능
<style jsx> 문법
- 장점: <style jsx global>로 쓰면 전역으로 쓸 수 있다
  -> import할 필요가 없다
  -> className 없이 바로 태그 이름 사용 가능
- 단점: style 속성 자동완성이 안 됨
network 창에서 api key 안 보이게 하기
- rewrite 이용
  -> next.config.js
  
  -> index.js
- url 주소가 바뀌는 redirection과 달리 url이 바뀌지 않는다.
- fetch 주소에 api_key가 보이는 주소 대신 source 주소를 넣으면 destination에서 정보를 받아 온다.
getServerSideProps
- 오직 서버에서만 실행되기 때문에 api key를 이 안에 넣으면 key가 노출되지 않는다.
- 서버에서 미리 data를 fetch하면 클라이언트 화면에 "Loading"이 보이지 않는다.
- 다만 서버가 데이터를 가져오지 않으면 화면에 아무것도 뜨지 않는다.
catchAll url
- movies 폴더 내의 [...id].js
  -> url/movies/a1r/221/112
  -> 이렇게 계속 url을 타고 들어가도 해당 페이지로 이동한다.
SEO 최적화
- detail 페이지 컴포넌트에서 getServerSideProps를 쓰면 영화 정보가 html에 담겨서 검색 최적화에 도움이 된다.
  export function getServerSideProps({ params: { params } }) { return { props: { params }, }; }
- params에는 영화에 대한 정보가 담겨 있다.

2. 최종 프로젝트 - 기능 구현

Tabs 구현 완료

tabs구현 검색

알게된 것

tab 기능은 ul, li 태그 활용하기

문제

styleComponent에서 semanticTag로 바꾸는데 오류
- 오류 메시지: "초기 UI가 서버에서 랜더링 된 것과 일치하지 않기 때문에 Hydration이 실패"
- Hydration이란?
  -> Next.js에서 사전 렌더링된 정적페이지와 번들링된 js파일들이 클라이언트에 보내진다.
  -> 브라우저가 페이지를 로드할 때 해당 js코드가 HTML DOM 위에서 다시 rendering 되면서 서로 매칭되는 과정
- 사전 렌더링(SSR/SSG)된 트리와 브라우저에서 첫번째 렌더링된 트리 사이에 차이가 있을 때 해당 에러가 발생
- 원인 1
  -> html 태그 잘못 사용
  ex. p태그 하위에는 div태그가 들어갈 수 없다.
- 원인 2
  하위컴포넌트를 감싸는 태그를 사용할 경우
  ex. <div><하위 컴포넌트/></div>

시도 및 해결

원인 2 해결 - DOM이 로드된 후에 구성요소 렌더링

		const [domLoaded, setDomLoaded] =
        useState(false);
		 useEffect(() => {
 	setDomLoaded(true);
		}, []);

return문

{domLoaded && (
   <div>
     <하위 컴포넌트 />
   </div>
 )}

원인 2 해결방법을 적용하니 새로운 경고 메시지가 떴다.
원인 1 - 시도 및 해결
body태그는 section의 하위 태그로 쓸 수 없다
- Main의 index.tsx에서 스타일 컴포넌트를 쓸 때 최상위를 secion, 하위를 body로 해놨다..
- 수정했는데 다시 hydration 오류
  -> 최상위 MainWrap 스타일 컴포넌트에 body태그를 썼는데 오류메시지
  body태그는 div태그의 하위태그로 쓸 수 없다
- 원인
  -> html이 렌더링 될 때 최상위가 div태그
- main 최상위 태그를 div로 바꾸니 문제 해결
- 원인 1 해결 코드를 지워도 에러 없이 잘 작동한다!