Next.js 서버 기능은
서버가 필요하다
유저가 입력한 것들을 DB로 바로 저장시켜버리면 큰 문제가 발생할 수 있습니다.
유저가 이상한 데이터를 DB 에 넣을 수도 있으니까요. 실은 그 반대도 위험합니다.
유저가 DB에서 직접 데이터를 출력할 수 있게 만들면 민감한 정보들도 전부 출력해버리면 큰일입니다.
그래서 유저가 DB 입출력이 필요할 때는 DB 입출력을 안전하게 대리로 해줄 수 있는 프로그램을 하나 만듭니다.
그림과 같이 입출력을 대리로 해주는 프로그램인 '서버' 를 만듭니다.
그래서 글 작성기능을
- 글 작성할 수 있는 페이지를 만들고,
- 전송버튼 누르면 서버에 글저장해달라고 부탁하고,
- 서버는 부탁받으면 검사해보고 DB에 저장하면 됩니다.
서버 만드는 방법
그래서 서버는 유저 요청을 받으면 이것저것 실행하면 되는 매우 간단한 프로그램이라 서버 만드는 것도 별거 아닙니다.
"누가 이런 요청을 하면 이런 코드를 실행해줘." 라고 코드를 짤 것입니다.
근데 서버개발을 하다보면 비슷하게 생긴 기능들이 많을 수 있기 때문에 혼동을 피하기 위해서 기능마다 URL 과 method 이름을 붙여서 구분합니다.
- URL 은 개발자 마음대로 작성하면 됩니다.
- method 는 GET, POST, PUT, DELETE 총 4개 중에 마음대로 골라 작성하면 됩니다.
보통 데이터 출력을 다는 기능엔 GET, 입력은 PUT, 삭제는 DELETE 를 많이 선택합니다.
그래서 서버코드는 URL 과 method 까지 작성해주면 개발 끝입니다. 서버에 만들어놓은 기능을 전문용어 API 라고 부릅니다.
Next.js 에서 서버기능 만들려면
1. pages 폴더 안에 api 폴더를 만들고, 해당 폴더에 js 파일을 원하는 이름으로 만듭니다.
예를 들어 pages/api/test.js 를 만들었습니다. ages/api/ 폴더 안에 만든 파일과 폴더는 자동으로 서버기능의 URL 이 됩니다. 그래서 유저가 /api/test 라는 URL 로 GET / POST / PUT / DELETE 요청하면, test.js 안에 있는 코드가 실행됩니다.
export default function handler(요청, 응답) {
console.log(123)
}
2. 정확히 말하면 test.js 파일에 함수 하나 넣으면, /api/test 로 GET / POST / PUT / DELETE 요청시 그 함수 안에 있는 코드가 실행됩니다.
3. 서버는 요청을 받았으면 응답도 해주는 것이 좋습니다.
export default function handler(요청, 응답) {
응답.status(200).json('처리완료함')
}- 서버기능이 성공적으로 실행되었으면 status() 안에 200 을 넣으면 되고, 서버기능 실행이 실패했으면 500 을 넣으면 됩니다. 유저가 요청을 잘못해서 유저탓으로 실패한 경우 400 을 넣으면 됩니다.
- 요청자에게 데이터도 보내주고 싶으면 응답.json() 안에 데이터를 넣으면 됩니다.
서버로 POST 요청하기
<form> 태그를 사용하면 유저들이 서버로 POST, GET 요청을 쉽게 보낼 수 있습니다.
(app/write/page.js)
export default function Write(){
return (
<div>
<h4>글작성</h4>
<form action="/api/test" method="POST">
<button type="submit">버튼</button>
</form>
</div>
)
}위와 같이 <form> 을 작성했습니다.
action 에는 URL 이 잘 기입하고, method 에는 GET, POST 중에 하나 기입하면 됩니다.(PUT, DELETE 는 못 사용합니다.)
그럼 전송 버튼 눌렀을 때 서버로 요청을 보냅니다.
api/test.js
export default function handler(요청, 응답) {
if (요청.method == 'GET'){
응답.status(200).json({ name: '안녕' })
}
if (요청.method == 'POST'){
응답.status(200).json({ name: '바보' })
}
}