[Backend] node.js + next.js API Routes 기초

지금 하는 플젝이 약간 구조가 복잡해서 백을 nodejs, spring boot 둘 다 사용해야한다

그리고 nodejs 쪽 개발을 내가 맡게 되었. 풀스택 개발자 오히려 조하

 

Routing: API Routes | Next.js

next.js의 API Routes를 이용해 프론트코드에서 백엔드까지 작성이 가능하다
 
 

 
src/pages/api 아래에 node 코드를 작성하면 작동한다
 
프론트에서 호출할 때는

await fetch('/api/audits/info').then(~~).catch(~~).finally(~~)

---

간단한 테스트 페이지를 만들어봤다
api test 1은 {error : 'error'}를 콘솔에 출력하고
api test 2는 {id:2, msg:'test 2'}를 콘솔에 출력함
 

---

React 코드 (프론트 코드)

import Button from "@/components/ui/button/Button";

const Main = () => {
  const test1 = async () => {
    await fetch(`api/audits`)
      .then((response) => {
        if (response.status === 200 || response.status === 500)
          return response.json();
        throw new Error(response.statusText);
      })
      .then((data) => {
        console.log(data);
      })
      .catch((error) => {
        console.log("error", error);
      });
  };

  const test2 = async () => {
    await fetch(`api/audits/info`, { headers: { test: "test" } })
      .then((response) => {
        if (response.status === 200) return response.json();
        else throw new Error(response.statusText);
      })
      .then((data) => {
        console.log("data", data);
      })
      .catch((error) => {
        console.log("error", error);
      });
  };

  return (
    <>
      <Button text={"api test 1"} onClick={test1} />
      <Button text={"api test 2"} onClick={test2} />
    </>
  );
};

export default Main;

api test 1 버튼을 누르면 api/audits API를 호출하고
api test 2 버튼을 누르면 api/audits/info API를 호출
 
api/audits에서는 status 200, 500 둘 다 에러 아닌 걸로 받아서 then을 탄다
500 받았을 때 에러로 던지고 싶으면.. 던지면 될듯?

---

 
 node 코드 (백엔드 코드)
api/audits

export default async function handler(req, res) {
    await test(req)
        .then(val => res.status(200).send(val))
        .catch(err => res.status(500).send(err))
}

const test = () => {
    return new Promise(async function (resolve, reject) {
        try {
            throw new Error("throw error");
            // resolve({ id: 1, msg: 'test' })
        } catch (error) {
            reject({ error: 'error' })
        }
    });
}

지금은 비동기를 사용할 필요는 없지만
실제 개발하다 보면 비동기의 향연이라 기초 코드도 비동기로 구현함
 
일부러 에러를 발생 시킴
resolve하면 then으로 가고
reject되면 catch를 탄다

---

 node 코드 (백엔드 코드)
api/audits/info

export default async function handler(req, res) {
    // console.log(req.headers);
    // console.log(req.body);
    res.status(200).json(await test(req));
}

const test = () => {
    return new Promise(async function (resolve) {
        resolve({ id: 2, msg: 'test 2' })
    }
    );
}​

아무 에러 없을 때 일반적인 코드 ?

정석 코드가 뭔진 아직 모르겠음

---

백엔드 안한지 3년 넘어서 갈 길이 태산

Next.js에서 API Routes와 Server Express 사용해보기

위 글은 next 프로젝트에서의 api routes & express 비교(?) 글