• 다음으로 백엔드를 만들겠습니다.

  • 벌써부터 낯설 수 있습니다. 백엔드는 배워본 적도 없으며, 프론트 엔드와는 어떻게 다르지? 라고 생각할 수 있습니다.
  • 코드잇 강의에서 pages/api/short-links.js를 통해 api 라우트를 만들었을 것입니다. 이것도 하나의 “백엔드”라고 보시면 됩니다.
  • 쉽게 말해, pages/api/short-links.js에서 mongoose의 캐싱 db를 접근하도록 새로운 인터페이스(혹은 엔드포인트)를 만드는 것입니다.
  • 지금까지는 만들어 놓은 api를 fetch 한 후, → 이를 컴포넌트 혹은 커스텀 훅에서 호출하는 형태를 띄었을 것입니다.
  • 그러나, 현재는 api를 직접 설계하고 인터페이스를 만든 후, → 직접 만든 api를 컴포넌트, 훅에 연결하는 작업을 한다고 이해하시면 됩니다.

• next 13에서는 page에 api Routes를 사용하지 않습니다. 자세한 내용은 https://nextjs.org/docs/app/building-your-application/routing/route-handlers를 참고해 주세요.

• 조금 더 상세히 설명하자면, next 13 에서는 app/api/[폴더명]/route.ts를 통해 api CRUD 동작을 수행하도록 합니다.

• 또한, 폴더 명이 url로 정의됩니다. (파일 명은 route로 고정)

• page 라우팅의 handler() 함수와는 다르게 GET, POST 함수로 마치 “백엔드 프레임워크”처럼 CRUD 동작을 직접 지정합니다.

• 이제 코드를 보겠습니다.

import dbConnect from '@/db/dbConnect';
import { NextResponse } from 'next/server';
import mongoose from 'mongoose';

export async function GET() {
    try {
        await dbConnect();
        console.log(mongoose.connection.readyState);
    } catch (error) {
      console.log(error);
    }
}

• 사용하는 방법은 무척 간단합니다. dbConnect() 를 통해, 전역 객체로 선언된 mongoose 객체의 연결을 확인하고, 연결이 끊기는지 확인합니다. (물론 해당 코드의 결과는 “1”이 출력되고, Response를 선언하지 않았다고 에러가 발생합니다. 다만, 지금 작성한 코드는 단순하기 “1”이 출력되는지를 확인하는 코드로 생각하시면 됩니다.)