부트캠프 13Week

kim unknown·2022년 7월 4일
0

ELICE

목록 보기
11/11
post-thumbnail

- 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

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

0개의 댓글