1. Udemy(5)
Deploying with firebase
- firebase-tools 설치
$ npm install -g firebase-tools - 로그인
$ firebase login - 초기화
$ firebase init - 배포
$ firebase deploy - 호스팅 비활성화
$ firebase hosting:disable
Authentication(인증)
- firebase API 이용
- 일부 콘텐츠는 보호되어야 하기때문에 필요하다
- 인증되지 않은 사용자는 콘텐츠 접근이 불가능하다
인증토큰으로 작업할 때 이러한 토큰은 일반적으로JSON 웹 토큰형식(JWT)으로 생성된다- 이러한
토큰은 실제로 데이터를 문자열로 인코딩하는 알고리즘에 의해 구성된 긴 문자열이다(개인 키의 도움으로 서버에서만 알 수 있다)
NextJs
- React를 기반으로 한 React 프레임워크
- 설치 :
npx create-next-app || yarn create-next-app npm run dev를 이용해 개발서버를 시작할 수 있다- React에서 react-router-dom의 라우팅은 CSR을 제공하고 Next에서 제공하는 File System의 라우팅은 SSR을 제공한다
- Next가 제공하는 SSR은 SPA를 지원해 필요한 데이터만 부분적으로 요청받고 응답하는 방식이다
- 공식홈페이지를 통해 더욱 자세한 내용을 확인할 수 있다
++ SPA, CSR, SSR에 대해 알아보기
Page
- pages폴더안의 index.js파일은 루트페이지를 로드하거나 주어진 하위폴더에서 아무것도 슬래시하지 않고 로드 된다
// 예시
pages/index.js => my-domain.com
pages/home/index.js || pages/home.js => my-domain.com/home
pages/home/detail/index.js || pages/home/detail.js => my-domain.com/home/detail- dynamic route : 파일이름에 []대괄호가 있을 경우 nextJS에게 이것이 동적페이지가 될것임을 알려준다
// 예시 [작명].js
// pages/home/[작명].js => my-domain/home/d1
import { useRouter } from 'next/router';
const router = useRouter();
const id = router.query.작명; // id = "d1"- 페이지를 전환할때
a 태그를 이용할경우 새페이지를 로드하기 때문에 Redux 또는 context 등 모든상태를 잃어버린다 따라서Link를 이용해 SPA를 유지해준다 속성은 href를 그대로 이용한다import Link from 'next/link'
✍️ SSG & SSR
- NEXT는 브라우저에 렌더링 할 때 기본적으로
pre-redering(사전 렌더링 : 각 페이지들을 사전에 미리 HTML 문서로 생성하여 가지고 있는 것)을 한다(Good for SEO!)
pre-redering
Static-Site-Generation(SSG): build 시에 HTML을 각 페이지별로 생성하고 해당 페이지로 요청이 올 경우 이미 생성된 HTML 문서를 반환한다.(권장)Server-Side-Rendering(SSR): 요청이 올 때 마다 해당하는 HTML 문서를 그때 그때 생성하여 반환한다.
✍️ Fetch data for pre-rendering
Static Generation
getStaticProps: build 시에 fetch data- 객체를 return하며 값을 props객체로 담아 전달할 수 있다
- revalidate : page re-generate가 일어날 수 있는 시간(초 단위), 전체 사이트를 다시 빌드할 필요 없이 페이지별로 정적 생성을 사용할 수 있다
// 예시
function HomePage(props) {
return (
// ...
);
}
// build시 호출
export async function getStaticProps() {
const res = await fetch('https://.../meetups');
const meetups = await res.json();
return {
props: {
meetups: meetups.map(meetup => ({
title: meetup.title,
address: meetup.address,
// ...
})),
},
revalidate: 1,
};
}
export default HomePagegetStaticPaths: build 시에 fetch data를 기반으로 dynamic route를 지정- paths(필수) : 배열값을 받으며 미리 렌더링되는 키를 결정, 각각의 값 params은 페이지 이름에 사용된 매개변수와 일치해야 한다
- fallback(필수) : 빌드시 생성해놓지 않아 path 페이지가 없을 경우 처리방법, boolean 또는 'blocking' 값
// 예시
function MeetupDetails(props) {
return (
// ...
);
}
export async function getStaticPaths() {
const res = await fetch('https://.../meetups');
const meetups = await res.json();
return {
fallback: true or false or 'blocking',
// params 값은 페이지 이름 meetupId과 동일해야함
paths: meetups.map(meetup => ({
params: { meetupId: meetup._id },
})),
};
}
export async function getStaticProps(context) {
const meetupId = context.params.meetupId;
const res = await fetch(`https://.../meetups/${meetupId}`);
const selectedMeetup = await res.json();
return {
props: {
meetupData: {
id: selectedMeetup,
title: selectedMeetup.title,
// ...
},
},
};
}
export default MeetupDetails;Server-Side-Rendering
getServerSideProps: 각 요청 마다 fetch data
export async function getServerSideProps(context) {
const req = context.req;
const res = context.res;
// fetch data from an API
return {
props: {
meetups: DUMMY_MEETUPS,
},
};
}✍️ API Router
- Next.js 앱안에 API endpoint를 만들수 있다
- pages/api 디렉토리 안에 함수 작성
// 예시
// pages/api/hello.js 만들어 아래 코드를 추가하고
// http://localhost:3000/api/hello => 접속하면 {"text":"Hello"}를 확인할 수 있다
export default function handler(req, res) {
res.status(200).json({ text: 'Hello' })
}
// 예시2
// API 라우트에서 다른 HTTP 메소드를 처리하기 위해 req.method를 사용할 수 있다
export default function handler(req, res) {
if (req.method === 'POST') {
// Process a POST request
} else {
// Handle any other HTTP method
}
}✍️ Deploying
vercel
- nextjs와 같은팀으로 nextjs에 최적화되어있다
- Git과 연동되어 따로 파일을 빌드할 필요없이 프로젝트 폴더를 Git에 push 해준뒤 vercel과 프로젝트폴더를 연동 시켜주면 된다
- 수정사항이 생길경우 수정한뒤 다시 push해주면 알아서 재배포가 된다
코린이