React.js & Next.js
-
Next.js - next/image blur 사용하기React.js & Next.js 2022. 10. 19. 22:47
이전 게시글과 이어집니다! Next.js - SSG, getStaticProps Data Fetching: getStaticProps | Next.js Data Fetching: getStaticProps | Next.js Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js. n.. junheedot.tistory.com next/image 에서 제공하는 property인 placeholder=’blur’와 blurDataURL={ … }을 사용한다면, 블러를 통해 빈 이미지 공간을 이미지가 렌더링 될 때까지 효율적으로 제어할 수 있습니다. 하지만 다음..
-
Next.js - middleware 사용하기 (로그인 연동하기)React.js & Next.js 2022. 9. 25. 21:49
이번 로그인 연결은 세션을 사용하기로 하였다. 웹 브라우저에서는 직접적으로 세션 ID 에 접근이 불가능하지만, 세션 쿠키에 들어있을 경우 자동으로 인식하여 헤더에 넣어 보내주기 때문에 로그인 로직을 구현하는데 문제가 되지 않았다. 시나리오에 사용되는 페이지는 다음과 같다 sign_up (회원가입 페이지) sign_in (로그인 페이지) welcome (로그인 시 접근하는 페이지) 해당 페이지에 미들웨어를 연동하여, 다음 상황을 구현할 것이다 로그인한 이후 /sign_in 페이지에 접근할 경우, /welcome 페이지로 보내주기 로그인하지 않은 경우 /welcome 페이지에 접근할 경우, /sign_in 페이지로 보내주기 따라서 미들웨어에서는 각각의 페이지에 대한 정보를 먼저 받아야 하고, 이를 미들웨어에..
-
Next.js - middleware 사용하기 (기본편)React.js & Next.js 2022. 9. 25. 21:37
Advanced Features: Middleware | Next.js Advanced Features: Middleware | Next.js Learn how to use Middleware to run code before a request is completed. nextjs.org nested-middleware | Next.js nested-middleware | Next.js Nested Middleware You are defining a Middleware file in a location different from /middleware , which is not allowed. While in beta, a Middleware file under specific pages would on..
-
Next.js - 스타일드 컴포넌트에 SSR 적용하기React.js & Next.js 2022. 9. 25. 21:33
Global style 및 헤더 컴포넌트에 SSR 적용하기 레퍼런스 next.js/examples/with-styled-components at canary · vercel/next.js GitHub - vercel/next.js: The React Framework The React Framework. Contribute to vercel/next.js development by creating an account on GitHub. github.com Start 기본적으로 Next.js 에서 SSR 을 공식적으로 지원하는 라이브러리는 다음과 같습니다. Examples Styled JSX Styled Components Emotion Linaria Tailwind CSS + Emotion Styletr..
-
Next.js - CSR, Client side data fetchingReact.js & Next.js 2022. 9. 18. 20:43
Data Fetching: Client side | Next.js Data Fetching: Client side | Next.js Learn about client-side data fetching, and how to use SWR, a data fetching React hook library that handles caching, revalidation, focus tracking, refetching on interval and more. nextjs.org Client-side 데이터 패칭은 SEO 인덱싱이 필요 없는 페이지에서 유용합니다. 해당 상황의 경우에는 너의 data를 pre-render 할 필요도 없고, 페이지가 빈번히 업데이트되야 할 것입니다. 서버-사이드 렌더링 API 들과 다르..
-
Next.js - SSG, getStaticPropsReact.js & Next.js 2022. 9. 18. 20:39
Data Fetching: getStaticProps | Next.js Data Fetching: getStaticProps | Next.js Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js. nextjs.org 정의 getStaticProps 메서드를 export 한다면, Next.js 는 getStaticProps 에 의해 반환되는 props를 빌드 타입에 프리-렌더할 것입니다. export async function getStaticProps(context) { return { props: {}, // will be passed to the p..
-
Next.js - SSR, getServerSideProps 적용하기React.js & Next.js 2022. 9. 18. 20:30
Data Fetching: getServerSideProps | Next.js Data Fetching: getServerSideProps | Next.js Fetch data on each request with `getServerSideProps`. nextjs.org 정의 getServerSideProps 라는 함수를 한 페이지 내부에서 export할 경우, Next.js는 getServerSideProps 에 의해 반환되는 각 페이지 별 요청에 따른 데이터를 pre-render 할 것입니다. export async function getServerSideProps(context) { return { props: {}, // will be passed to the page component as p..
-
Next.js - 초기화 이후 기본 구조 설정하기React.js & Next.js 2022. 9. 18. 20:15
구성 요소 📁 pages 폴더 안에는 넥스트에서 중요한 역할을 하는 특별한 파일들이 있습니다. 📙 _app.jsx (tsx) 📙 _document.jsx (tsx) 📙 _error.jsx (tsx) 📙 404.jsx (tsx) 📙_app.jsx App 컴포넌트는 모든 페이지의 공통 페이지 역할을 합니다. App 컴포넌트를 이용하여 모든 페이지들을 초기화하여 다음과 같은 역할을 할 수 있습니다. 페이지들의 공통된 레이아웃 페이지를 탐색할 때 상태 유지 추가 데이터를 페이지에 주입 글로벌 CSS 추가 📁 pages/_app.jsx import Header from '../components/Header'; const MyApp = ({ Component, pageProps }) => { return ( );..