Api 받아오는 부분에서 플로우가 잘 이해가 되지 않는다,,, 힝구 ㅜㅜ

예제를 보고 흐름에 대해서 좀 이해하고, 데이터 처리를 어떻게하는지 강의를 멈춰놓고, 공식 홈페이지에 나와있는 예제들을 따라가면서 어떻게 처리를 하는지 이해를 쫌 해야겠당!

🚀 공식 홈페이지 Document API

🗨 기본 API 설명

🔹 API 경로는 NEXT.JS로 API를 빌드하기 위한 솔루션을 제공한다.

• API 경로가 작동하려면 함수를 기본으로 하는 요청핸들러를 보내야 한다. 그러면 res,req 매개변수가 수신된다
• res : http.ServerResponse 의 인스턴스 와 일부 도우미 기능 (응답)
• req : http.IncomingMessage 의 인스턴스 와 미리 빌드된 일부 미들웨어(요청)

Http 메서드 처리

API 라우트에서 다른 HTTP 메소드를 처리하기 위해 req.method다음과 같이 요청 핸들러에서 사용할 수 있다.

 export default function handler(req, res) {
  if (req.method === 'POST') {
    // Process a POST request
  } else {
    // Handle any other HTTP method
  }
}

🗨 예시 1 . 기본 API 경로

◾ 디렉토리

• components
  - Person.js
• pages
  • index.js
  • api
    - people/index.js , [id].js
  • person
    - [id].js
• data.js

1. index.js 에서 '/api/people'로 api 요청

//page/index.js
const fetcher= url => fetch(url).then(res =>res.json())
export default function Index(){
	const {data,error}= useSWR('/api/people',fetcher)
    // 바로 url로 데이터 보내는게 아니라 api/people로 데이터 보냄.
    if (error) return <div>Failed to load</div>
  	if (!data) return <div>Loading...</div>
  {...생략}
}

❓ useSWR이란?

• SWR is a React Hooks library for remote data fetching.
  The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by RFC 5861.
  SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.
• SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략

▪ Bacis Data Loading

const { data, error } = useSWR('/api/user', fetcher)

useSWR hook은 key 문자열과 fetcher 함수를 받는다. key는 데이터의 고유한 식별자이며(일반적으로 API URL) fetcher로 전달될 것이다. fetcher는 데이터를 반환하는 어떠한 비동기 함수도 될 수 있다(axios,fetch,new Promise 등등).

useSWR은 data와 error의 값을 반환한다.

2. api/people에 api저장

// api/people/index.js
import { people } from '../../../data'
export default function handler(req, res) {
  res.status(200).json(people)
}

이 경로에 일종에 res,req의 상태값 처리하는 페이지라고 생각 됨.
http://localhost:3000/api/people에 접근하면 people에 데이터가 json 형식으로 나타나 있는 걸 볼 수 있음.

req.method, res.status 등 잘못된 메서드 방법이거나, 응답 상태가 잘못되었을 때 이 서버를 통해 애러 메서지를 컨트롤 할 수 있다. 필수적이지 않지만 서버렌더링의 기능 중 하나라고 볼 수 있다.

Tip! GET, PUT, DELETE 등 Restful 처리는 포스트맨에서 확인가능 하다. 포스트맨에서 확인하면, 만약 get으로만 요청 method를 걸어두고 다른 매서드는 애러를 띄운다면 postman에서 애러 메세지가 뜨는 것을 확인 할 수 있다.

3. map으로 돌린 Person.js 클릭 시 person/[id]로 이동

//pages/person/[id].js
import { useRouter } from 'next/router'
import useSWR from 'swr'
const fetcher = async (url) => {
  const res = await fetch(url)
  const data = await res.json()
  if (res.status !== 200) {
    throw new Error(data.message)
  }
  return data
}
export default function Person() {
  const { query } = useRouter()
  const { data, error } = useSWR(
    () => query.id && `/api/people/${query.id}`,
    //id가 있으면, api/people/[id]을 url로 받음.
    //만약 성공한다면 api/people/[id]에 있는 데이터가 data에 담김.
    fetcher
    //async await로 데이터오는 함수로 씀.
  )
  {...생략}

api/people/[id].js 확인

//api/people/[id].js
import { people } from "../../../data";
export default function personHandler({ query: { id } }, res) {
//query받아오는 과정은 모르겠지만 쿼리로 id 받아올 수 있음.
  const filtered = people.filter((p) => p.id === id);
  // filtered = people.find((p) => p.id === id)로 받아 올 수 도 있음. find로 받아올 경우 [0]대신 filtered 사용
  if (filtered.length > 0) {
    res.status(200).json(filtered[0]);
  } else {
    res.status(404).json({ message: `User with id: ${id} not found.` });
  }
}

✨ 기본 API 파싱 플로우

1. index.js 에서 데이터 url을 api/people로 설정
2. api/people/index.js 에서 res 상태 메세지, req 메서드 조건문 설정 가능 (서버에서 렌더링 되기 때문에 url로 이동해서 처리 가능)
3. 클릭 시 person/[id].js 이동
4. () => query.id && /api/people/${query.id}로 url 설정
5. api/people/[id].js에서 파라미터로 id,res 받아서 filter or find로 id일치하는 데이터 찾아서 json으로 받아옴.

다시 강의를 들어보기로 하자!
잊지말자. NEXT.JS 는 서버에서 랜더링 된다는 사실과, api/something으로 url 설정이 가능 한 이유는 서버에서 렌더링 되기 때문이라는 사실을.

출처: https://jaeseokim.tistory.com/113 [Jaeseo's Information Security Story]