next JS 강의 정리 - 3 (API 기본)

API - Application Programming Interface

FE 와 BE 의 연결고리 = API

예시 1.

/pages 안에 api 폴더를 만들어 준다.

• /pages/api/user.js

export default function handler(req,res){
    res.status(200).json({name :'JImmy'});
}

• /pages/[username]/[info].js

export default function UserNameInfo() {
    const router = useRouter()
    const {username,info} = router.query
    const [name,setName] = useState('?')

    useEffect(()=>{
        fetch('/api/user').then((res)=> res.json()).then((data) =>{
            setName(data.name);
        })
    },[])

    return (
        <>
            <h1 className="title"> {username}'s {info} Info</h1>
            <h1 className="title"> Name : {name}'s</h1>
        </>
    )
}

• 개발자 도구의 네트워크 탭에서 정상적으로 API호출이 되고 있음 을 확인할 수 있다.
  
  

예시 2.

src 폴더 안에 constants 라는 폴더를 생성해준다.
/src/constants 에 useDetail.js를 생성

• /src/constants/useDetail.js

export const userDetail = {
    name : 'dorikoo',
    age : 20,
    height : '200cm',
    weight : '100kg',
}

• /pages/api/user.js

import {userDetail} from "constants/useDetail";

export default function handler(req,res){
    res.status(200).json(userDetail);
}

• userDetail의 데이터를 갖고오는 걸 확인할 수 있다.
  

Dynamic API Router

예시 1. slug 활용

• /pages/api/user-info/[uid].js

export default function handler(req,res){
    const {uid} = req.query
    res.status(200).json({name:`dorikoo ${uid}`});
}

• /pages/[username]/[info].js

export default function UserNameInfo() {
    const router = useRouter()
    const {username,info, uid} = router.query
    const [name,setName] = useState('?')

    useEffect(()=>{
        if(uid != null) {
            fetch(`/api/user-info/${uid}`).then((res) => res.json()).then((data) => {
                setName(data.name);
            })
        }
    },[uid])


    return (
        <>
            <h1 className="title"> {username}'s {info} Info</h1>
            <h1 className="title"> Name : {name}'s</h1>
        </>
    )
}

• http://localhost:3000/doyeon/name?uid=1
  해당 주소에 들어가 보면 uid 값을 받아오는 걸 알 수 있다.

API Middlewares 기능

- 미들웨어는 서로 다른 애플리케이션이 서로 통신하는 데 사용되는 소프트웨어입니다.

req / res 관련 다양한 기능들은 Middleware들을 활용할 수 있다.

내장 Middlewares : req.cookies , req.query

• req.cookies : cookies 데이터를 받을 수 있다.

const cookies = req.cookies 
console.log(JSON.stringify(cookies))

response -> status / json / redirect / send ...

• 원하는 에러를 커스텀해서 낼 수 있다.

  res.status(500).send({error : ' error '});
  res.status(404).send({error : ' error '});

• 307코드시 '/api/user/' 로 치환

res.redirect(307, '/api/user');