next.js
1.[Next.js, TailwindCSS] app setup
Next.js 앱 설치
2.[Tailwind CSS] Usage
Tailwind CSS 사용
3.[Tailwind CSS] Usage_2
TailwindCSS
4.[Prisma]
Prisma는 Javascript 혹은 Typescript로 데이터베이스를 다룰 수 있게 교량 역할을 하는 ORM(Object Relational Mapping)이다.
5.[PlanetScale]
MySQL과 호환되는 Serverless 데이터베이스 플랫폼
6.[React Hook Form]
React에서 Form을 더 쉽게
7.[Next.js] api
api of next.js
8.[Next.js] import paths
"../../../" 같은 호출 대신 "@dir/"처럼 깔끔한 경로 표시 가능
9.[Prisma] 여러 기능
Prisma 여러 기능
10.[Next.js] SWR
SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략이다.api로부터 데이터를 fetch하기 위해 url과 fetcher 함수가 필요하다.url은 주소와 동시에 useSWR 내의 key역할을
11.[SWR] mutate
데이터 변경을 위한 SWR 함수
12.[prisma] _count
릴레이션을 맺은 데이터의 개수를 세기 위해 사용
13.[Prisma] @relation(name), enum
[Prisma] @relation(name), enum
14.[Prisma] 기존 모델에 새 속성 추가
prisma 기존 모델에 새 속성 추가 시 오류 해결 방법
15.[SWR] serverless Real-Time
serverless 환경에서 Real-Time인 척 도와주는 함수
16.[Prisma] 데이터베이스 시딩(Database seeding)
prisma에 더미데이터 씨앗 뿌리기
17.[PlanetScale] DB 연결 오류
pscale connect DB => auth error => pscale auth login => confirm
18.[SWR] Pagination
useSWR과 useSWRInfinite를 이용한 pagination
19.[React Hook Form] 이미지 업로드 및 미리보기
useForm을 이용한 이미지 업로드 및 미리보기
20.[Cloudflare] Direct Creator Upload
Cloudflare는 인터넷에 연결하는 모든 것을 안전하고 비밀을 유지하면서 신속하고 안정적으로 연결하도록 설계된 전역 네트워크이다.
21.[Next.js] Image Component
Next.js의 이미지 컴포넌트
22.[Cloudflare] Live Stream
Cloudflare의 Stream service
23.[Next.js] middleware
미들웨어(middleware) : 처음 유저가 보낸 요청과 종착지 사이에 있는 소프트웨어
24.[Next.js] Dynamic Import
Dynamic Import
25.[Next.js] _document
_document
26.[Next.js] Script Component
Script Component
27.[Next.js] getServerSideProps
클라이언트 사이드에서 로딩 페이지를 보여주지 않고, 데이터가 로드 되었을 시 한 번에 완전한 페이지를 보여주려고 할 때 사용함
28.[Next.js] getStaticProps
정적 페이지를 만들 때 사용
29.[Next.js] getStaticPaths
변수가 있는 정적 페이지의 경로를 만들 때 사용
30.[Next.js] dangerouslySetInnerHTML
dangerouslySetInnerHTML
31.[Next.js] ISR
Incremental Static Regeneration
32.[Next.js, PlanetScale, Prisma] Deploy
Deploy
33.[Vercel] Deploy
Vercel로 Deploy
34.[Next.js, react-md-editor] Next.js에서 Markdown Editor 사용하기
react-md-editor for React
35.[SWR] stale-while-revalidate
vercel에서 개발한 라이브러리인 SWR은 캐시 무효화 전략 중 하나인 stale-while-revalidate의 방법을 차용해 컴포넌트 별 데이터를 최신으로 유지한다.
36.[Next.js] Intersection Observer로 요소 감지하기
Intersection Observer API - 타겟 요소와 (최)상위 요소 사이의 교차점 변화를 비동기적으로 관찰하는 방법
37.[Next.js] Intersection Observer로 무한 스크롤 구현하기
Intersection Observer로 구현한 무한 스크롤
38.[Next.js] 자동 완성 검색 리스트 구현
Next.js/React로 만든 자동 완성 검색 리스트
39.[Vercel] 배포 에러
Error : Module '"path"' has no exported member 'A'. Error : Cannot find module 'path' or its corresponding type declarations.
40.[Next.js] SSR Error (React18 error #423, #418, #425)
SSR에서 서버와 클라이언트 간에 렌더링이 다를 경우 발생
41.[Vercel] 자동 배포 태클 걸기 (Ignored Build Step)
작업 중인 폴더/파일 제외하고 커밋을 비교하여 자동 배포를 무시하는 방법