[Next.js 챌린지] DAY1

정재은·2024년 9월 9일

Next.js 챌린지

목록 보기

1/16

Next.js가 업데이트 되면서 페이지라우터가 앱라우터로 변경되었는데
페이지라우터의 단점을 개선한 것이 앱라우터이기 때문에 두가지 다 알아두기!

프레임워크

프레임워크가 제공하는 기능을 이용하거나 허용하는 범위 내에서만 사용 가능
ex ) Next.js가 제공하는 라우터 - pageRouter, appRouter 사용
자유도가 높다 = 기본적으로 제공되는 기능↓

라이브러리

브라우저의 요청에 이미 렌더링이 완료된 HTML을 응답하는 렌더링 방식
CSR(Client Side Rendering)의 단점을 효율적으로 해결하는 기술

CSR이 뭔데?
React의 기본적인 렌더링 방식으로, 클라이언트(브라우저)에서 직접 화면을 렌더링 하는 방식
장점 : 초기 접속 이후의 페이지 이동이 매우 빠르고 쾌적
단점 : 초기 접속 속도가 느리다

FCP(First Contentful Paint) : 요청 시작 ~ 컨텐츠가 화면에 나타나는데 걸리는 시간

JS 실행 렌더링? 화면에 렌더링?
① JS 실행 렌더링 : JS코드를 HTML로 변환하는 과정
② 화면에 렌더링 : HTML코드를 브라우저가 화면에 그려내는 작업

즉, Next.js는 React의 단점을 보완한 확장판이며
기존 React의 단점인 느린 FCP를 빠르게 달성할 수 있고
기존 React의 장점인 빠른 페이지 이동이 가능하다

https://supabase.com/
회원가입만 진행해도 사용가능한 클라우드 서비스
데이터베이스를 무료로 2개까지 생성 가능

https://github.com/winterlood/onebite-books-server
백엔드 서버 코드 다운로드 → 압축 풀기 → VSCode에서 오픈
supabase 회원가입 → Dashboard → New Project 클릭
Project name, Database Password, Region 입력 및 설정 → Create new project 클릭
(password는 나중에 필요하니 꼭 적어두기)
백엔드 서버와 supabase 연결하기
4-1. Project Settings 클릭 → Database 클릭 → Mode : Session mode로 변경
→ Connection string 복사

4-2. VSCode에서 .env 파일 생성 → DATABASE = "Connection string" 입력
Connection string에서 [YOUR-PASSWORD] 를 지우고
위에서 설정한 Database Password 입력
(password가 포함된 Connection string은 외부에 노출되지 않도록 주의)
의존성 설치
$ npm i
supabase DB 초기화
$ npx prisma db push
supabase에서 Table Editor 클릭 → Book, Review 생성 확인 가능
초기데이터 랜덤으로 채워넣기 (강사님께서 만들어두신 기능)
$ npm run seed
supabase에서 채워진 데이터 확인 가능
빌드하기
$ npm run build
백엔드 서버 가동하기
$ npm run start
접속 → localhost:12345
API 문서 확인 → localhost:12345/api
백엔드 서버 종료하기
Ctrl + C
현재 서버가 사용중인 데이터를 조회할 수 있는 페이지
$ npx prisma studio
접속 → localhost:5555