Next.js - #데이터 전송, GET

데이터 전송

GET 요청으로도 서버로 데이터 전송이 가능하다

POST 요청으로 데이터 전송할 때 <form>을 쓰거나 fetch() 안에 body에 넣어서 데이터를 전송할 수 있고 서버에선 요청.body에 접근하여 수신된 데이터 출력이 가능하다
그런데 GET요청으로도 데이터를 서버로 보내는 방법이 있다
URL에 데이터를 몰래 담아서 보내는 거다
그럼 서버에서 URL에 담긴 데이터를 출력해서 사용할 수 있다

그래서 간단하게 문자 한두개 보내거나 그런 경우엔
POST요청보다는 GET요청 사용하는 경우가 많다고 한다
다만, URL에 정보가 노출되기 때문에 민감하거나 길이가 긴 데이터는 POST요청으로 전송하는게 좋다
예를 들어, 아이디비번, 댓글, 블로그글 그런건 POST 요청으로 해야 한다

아무튼 URL에 데이터 담아서 보내는 방법은 2개가 있고 그에 대해 알아볼 거다

query string

URL에서 물음표(?) 뒤에 오는 것들을 query string이라고 부른다

<button
  onClick={() => {
    fetch('/api/test?name=lee&age=20');
  }}
>
  데이터 전송
</button>

URL작성할 때 뒤에 물음표를 붙이고 데이터이름=값으로 적어 서버로 데이터를 전송할 수 있다
이렇게 URL을 작성하면 서버로 {name: lee, age: 20} 이런 데이터가 전송된다

export default async function handler(req, res) {
  if (req.method == 'GET') {
    console.log(req.query);  // { name: 'lee', age: '20' }
    res.status(200).json('test');
  }
}

req.query로 접근하여 수신된 데이터 출력이 가능하다

• 장점
  • 간단하다
  • GET 요청은 body에 데이터를 넣을 수 없는데 GET 요청으로도 데이터 전송이 가능하다
• 단점
  • 데이터 많으면 코드가 더러워진다
  • 민감한 정보를 넣으면 안 된다

URL parameter

전에 여러페이지 만들고 싶으면 Dynamic route를 사용하면 된다고 했는데
서버에서도 Dynamic route를 이용해 여러 개의 서버 API를 한 번에 만들 수 있다
서버 Dynamic route를 만들 때도 동일하게 파일명에 []를 붙이면 '아무문자'라는 뜻이다

그럼 이제 누가 /api/test/lee 경로로 GET, POST 요청 등을 하는 경우,
[어쩌구].js 내부의 코드가 실행된다

<button
  onClick={() => {
    fetch('/api/test/lee');
  }}
>
  데이터 전송
</button>

query string과 마찬가지로 req.query로 접근하여 URL parameter 자리에 집어넣은 문자를 출력할 수 있다

export default async function handler(req, res) {
  if (req.method == 'GET') {
    console.log(req.query);  //  { '어쩌구': 'lee' } 
                             //  { pathName : value}
    res.status(200).json('test');
  }
}