[NextJS AppRouter] 초간단 API Mocking 하기(with Route Handlers)

2023. 9. 28. 20:59·Development Study/Frontend
728x90

.with Route Handlers
목표 : (구) API Routes라고 불리는 현 Route Handler를 활용해서 API를 Mocking해보자
Framework : NextJS 13(App Router)

여기서 사용 할 예시 API는 POST api/v1/users/login 로그인 기능이다.
돌아가는 지 확인만 해 볼 예정으로 간단하게만 mocking 해 볼 예정


1. app directory에 api 경로 생성

우선, API 명세서의 엔드포인트에 맞게 경로를 생성한다.
app directory 내부에 다음과 같이 생성한다.

app
 ┗ api 
 ┃ ┗ v1
 ┃ ┃ ┗ users
 ┃ ┃ ┃ ┣ login  
 ┃ ┃ ┃ ┃ ┗ route.ts

만약 엔트포인트 끝에 id와 같은 특정 값이 들어오는 경우

  • route.ts -> [id].ts 로 변경한다

2. route.ts 파일 작성

route.ts 에 mocking 한 데이터와 로직을 작성한다.
[[Route Handlers]] 활용하여 로직을 작성하였다.

  • 로직은 API 명세서에 맞게 작성하면 된다.
// app/api/v1/users/login/route.ts

export async function POST(request: Request) {
  const { user_email, password } = await request.json()

  // 실제 데이터베이스 로직 대신 mock 데이터를 사용합니다.
  const mockUsers = [
    {
      user_email: 'existing@example.com',
      password: 'password123',
      user_uid: 'adadsdasdasd33',
    },
  ]

  const user = mockUsers.find((u) => u.user_email === user_email && u.password === password)

  if (!user) {
    return new Response(
      JSON.stringify({
        message: '유저 등록이 안돼있음.',
        result: null,
      }),
      {
        status: 202,
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
        },
      },
    )
  }

  // 유저를 찾았을 경우 로그인 성공 메시지를 반환합니다.
  return new Response(
    JSON.stringify({
      message: '로그인 성공',
      result: {
        user_uid: user.user_uid,
        // 필요한 다른 데이터도 이곳에 추가할 수 있습니다.
      },
    }),
    {
      status: 200,
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
      },
    },
  )
}

3. Postman을 활용해서 API Mocking 확인해보기

이제, Postman을 활용하여 mocking이 정상적으로 처리되는 지 확인해보자

  1. POST http://localhost:3000/api/v1/users/login 설정하기
    • 위 URL은 프로젝트, API에 따라 유동적으로 입력 할 것
  2. Body -> raw -> JSON 선택하기
  3. 데이터 입력하기
    • 이 데이터 또한 API 명세에 맞게, 작성한 Mock data에 따라 적절하게 입력해볼 것
{
  "user_email": "existing@example.com",
  "password": "password123"
}
  1. 결과 확인하기
{
    "message": "로그인 성공",
    "result": {
        "user_uid": "adadsdasdasd33"
    }
}
  1. 이제, Mocking을 활용해서 병렬적으로 개발해보자!

References

https://nextjs.org/docs/app/building-your-application/routing/route-handlers

728x90
저작자표시 비영리 변경금지 (새창열림)

'Development Study > Frontend' 카테고리의 다른 글

[Automatic Batching] 리액트 18에 등장한 렌더링 묶음판매  (1) 2023.10.06
UI 버벅임은 이제 그만! Web Worker 를 적절히 이용하여 UX 증진시키기  (0) 2023.10.06
클라이언트까지 꼭 데이터가 와야할까? RCS(React Server Components)에 대해 알아보자  (0) 2023.09.28
[Next.js App Router] Next.js 13 주요 변경사항 알아보기  (0) 2023.09.18
[CSS] BEM 방법론에 대해 알아보자(Block, Element, Modifier)  (0) 2023.06.01
'Development Study/Frontend' 카테고리의 다른 글
  • [Automatic Batching] 리액트 18에 등장한 렌더링 묶음판매
  • UI 버벅임은 이제 그만! Web Worker 를 적절히 이용하여 UX 증진시키기
  • 클라이언트까지 꼭 데이터가 와야할까? RCS(React Server Components)에 대해 알아보자
  • [Next.js App Router] Next.js 13 주요 변경사항 알아보기
ThreeLight
ThreeLight
ThreeLight Studio의 블로그, TimeMap.exe에 오신 것을 환영합니다.
  • ThreeLight
    TimeMap.exe
    ThreeLight
  • 전체
    오늘
    어제
    • 분류 전체보기 (245)
      • Checkpoint (1)
      • (3D)Dev Deep Dive (0)
        • Templates & Guides (9)
        • Frontend origin (9)
        • Backend origin (1)
        • TroubleShootings (4)
      • Development Study (95)
        • Frontend (36)
        • Backend (21)
        • CS(Computer Science) (2)
        • Background Knowledges (11)
        • Algorithm (2)
        • Mobile (3)
        • AWS (6)
        • Python (6)
        • MSW(MapleStoryWorlds) (8)
      • Coding Test (59)
        • 문제.zip (1)
        • BaekJoon_JavaScript (0)
        • Programmers_JavaScript (9)
        • BaekJoon_Python (23)
        • Programmers_Python (10)
        • Undefined_Python (3)
        • Programmers_SQL (13)
      • 활동내역.zip (43)
        • 개인 (21)
        • Techeer (12)
        • Bootcamp (7)
        • Hackathon (1)
        • TeamProjects (2)
      • 여기 괜찮네??(사이트 | App) (5)
      • 재미있는 주제들 (8)
      • 개발 외 공부 저장소 (11)
        • 생산운영관리 (3)
        • 생활속의금융 (6)
        • 경영정보시스템 (2)
  • 링크

    • TimeMap.dmg (Portfolio)
    • GitHub 바로가기
    • 오픈프로필(카카오톡)
    • Medium 바로가기
    • Disquiet 바로가기
    • LinkedIn 바로가기
  • 인기 글

  • 태그

    programmers
    react
    프로그래머스
    TypeScript
    Python
    HTML
    JavaScript
    Baek Joon
    SQL
    CSS
  • 최근 글

  • 최근 댓글

  • hELLO· Designed By정상우.v4.10.1
ThreeLight
[NextJS AppRouter] 초간단 API Mocking 하기(with Route Handlers)
상단으로

티스토리툴바