부트캠프 13Week

- 220627 ~ 220628

서버사이드 렌더링 복습

• 렌더링 방식
  CSR - Client Side Rendering
  SSR - Server Side Rendering
  SSG - Static Site Generation
  ISR - Incremental Static Regeneration
  
  
• Client Side Rendering : useEffect
  렌더링이 클라이언트 측에서 발생.
  자바스크립트 코드가 많으면 앱 로딩이 느려짐
  SEO에 취약
• Server Side Rendering : getServerSideProps
  서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달
  SEO에 유리
  
  
• next js - React로 만드는 서버사이드 렌더링 프레임워크
• yarn dev npm run dev 개발 환경 세팅
• yarn build npm run build 실서버 배포 버전 생성
• yarn build npm run start 실서버 구동
  
  
• pages/index.js는 엔트리 파일
• nextjs는 라우팅을 따로 처리해주지 않아도 자동으로 설정됨
• id는 가변적인 파라미터로 처리. useRouter를 통해서 id 값에 접근할 수 있음

import {useRouter} from 'next/router';
export default function Topic() {
  const  router = useRouter();
  const id = router.query.id;
  return <>/sub/{id}.js</>
}

• Link : 페이지 리로드 없이 페이지를 전환하도록 돕는 컴포넌트

<Link href="/sub">Index</Link>

• nextjs는 express 처럼 백엔드 기능이 내장
• /pages/api 폴더는 server side api를 위한 전용공간

export default (req, res) => {
  const { id } = req.query;
  const topic = topics.filter(e => e.id === Number(id))[0]
  res.status(200).json(topic);
};

• Vercel 이용해서 git repository 끌어와서 배포
• Freenom으로 무료 도메인 생성

- 220629 ~ 220631

여태까지 배운 내용 정리하고 스타일 컴포넌트 복습