API 라우팅

1️⃣ API 라우트 만들기
2️⃣ 리퀘스트 다루기
3️⃣ 리스폰스 다루기
4️⃣ 실습

---

1️⃣ API 라우트 만들기

• pages > api 폴더 생성 > short-links 파일생성
  api 폴더명은 규칙이기 때문에 다른 이름으로 변경할 수 없음
  endpoint: /api/short-links

📝 short-links.js

export default function handler(req, res) {
  res.send('안녕 API!');
}

📝 request.http

GET http://localhost:3000/api/short-links

상단에 떠 있는 Send Request 클릭

---

2️⃣ 리퀘스트 다루기

- 리퀘스트 객체

req.cookies: session-id
req.method: 요청 매서드를 대문자로 보여줌 (GET/ POST)
req.body: 바디 내용
req.query: 쿼리스트링 ( ?q='여기에 들어오는 값')
req.id: 페이지 넘버

🍪 쿠키란?
간단한 사용자 정보를 저장하거나 로그인하고 나서 인증정보를 브라우저에 저장한 뒤 request할 때마다 보내 줄 때 활용한다.

📝 [id].js

export default function handler(req, res) {
  res.send(req.method); // GET, POST 대문자로 찍힘
  //   res.send(req.cookies);
  //   쿠키란? 쿠키에는 간단한 사용자 정보를 저장 or 로인하고 나서 인증정보를 브라우저에 저장 한 뒤 request 할때마다 보내 줄 때 활용 함

  //   res.send(req.body);

  //   res.send(req.query);  // 쿼리스트링 ?q='여기에 들어오는 값'

  //   res.send(req.id);  // 페이지 넘버
}

📝 request.http

GET http://localhost:3000/api/short-links/123?q=codeit

###

GET http://localhost:3000/api/short-links/123

###

POST  http://localhost:3000/api/short-links/123
Content-Type: application/json

{
    "title": "codeit"
}

###

Get http://localhost:3000/api/short-links/123
Cookie: session-id=codeit1234

---

3️⃣ 리스폰스 다루기

- 리스폰스 객체

함수 체이닝 방식으로 사용하기 때문에, res.status(201).send()처럼 함수를 이어서 사용할 수 있습니다.

📝 index.js

export default function qrcodes(req, res) {
  switch (req.method) {
    case 'POST':
      res.status(201).send({
        title: '위키피디아 Next.js',
        url: 'https://en.wikipedia.org/wiki/Next.js',
      });
    case 'GET':
      res.send([
        {
          id: 'abc',
          title: '위키피디아 Next.js',
          url: 'https://en.wikipedia.org/wiki/Next.js',
        },
        {
          id: 'def',
          title: '코드잇 자유게시판',
          url: 'https://codeit.kr/community/general',
        },
        {
          id: 'ghi',
          title: '코드잇 질문답변',
          url: 'https://www.codeit.kr/community/questions',
        },
      ]);
      break;

    default:
      res.status(404).send();
  }
}