NEXT JS로 간단한 CRUD API 만들어보기(Create)

dao -> services -> controller -> api 폴더 순으로 구조가 이어짐.

DAO ( Data Transfer Object) 계층간 데이터 교환. DB의 데이터에 접근하기 위한 객체를 가리킴. DB에 접근하기 위한 로직을 분리하기 위해 사용된다. 직접 DB에 접근하여 data를 삽입, 삭제, 조회 등 조작할 수 있는 기능을 수행한다.

const userDataBase = [
    {
        idx: 3,
        id: 'promptaction',
        pw: 'password12334',
        name: 'My Name',
    },
]
//새로운 사용자를 생성하는 함수를 선언. 함수는 id, pw, name를 인자로 받음
export const createUser = (name: string, id: string, pw: string) => {
  //새로운 사용자를 나타내는 객체를 생성함.
    const newUser = {
      //새로운 사용자의 고유 인델스로 현재 데이터베이스에 있는 사용자 수에 1을 더한 값으로 생성
        idx: userDataBase.length + 1,
      //함수에 전달된 인자 값들로 초기화된 사용자의 아이디, 비밀번호, 이름
        id,
        pw,
        name,
    }
    //새로운 사용자 객체(newUser)를 'userDataBase'에 추가함. 이렇게 함으로 사용자 데이터베이스가 업데이트됨.
    userDataBase.push(newUser)
  //생성된 사용자 객체를 반환함. 이것은 함수 호출자에게 새로 생성된 사용자 정보를 제공함.
    return newUser
}

services

비즈니스 로직을 다루는데 사용됨. 이 코드에서는 DAO 에서 가져온 createUser 함수를 호출하여 새로운 사용자를 생성함.

import { createUser } from './../dao/user'
// createUserService
// 새로운 사용자를 생성하는 함수. 새로운 사용자의 아이디, 비밀번호, 이름을 문자열로 받음. 
export const createUserService = (id: string, pw: string, name: string) => {
    // createUser함수를 사용하여 새로운 사용자를 생성하고, 그 결과를 newUser 변수에 저장함.
    const newUser = createUser(id, pw, name)
    // 새로 생성된 사용자 객체를 반환함. 서비스 함수를 호출한 곳으로 새로 생성된 사용자 정보를 전달해줌
    return newUser
}

controller

클라이언트로부터의 HTTP 요청을 받아 해당 요청에 대한 응답을 반환하는 역할을 함. 비즈니스 로직이나 데이터 엑세스와 같은 세부적인 구현은 신경쓰지 않고, 단순히 요청을 처리하고 응답을 반환하는 역할을 수행함.

(req:NextApiRequest, res:NextApiResponse) : TypeScript에서 매개변수로 받는 값의 타입을 지정하는 구문. 여기서는 Next.js에서 제공하는 'NextApiRequest', 'NextApiResponse' 타입을 사용함.

req:NextApiRequest : HTTP 요청을 나타내는 객체. Next.js에서 제공하는 특별한 타입으로, HTTP 요청과 관련된 여러 속성과 메소드를 포함하고 있음. 이 객체는 클라이언트로부터의 HTTP 요청에 대한 정보를 담고있음

res:NextApiResponse : HTTP 응답을 나타내는 객체. HTTP 응답과 관련된 여러 속성과 메소드를 포함하고 있음. 이 객체를 사용해서 서버로 클라이언트로 응답을 보낼 수 있습니다.

req.body : HTTP POST 요청이나 PUT 요청과 같이 클라이언트가 서버로 데이터를 전송하는 경우에, 그 데이터를 담고 있는 부분을 나타냄. 이 속성은 HTTP 요청의 본문(body)에서 해당하는 부분으로, 클라이언트가 전송한 데이터를 받아오는데 사용됨.

const { id, pw, name } = req.body
이부분은 HTTP POST 요청에서 전송된 데이터를 추출하기 위해 비구조화 할당(destructruing assignment)를 사용하고있음. 클라이언트에서 전송한 데이터가 JSON 형식으로 온 경우라면 'req.body'는 해당 JSON 객체를 나타냄. 그리고 이를 비구조화 할당을 통해 id, pw, name 등의 변수에 각각 할당함.

예를들어

{
    "id": "example_id",
    "pw": "example_password",
    "name": "John Doe"
}

과 같은 JSON 데이터를 POST로 보낸다고 가정하면
req.body는

{
    "id": "example_id",
    "pw": "example_password",
    "name": "John Doe"
}

과 같응 객체가 됨.
따라서 const { id, pw, name } = req.body 는 JSON 데이터에서 id, pw, name 에 해당하는 값을 추출하는 것.

import type { NextApiRequest, NextApiResponse } from 'next'
import { createUserService } from '@/services/readUser'
// import로 /service/readUser 에서 createUserService 함수를 가져옴
// createUserController를 export로 내보내줌.
// 이 함수는 Next.js의 API 라우트에서 사용될 것임. HTTP 요청(req)과 응답(res) 객체를 매개변수로 받음.
export const createUserController = (
    req: NextApiRequest,
    res: NextApiResponse
) => {
    // HTTP 요청의 메소드가 POST 인지 확인함. POST 일 경우에만 조건문을 실행함.
    if (req.method === 'POST') {
        // req.body에서 id, pw, name 을 추출함. 클라이언트에서 전송된 HTTP POST 요청의 본문에서 이 데이터를 가져옴.
        const { id, pw, name } = req.body
        // createUserService 서비스 함수를 호출해서 새로운 사용자를 생성하고 그 결과를 newUser변수에 저장함.
        const newUser = createUserService(id, pw, name)
        // 새로 생성된 사용자 정보를 JSON 형식으로 응답함.
        // HTTP 상태 코드는 '201 created'로 설정됨.
        // 클라이언트는 새로운 자원이 성공적으로 생성됬다는 것을 나타내는 이 코드를 받게됨.
        res.status(201).json({ user: newUser })
        // POST 이외에 다른 HTTP 메소드로 요청이 오면 '405 Method Not Allowed' 상태 코드로 응답함.
        // 이 엔드포인트가 POST 요청만 허용하고 다른 메소드는 허용하지 않음을 나타냄.
    } else {
        res.status(405).json({ error: 'Method Not Allowed' })
    }
}

API Handler

API Handler는 클라이언트에서 서버로 HTTP 요청이 발생했을 때, 해당 요청을 처리하고 적절한 응답을 반환하는 함수 또는 코드 블록을 나타냄. API 라우트의 핵심 부분이며 서버사이드에서 동작하는 javaScript 코드를 실행하여 다양한 기능을 수행함.

Next.js 의 API Handler는 'pages/api' 디렉토리 안에 위치한 파일들로 정의됨. Next.js가 자동으로 인식하고 서버사이드 로직 구현이 가능함.

API 라우트는 클라이언트에서 서버로의 API 요청에 대응하여 서버사이드 로직을 수행하고 응답을 반환하는 역할을 하는 경로 또는 엔드포인트를 지치앟ㅁ. 'pages/api' 디렉토리에 위치한 파일들이 API 라우트로 사용되며, 자동으로 인식됨.

Next.js는 API 라우트를 자동으로 생성하여 서버에 등록하고, 클라이언트의 API 요청에 대응할 수 있도록 함. 이렇게 구성된 API 라우트는 서버사이드 렌더링(SSR)이나 데이터 요청에 사용되며, 클라이언트와 서버 간의 효율적인 통신을 가능하게 함.

import type { NextApiRequest, NextApiResponse } from 'next'
import { createUserController } from '@/controllers/readUser'
export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    if (req.method === 'POST') {
        createUserController(req, res)
    } else {
        res.status(405).json({ error: 'Method Not Allowed' })
    }
}

Postman으로 돌려보면

성공