서버와 통신하기

서버란?

우선 서버가 무엇인지부터 아는 것이 중요하다
서버란 유저로부터 요청받은 값을 전달해주는 간단한 프로그램이다.

• 서버에 데이터를 요청하는 방법은

1. 어떤 데이터인지 (URL)
2. 어떤 방법으로 요청하는지 (GET or POST)

를 잘 써야 데이터를 받을 수 있다.

통상 데이터를 가져올 때는 GET을 쓰고
데이터를 보낼 때는 POST를 쓴다.

GET/POST 요청하는 법

GET요청을 보내고 싶으면 브라우저 창에 url을 적으면 끝이다.

POST 요청을 보내고 싶으면

<form action="요청할url" method="POST">

태그를 사용하면 된다.
단점이 있다면 페이지가 새로고침 된다는 점?
그 단점을 보완해주는 것이 바로 AJAX이다.

AJAX란?

서버에 GET/POST 요청을 할 때 새로고침 없이 주고 받을 수 있는 기능이다.

• AJAX로 GET/POST 요청하는 방법은 3가지가 있다.

1. XMLHttpRequest 문법
2. fetch() 문법
3. axios 같은 외부 라이브러리 쓰기

일단 가장 편한 3번 방법으로 알아보자
우선 터미널 열어서

npm install axios

를 먼저 해줘야 한다.

GET 요청 하는 법

버튼을 누르면 데이터를 가져오는 기능을 만들어보자.

import axios from 'axios'

function App(){
  return(
    <button onClick={()=>{
        axios.get("url").then((결과)=>{
          console.log(결과.data)
        })
        .catch(()=>{
          console.log("실패")
        })
      }}>버튼</button>
    )
}

위 코드처럼
axios.get("url")을 입력하면 그 url로 GET요청이 된다.
가져온 데이터인 결과는 결과.data로 들어간다.

POST 요청 하는 법

axios.post('url',{name:'kim'})

이렇게 하면 위 url로 {name:'kim'}이 전송된다.
완료시 특정 코드를 실행하고 싶으면 get요청시와 마찬가지로 .then()뒤에 붙이면 된다.

JSON?

원래 서버와 통신은 문자자료만 주고 받을 수 있다.
방금 {name:'kim'}도 사실은 "{name:'kim'}" 으로 되어있는 것이다.
위 처럼 따옴표가 쳐져 있는 것을 JSON이라고 한다.
그래서 결과.data를 출력해볼때 따옴표가 같이 나와야하는데 따옴표가 제거되서 출력되는 이유는 axios라이브러리 때문이다.
axios는 JSON -> object/array 변환 작업을 자동으로 해주기 때문에 가능한 것

fectch를 쓴다면?

fetch를 써도 GET/POST 요청이 가능한데
대신 axios처럼 JSON -> object/array 를 자동으로 바꿔주지 않아서 직접 해줘야 하는 단점이 있다.

fetch("URL")
  .then((결과) => 결과.json())
  .then((결과) => {
    console.log(결과);
  });