Next.js입문 2일 차 @fetch, json-server-auth

오늘도 열심히 강의를 들으면서 Next.js의 사용법을 배웠다. 한 번에 배운 내용이 많아서 채 다 정리하지는 못할 것 같아서, 두 가지를 추려서 여기에 정리하고자 한다. 

 

fetch

먼저 fetch이다. 어쩐지 이전에 쓰던 fetch와는 쓰는 법이 좀 다르다 싶었는데, Next.js에서 사용하는 fetch는 Next.js에서 독자적으로 만들어진 것이라고 한다. 그래서 fetch의 옵션에 cache:"no-store"과 같은 것들을 넣을 수 있었던 것 같다. 

 

또 Next.js의 특징은 서버의 기능을 할 수 있다는 것이다. Next.js는 프론트엔드에 치중되어 있으면서도 서버의 기능도 발휘할 수 있어서, router handler라고 부르는 기능을 이용하여 간단하게 서버를 만들 수도 있다. 라우터 핸들러의 사용방법은 어제 배운 폴더 라우팅과 비슷한데, 폴더 라우팅이 경로를 지정해서 page html을 불러오는 것이라면, 라우터 핸들러는 경로를 지정해서 json데이터를 불러올 수 있다. 이전에 해보았듯이 api폴더에 fetch함수들을 모아놓았던 것과 비슷한 구조를 가지고 있는데, import를 따로 하는 게 아니라 경로를 통해 불러올 수 있다는 게 편리해보인다.

 

이렇게 설명을 듣자하니 이러한 라우터 핸들러를 사용하면 json-server를 사용하지 않아도 간단하게 서버를 만들 수 있지 않나 하는 생각이 들었는데, 아무래도 내가 직접 코드를 작성해서 서버를 만들어야 하는 것이라 복잡한 기능을 구현할 수 없다보니 일단은 그냥 json-server를 사용하는 게 맞는 것 같다. 

 

json-server-auth

그리고 위에서 언급한 복잡한 기능이 바로 이 json-server-auth이다. 이는 json-server기반의 인증/인가 라이브러리로, 이전에 사용한 JWT API와 달리 내가 구성한 파일을 기반으로 움직이는 것이라 좀 더 많고 복잡한 데이터를 기반으로 여러 기능을 구현할 수 있을 것 같아 기대가 된다. JWT API는 사용자가 가질 수 있는 정보가 제한되어 있어서 스크랩 기능, 사용자 이미지 등의 기능을 구현하는 데에 큰 어려움을 겪었는데, 이렇게 데이터를 핸들링 할 수 있으면 굉장히 편할 것 같다. 

 

이러한 인증/인가 기능은 Next.js에서 일반적으로 middleware를 통해서 구현한다고 한다. 아래는 한 프로젝트에서 하나만 있어야 한다는 middleware.ts 파일이다.  

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const isLogin = request.cookies.get('accessToken');
  
  if(!isLogin) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

}

export const config = {
  matcher: '/cart',
};

위 로직은 request.cookies.get으로 로그인 시 cookie에 저장하는 accessToken을 가져오고 그 여부에 따라 /cart에 접근하는 것을 차단하고 login화면으로 리다이렉션하는 기능이다. 쉽게 말해 접근권한을 설정한 것이다. 느끼기로는 이러한 부분은 오히려 이전보다 복잡하고 어려워진 것 같지만, 인자로 받는 request에서 활용할 수 있는 데이터가 많아서 다양한 기능을 구현하는 것이 기대되는 부분이기도 하다.