🌱 들어가기 전에
서버란?
유저가 데이터를 요청하면 데이터를 보내주는 간단한 프로그램이다.
서버 개발을 한다는 것은 A 데이터를 요청하면 A 데이터를 보내주세요 라고 코드를 짜는 것이다.
서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야 한다.
1. 어떤 데이터인지 (URL 형식으로)
2. 어떤 방법으로 요청할지 (GET or POST)
- GET : 데이터를 가지고 올 때
- POST : 데이터를 보낼 때
GET/POST 요청하는 법
GET 요청을 날리는 가장 쉬운 방법은 브라우저 주소창이다.
URL을 적으면 그곳으로 GET 요청을 날려 준다.
POST 요청을 날리고 싶으면 <form action="요청할 url" method="post"> 태그를 이용하면 된다.
그러면 폼이 전송되었을 때 POST 요청을 날려 준다.
그런데 GET, POST 요청을 이렇게 날리면 브라우저가 새로고침 된다는 단점이 있다.
AJAX란?
서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능을 말한다.
AJAX로 GET/POST 요청하는 방법
- XMLHttpRequest라는 옛날 문법 사용
- fetch()라는 최신 문법 사용
- axios 같은 외부 라이브러리 사용
axios 라이브러리 사용하기
설치
npm install axios
터미널을 열어 설치 명령어를 입력해 준다.
AJAX 요청하는 법 - GET
import axios from 'axios'1. 상단에 axios를 import 한다.
axios.get('URL')2. 작성한 URL로 GET 요청이 된다.
axios.get('URL').then((변수) => {
console.log(변수.data)
});3. 데이터 가져온 결과는 변수.data 안에 들어있다.
- GET 요청의 결과는 변수에 들어가 있다.
- 요청해서 받은 결과의 데이터만 사용하고 싶다면 변수.data
axios.get('URL')
.then((변수) => {
console.log(변수.data)
})
.catch( () => {
//실패했을 때 실행할 코드
});4. 요청 실패했을 때 실행할 코드는 .catch() 안에 작성한다.
AJAX 요청하는 법 - POST
axios.post('URL', 데이터)
-----
axios.post('URL', {name: 'kim'}}이렇게 실행하면 서버로 데이터가 전송된다.
완료시 특정 코드 실행하고 싶으면 .then() 뒤에 붙이면 된다.
동시에 AJAX 요청 여러개 날리려면
Promise.all( [axios.get('URL1'), axios.get('URL2')] )URL1, URL2로 GET 요청을 동시에 해 준다.
둘 다 완료시 특정 코드를 실행하고 싶으면 .then()을 뒤에 붙이면 된다.
원래는 서버와 문자 자료만 주고받을 수 있다.
object, array는 주고받지 못한다.
object, array를 주고받고 싶다면 따옴표를 사용하면 된다.
"{"name" : "kim"}"
이런 것을 JSON이라고 한다.
JSON은 문자 취급을 받기 때문에 서버와 자유롭게 주고받을 수 있다.
object, array 자료가 담긴 변수.data를 출력해 보면 따옴표쳐진 JSON이 나와야 하는데, axios 라이브러리는 JSON → object/array 변환 작업을 자동으로 해 줘서 출력해 보면 object/array가 출력된다.
fetch('URL')
.then(결과 => 결과.json()) // JSON → array/object 변환
.then((결과) => { console.log(결과) } )자바스크립트 문법인 fetch()를 이용해도 GET/POST 요청이 가능한데 JSON → object/array 변환 작업을 직접 바꾸는 변환 과정이 필요하다.
* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.
