NextJS
1.Next.js 시작하기
NextJS는 리액트 프레임워크이며 리액트에 빌드된다.NextJS는 풀스택 리액트 프레임워크이기 때문에 리액트로 풀스택 어플리케이션을 만드는 과정을 단순화 시켜준다.리액트를 기반으로 구축한 다음 리액트로 풀스택 어플리케이션을 구축하는 과정을 대폭 간소화한다.리액트로 풀
2.React 복습하기
그동안 배웠던 리액트에 대해 복습한 내용입니다!
3.NextJS 핵심
NextJS의 기본 핵심에 대해서 다뤘습니다.
4.프로젝트 : Foodies 앱 - 1
Next.js를 자세히 배우기 위해 Foodies 프로젝트를 진행하였습니다.
5.프로젝트 : Foodies 앱 - 2
Next.js를 자세히 배우기 위해 Foodies 프로젝트를 진행하였습니다. Foodies앱 -1의 연장선 상의 프로젝트 내용입니다!
6.프로젝트 : Foodies 앱 - 3
Next.js를 자세히 배우기 위해 Foodies 프로젝트를 진행하였습니다. Foodies앱 -1,2의 연장선 상의 프로젝트 내용입니다!
7.페이지 & 파일 기반 라우팅
Next.js의 페이지 & 파일 기반 라우팅에 대해서 다뤘습니다. 간단한 개요 정도의 내용입니다!
8.프로젝트 : 파일 기반 라우팅 앱
파일 기반 라우팅에 대한 연습을 위해서 진행한 프로젝트입니다!
9.페이지 사전 렌더링 & 데이터 Fetching
Next.js의 페이지 사전 렌더링과 데이터 fetching에 관한 내용으로 getStaticProps, getStaticPaths, getServerSideProps와 함께 useSWR에 대해서 다뤘습니다!
10.프로젝트 : 페이지 사전 렌더링 & 데이터 페칭
페이지 사전 렌더링과 데이터 페칭에 대해서 연습하기 위해서 프로젝트를 진행했습니다!
11.NextJS 앱 최적화하기
Next.js 어플리케이션에서 Head, Image 컴포넌트를 이용해 최적화하는 방법에 대해서 알아보았습니다.
12.API 라우트를 통해 백엔드 코드 추가하기
Next.js의 API 라우트를 통해서 fetch API 도입하기
13.프로젝트 : API 라우트
API 라우트, MongoDB를 이용하여 fetch API를 구현하였습니다.
14.앱 전반의 상태 작업하기(React Context)
Next.js에서 React Context를 이용하여 상태 관리를 한 내용을 담았습니다.
15.완성형 어플리케이션 : 블로그 구축하기 - 1
그동안 배운 Next.js를 이용해서 블로그를 만들어보는 프로젝트를 진행했습니다!
16.완성형 어플리케이션 : 블로그 구축하기 - 2
그동안 배운 Next.js를 이용해서 블로그를 만들어보는 프로젝트를 진행했습니다! 특히 이번 포스팅은 마크다운을 이용해서 post-detail, content 페이지를 작성하는 방법에 대해서 다루었습니다!
17.완성형 어플리케이션 : 블로그 구축하기 - 3
그동안 배운 Next.js를 이용해서 블로그를 만들어보는 프로젝트를 진행했습니다! 특히 이번 포스팅은 Contact에서 api/contact를 통해 mongodb로 데이터를 fetch하는 방법과 메타데이터 추가, portal 사용하기에 대해서 다뤘습니다!
18.NextAuth.js를 이용한 인증 - 1
NextAuth.js를 이용하여 인증(Authentication)하는 방법을 배웠습니다.
19.NextAuth.js를 이용한 인증 - 2
NextAuth.js를 이용하여 인증(Authentication)하는 방법을 배웠습니다.
20.[Next.js v14] 라우팅 및 페이지 렌더링 - 1
Next.js의 14버전에서 라우팅 및 페이지 렌더링에 대해 다루었습니다. 특히 병렬 라우트 설정과 사용 방법이 나와있습니다.
21.[Next.js v14] 라우팅 및 페이지 렌더링 - 2
Next.js의 14버전에서 라우팅 및 페이지 렌더링에 대해 다루었습니다. 특히 인터셉팅 라우트와 라우트 그룹, 라우트 핸들러, 미들웨어에 대해 다루었습니다.
22.[Next.js v14] 데이터 가져오기(Fetching)
Next.js의 14버전에서 데이터 가져오기(Fetching)에 대해 다루었습니다.
23.[Next.js v14] 데이터 변이(Data Mutation)
Next.js의 14버전에서 데이터 변이(Mutation)에 대해 다루었습니다. + 프로덕션 과정에서 revalidatePath를 이용해 재검증
24.[Next.js v14] 캐싱 이해 및 구성하기
Next.js의 14버전에서 캐싱에 대해 다루었습니다.
25.[Next.js v14] Next.js 최적화
Next.js의 14버전에서 최적화하는 방법에 대해 다루었습니다.
26.[Next.js v14] 사용자 인증(Authentication)
Next.js의 14버전에서 사용자 인증에 대해 다루었습니다. 'Lucia' 패키지 사용