FrontEngineer JungBam

흔히들 사용하는 방법으로 두가지 방법이 있을 수 있다. 1. Socket 통신을 사용하여 지속 연결된 상태에서 변경이 발생할 때에 이벤트를 프론트에 보내주는 방법 2. SSE(server sent event)를 통해서 서버에서 이벤트가 발생했을 때에 프론트가 이벤트를 받는 방법 socket과 sse의 차이점은 socket통신 자체는 양방향 통신이 가능하다는 것이고 sse는 서버에서 클라이언트로 보내주는 단방향 방식이라는 점이다. 양방향 통신을 유지하기 위해서 서버도 클라이언트의 이벤트를 듣기 위해 동작을 해야하는데, 알림과 같은 기능일 경우에는 서버에서 클라이언트에게만 제공하면되기 때문에 양방향으로 구현하기보다 단방향으로 구현하는 것이 더 탁월한 선택입니다. 프론트에서의 SSE 구현 간략히 설명하면 Ev..

이전 글에서 loading UI에 대해서 설명했는데, loading UI는 React 18버전에서 제공하는 Suspense를 통해서 구현된다고 설명했다. 그렇다면 이 Error UI는 어떻게 동작하는 것인지도 간단하게 설명하고 지나가겠다. 이 기능 또한 React에서 제공하는 기능을 통해 구현된 것인데 바로 Error Boundary를 활용한 것이다. React 16버전에 추가된 Error Boundary는 컴포넌트의 자식 컴포넌트에서 Error가 발생하면 Error Boundary의 fallback에 제시된 컴포넌트를 Error UI로 제공한다. 즉 next.js에서 해당 경로에 제시된 error.tsx를 layount.tsx의 Error Boundary fallback에 사용하는 것이다. 아래 코드는..

프론트엔드 작업을 하다보면 데이터를 받아오는 과정에서 로딩하는 동안 클라이언트에게 로딩 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은 필수적이며, 모든 경로에..