분류 전체보기
-
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 ( );..
-
리팩터링 - Guard Clause를 사용하여 코드 가독성 높히기JS & TS 2022. 9. 13. 22:52
리팩터링이란 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법이다 - 리팩터링 2판, 마틴 파울러 수많은 리팩터링 방법 중 하나인 Guard Clause에 대해 소개합니다. Guard Clause는 무엇일까요? A guard clause is simply a check that immediately exits the function, either with a return statement or an exception. Guard Clause 는 반환 문이나 예외를 포함하여 함수를 즉시 종료하는 단순한 검사와 같은 문법입니다. 아래의 코드를 보겠습니다. export function payAmount(employee) { let result; if (e..
-
리액트에서 다수의 체크 박스 다루기React.js & Next.js 2022. 9. 13. 22:25
우리는 사용자에게 선택지를 제공할 때 또는 등을 사용한다. radio의 경우 여러 개의 선택지 중 한 가지를 선택해야 할 때 주로 사용하고, checkbox의 경우 여러 개의 선택지 중 중복 선택이 가능할 때 주로 사용된다고 볼 수 있다. 을 통해 유저의 인터렉션(클릭 이벤트)을 캐치하여 데이터를 생성해야 할 때, checkbox는 사용자의 선택을 배열로 관리하여 데이터화한 이후, 서버 또는 데이터 베이스에 저장하기 유용한 자료구조이다. 이번에는 리액트 프레임워크에서 를 통해 체크 여부를 배열 데이터로 관리하는 방법을 배워볼까 한다. 준비 기본적으로 string으로 구성된 더미 배열을 생성한다. jsx 문법 내부에 생성할 경우, 지속적으로 리 렌더링 되며 초기화될 수 있으므로 컴포넌트 윗부분에 작성하도록..