FrontEngineer JungBam

프론트엔드 작업을 하다보면 데이터를 받아오는 과정에서 로딩하는 동안 클라이언트에게 로딩 UI를 제공하는 것에 대하여 고민을 하게 된다. next에서는 아주 간단하게 로딩 UI를 제공할 수 있는데 그 방법에 대해서 알아보자. React를 공부하고 next.js를 공부하는 사람들에게 이 로딩 UI가 동작하는 방법을 간단하게 설명해주면 React 18에서 제공하는 Suspense를 통해서 동작한다. React에서는 React.lazy()와 Suspense를 통해 레이지 로딩되는 것에 대한 로딩 처리를 해주는데 이 방식을 next.js에서는 매우 간단하게 구현이 가능하도록 만들어 놓은 것이다. export default function Loading() { // Or a custom loading skeleto..

가장 눈에 띄게 바뀐 부분은 바로 각각의 메쏘드에 따른 처리방식이다. 기존에 request로 들어온 method를 비교해서 처리하던 방식에서 node나 express에서의 라우터 처리방식처럼 get, post, put, patch, delete에 대하여 각각 다른 함수 내에서 처리되도록 변경되었다.(아래 공식문서 예제 코드 참고) import { NextResponse } from 'next/server' export async function GET() { const res = await fetch('https://data.mongodb-api.com/...', { headers: { 'Content-Type': 'application/json', 'API-Key': process.env.DATA_AP..

혹시, ISR이 정확히 뭔지 모른다면 지난 포스팅을 참고하면 좋겠다. next.js와 리액트 next.js는 리액트의 프레임워크! 그렇다면 리액트는? 라이브러리(UI, 상태관리, 라우팅 등에 대한) 그럼 먼저 프레임워크와 라이브러리의 차이에 대해서 알아봐야겠군! 프레임워크와 라이브러리의 infomationjunk.tistory.com next에서 ISR을 구현하기 위해서는 간단한 코드 추가만으로도 가능한데 reavalidate를 설정해주는 것으로 SSG를 ISR로 동작하도록 바꾸어준다. 아주 간단하다. 아래의 코드는 60초마다 SSG를 재생성하도록 하는 ISR을 구현하는 코드인데, 이 코드를 ISR로 동작하기 원하는 컴포넌트 상단에 작성해주면 끝난다. export const revalidate = 60;..

next 13에서의 렌더링 방식에 대해서 다뤄볼 생각이다.(with ellie 강의) 기존에 next12 버전까지는 렌더링 방식이 페이지 단위로 지정이 되었지만, next13 버전에서부터는 컴포넌트 단위로 렌더링이 진행됨에 따라 하나하나의 컴포넌트에 맞춰 렌더링 방식을 결정하고 개발을 해야하는데, 컴포넌트 단위로 렌더링 방식을 결정한다면 과연 SSR 페이지 안에 CSR로 작성된 컴포넌트는 어떻게 동작할까? 아래 코드는 간단한 카운터 예제인데 useState, useEffect, 마우스 이벤트를 포함한 인터렉션 들이 발생하면 해당 컴포넌트는 아래와 같이 'use client'를 명시하여 next가 CSR로 동작하도록 알려줘야 한다. 이러한 동작들은 브라우저가 하는 일이기 때문에 서버 사이드에서 조작할 수 ..

app 라우팅 장점 페이지별 렌더링 방식에서 컴포넌트별 렌더링으로 변경됨에 따른 각 컴포넌트별 처리가 가능 페이지 별로 로딩하던 것을 더 작은 UI 구성 요소로 분할해 컴포넌트 별로 렌더링 방식을 결정하고 로딩하는 방식으로 바뀜. 컴포넌트의 기본값을 서버 컴포넌트로 설정하는 것을 통해 SSR의 장점을 가져가는 한편, 준비되는 UI를 점진적으로 로드함으로써 TTV와 TTI간의 간격에 대한 SSR단점도 보완 page 디렉토링에서 getServerSideProps() 함수를 통해 SSR을 개발자가 하나하나 구현했다면 app 디렉토링은 기본값이 ssr로 구현됨. layout 컴포넌트 활용 : 재사용 가능한 UI 공유 에러 핸들링 단점 github next팀의 QA 팀으로 합류(안정성 문제) https://git..

layout이 무엇인가? 공식문서에 친절하게 잘 설명되어 있어서 공식문서 내용을 가져왔다. 설명에서 가장 중요한 부분은 공유되는 UI 인데 즉, 해당 경로와 (하위 경로에 다른 layout이 없는 경우)하위 경로에 공유할 수 있는 말그대로 레이아웃 컴포넌트인 것이다. 우리가 리액트로 개발할때 Header와 Footer를 BrowserRoute에서 처리했던 것 같이 말이다. 하위 경로에 layout이 있다면 그 경로와 그 경로 아래에서는 하위 경로에 있는 layout을 참조하게 된다. root layout 넥스트 앱을 생성하면 app 경로에 layout.tsx 파일이 생성되는데 이 app 폴더에 있는 최상위 layout을 root layout이라고 한다. 이 root layout은 필수적이며, 모든 경로에..

404 처리하기 위해서 notFound 컴포넌트를 활용하기! 기본적으로 next.js에서는 경로가 잘못되면 404페이지를 제공한다. next 13.3버전 이후에는 app 경로에 있는 not-found.tsx 파일로 404페이지를 커스텀 할 수 있도록 바뀌었다. 404를 제외하고도 개발자가 처리할 수 있는데 next/navigation에 notFound함수를 import 해서 활용할 수 있다. import { notFound } from "next/navigation"; export default function Home() { notFound(); return ; } notFound() 함수를 호출하면 아래와 같이 네트워크 창에서 404에러를 발생시키는 것을 알 수 있다. notFound() 함수는 자신..

리액트로 개발을 하다가 next.js로 개발을 시작하면 가장 크게 와닿는 부분이 바로 라우팅 방식이다. 리액트는 자체적으로 라우팅을 제공하지 않기 때문에 react-router-dom을 활용하여 라우팅을 하지만 next.js는 이전 12버전까지는 pages 디렉토링을 통해, 13버전부터는 app 디렉토링을 통해 라우팅 기능을 제공한다. next.js에서 기본적으로 제공되는 라우팅 방식이 어떤지 확인해보자. 라우팅이 뭔데? 아주 쉽게 말하면 우리가 브라우저 주소창에 적는 경로를 의미한다. 예를 들어, 도메인/contact/next 주소로 접속을 하려고 하면 서버에서는 contact/next 라는 api에 맞는 화면을 제공하는 것을 이야기한다. 리액트에서는 Route 라는 컴포넌트의 path 속성을 통해서 ..