AWS
Cloudfront
CDN 서비스 (Content Delivery Network)
서버가 분산되어있고 지리적으로 가까운 서버에 캐싱된 데이터를 가져온다.
최신 동적 컨텐츠를 제공해야하는 경우에 적합하지 않다.
비용이 추가 발생한다.
S3에 파일 업로드 → CloudFront에서 bucket 등록
- 확인할 옵션
HTTP, HTTPS
CNAME
Root Object
Elastic Beanstalk
배포 프로세스를 자동으로 처리, 필요한 인프라 자원을 프로비저닝, 로드 밸런싱과 오토스케일 등 기능 제공
Nextjs
React Server Side Rendering Framework
Pages Router(클라 중심) → App Router(서버중심)
둘 다 아는게 좋다.
- CSR(Client-Side Rendering)
SPA → Coding Spliting 코드 분할
필요한 곳에서만 js를 로딩
- SSR(Server Side Rendering)
CSR이나 Code Spliting을 사용할 경우 SEO가 좋지 않다.
- Rendering
JS를 이용하여 HTML을 만드는 행위
- Pre-rendering
Client에 HTML이 로드 되기 전 JS를 이용하여 HTML을 만드는 것
Next.js는 기본적으로 Pre-rendering된다.- SSG(Static-Site generation)
Build할 때 렌더링 - SSR(Server-Side Rendering)
runtime에 렌더링 - Incremental Static Regeneration
점진적인 사이트 렌더링
일정주기마다 페이지를 빌드
- SSG(Static-Site generation)
Page와 Routes
설치
npx create-next-app [프로젝트 이름]➜ ~ npx create-next-app pages-test
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
**✔ Would you like to use App Router? (recommended) … [No] / Yes**
✔ Would you like to customize the default import alias? … No / Yes개발 모드와 프로덕션 모드
각 명령어들
// package.json
...
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
...dev-next dev개발 모드로 프로젝트를 실행- Hot reloading 등 개발 환경에 유용한 기능들 제공
build-next build제품 배포 용도로 프로젝트를 빌드start-next startbuild를 통해 만들어진 프로젝트를 실행하는 명령어. 실제 운영 서버에서 배포되는 환경과 동일.
Page
pages 디렉토리에 파일을 만들면 된다.
pages 디렉토리에서 React Router Dom설정을 하지 않아도 폴더 구조에 따라 URL이 결정되는 파일 기반 라우팅 시스템을 따른다.
about디렉토리 내에있는 index.js의 이름을 변경하고 바깥으로 빼도 동일하게 동작한다.
- 중첩 라우터 사용
about/blog로 접근할 수 있게된다.
- dynamic router
import React from "react";
import { useRouter } from "next/router";
const Page = () => {
const router = useRouter();
return <div>Page: {router.query.postId}</div>;
};
export default Page;useRouter로 동적 라우팅을 구현할 수 있다.
- 클릭하면 페이지 이동
- useRouter 사용
- Link 사용
_app.js
import "@/styles/globals.css";
import Link from "next/link";
import { useRouter } from "next/router";
export default function App({ Component, pageProps }) {
const router = useRouter();
return (
<>
<h1>Header</h1>
<div
onClick={() => {
router.push("/");
}}
>
Home
</div>
<Link href="/about">About</Link>
<Component {...pageProps} />
</>
);
}API Routes
- /api/파일이름
api를 접근하여 json형태로 볼 수 있다.
api주소를 마스킹하여 브라우저에서 /api/todos/[id] 이러한 형태로 실제 요청 주소를 은닉할 수 있다.
Data Fetching
- getServerSideProps
Server에서만 실행되는 함수
runtime에서만 실행된다.
context객체를 통해, Post Page에서는 next router를 통해 URL Query 파라미터에 접근 가능하다.
- getStaticPaths
return값이 getStaticProps로 전달된다.
fallback: 동적 경로를 이용한 Static 페이지를 만들 때 동작 방식을 결정하는 옵션
- getStaticProps
SSG를 원하는 페이지에 getStaticProps를 추가하면, 빌드할 때 렌더링할 컴포넌트
revalidate속성으로 시간을 설정할 수 있다.
특정 파일들
- _app.js
root 컴포넌트 파일
- _document.js
HTML 구조 커스텀 할 때 사용하는 파일
Server Side Rendering만 수행, Pages Router에서만 사용된다. - ServerStyleSheet 모듈
const sheet = new ServerStyleSheet();를 적용하여 ServerSide에서 스타일이 적용되게 하여 렌더링 후 스타일이 입혀지는게 눈에보이지 않게 해준다.
- 404.js
에러 발생 시 커스텀해서 보여줄 페이지
App Router
모든 컴포넌트가 Server Component 이라서 Client Component 사용하려면 따로 설정해야한다.
보통 유저와 상호작용하는 곳을 제외하고 모두 Server Component를 사용한다.
언제 어떤 컴포넌트가 필요한지는 Next.js 공식 문서에 적혀있으니 확인해보자
- 설치
프로젝트 생성할 때 App Router 설정에서 Yes 설정해주면 된다.
- Styling
Tailwind CSS 사용한다.
이외 새로알게된 팁
- rafce
화살표함수로 컴포넌트 기본을 만들어준다.
import React from 'react'
const index = () => {
return (
<div>index</div>
)
}
export default indexData Fetching부분에서 이해를 잘 못했으니 복습해야하고 AWS는 아키텍처와 용어 공부하자!
주말에 할것: 정처기 실기, Nextjs, 이코테, React 면접질문정리, 클린코드
폭염으로 인해 집중을 못하니까 계획도 밀리게 되었는데, 온도 조절이 필요할때에는 장비가 불편하더라도 외부에서 해야겠다.
