Next.js
1.💣 Next.js_01 Intro, Page layout
React 기반의 프레임워크폴더 및 파일 기반으로 라우팅 지원서버 사이드 렌더링을 지원리액트는 서버사이드렌더링 구현이 어렵다.컴파일과 번들링이 자동으로 된다.webpack, barbel자동 리프레시 기능으로 수정하면 화면에 바로 반영서버 사이드 렌더링 지원스태틱 파일
2.💣 Next.js_02 Dynamic Routes, next/link
API 호출을 하기 위해 axios 설치API 호출 확인useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기useEffect를 이용하여 컴포넌트가 마운트 됐을 때(처음 나타났을 때)언마운트 됐을 때(사라질 때)업데이트 되었을 때(특정 props가 바
3.💣 Next.js_03 Server-side Rendering/SSR
API 호출을 통해 데이터를 받아올 때, 로딩 화면을 사용자에게 보여준다.해당 코드에서 궁금했던 부분왼쪽 화면이 {!isLoading} 적용 전 / 오른쪽 화면이 적용 후 => {!isLoading} 을 작성하지 않아도 같은 화면을 보여준다고 생각했는데 아래에 가려져
4.💣 Next.js_04 Custom Error Page, Environment Variables
404 page는 자주 사용되는 에러 페이지 => 자주 사용되는 에러 페이지를 서버에서 렌더링 하면 서버의 부하가 증가 => 이로인해 비용이 증가하고, 사용자들은 느리다는 느낌을 받는다.Next.js는 static 404 page를 제공=> 아무런 추가 작업 없이 de
5.💣 Improved next/link: Simplified API with automatic <a> | Next.js 13
NavigationBar를 생성하여 페이지에 적용했다.에러가 발생했다. 왜죠????
6.💣 Warning : React dose not recognize the '...' props on a DOM element. | Next.js
나는 왜 네비게이션 바만 만들면 에러를 만나는걸까..?
7.Middleware | Next.js
미들웨어는 소프트웨어 시스템에서 요청과 응답 사이에 위치하여 중간 처리를 수행하는 소프트웨어 구성 요소!
8.Emotion 컴포넌트를 일반 CSS 선택자로 사용하기 | Next.js
Next.js 프로젝트에 emotion 설정하기
9.next/image 반응형 적용하기 | Next.js 13
next/image 반응형 적용하기 | Next.js 13
10.Portal을 이용하여 Modal 구현하기 | Next.js
Portal을 이용하여 Modal 구현하기 | Next.js
11.useSession.update를 이용한 사용자 정보 수정하기 | Next Auth
useSession.update를 이용한 사용자 정보 수정하기 | Next Auth
12.getServerSideProps with TypeScript | Next.js
getServerSideProps with TypeScript | Next.js