쇼핑몰 프로젝트(Ajax)

코딩애플 님의 강의를 바탕으로한 글입니다:)

Ajax

Ajax는 새로고침없이 요청을 할 수 있게 도와준다.

GET,POST 요청의 경우 강제로 새로고침을 하게 되어 있다.

• GET요청: 주소창에 URL을 작성하여 서버에 보내는 요청 (특정페이지 또는 자료를 읽고 싶을 때) ex) 네이버 들어가고 싶어서 브라우저 주소창에 naver.com 입력하는 것
• POST요청: 데이터를 서버로 보내고 싶을때 서버에 보내는 요청 ex) 로그인 또는 댓글을 올릴때

이때 Ajax는 jQuery Ajax, axios, fetch()을 사용할 수 있는데,
리엑트 개발환경에서는 axios 또는 fetch()를 많이 사용한다.

Axios

설치
1. yarn add axios 또는 npm install axios

2. 상단에 import 해오기

import axios from 'axios';

GET 요청을 통해 더보기 클릭시 데이터 3개를 더 가져오기

1. axios.get() 입력 (URL의 경우 협업하는 서버단 개발자에게 URL을 요청하면 된다.)
   

2. 그 뒤로 오는 .then()은 요청 성공, .catch()은 요청 실패 시에 실행할 코드를 넣을 수 있다.
   

잠깐)
fetch()문법 또한 axios.get() 대신에 그대로 써주면 된다. 하지만 fetch()문법은 JSON을 object로 자동변환하지 못한다.
앞서 입력한 서버 URL을 입력하면 다음과 같은 코드가 나온다. 이 코드의 키값을 보면 ""로 둘러쌓여 있다. 왜냐하면 서버와 통신할때 텍스트만 전송할 수 있기 때문이다. 반면 일반 object의 경우에는 둘러쌓여있지 않다. 즉, ""로 둘러쌓인 데이터들은 JSON이라고 할 수 있다.

JSON

일반 Object

이때, Axios는 자동적으로 JSON을 가져올때 Object로 변환시켜준다.
JSON 그대로의 텍스트형태로 데이터를 가져오면, Object 자료형과 같이 (ex. object.title) 사용을 못한다. 따라서, 변환해주는 것이 중요한데, fetch()는 자동으로 변환이 불가하고, 별도의 추가 코드가 필요하다.

결국, Axios가 더 편하게 쓸 수 있는 것이다.

POST 요청법 (서버에 데이터를 보내고 싶을 때)
get과 같은 형식에, post로만 변경해주면 된다.

axios.post('https://codingapple1.github.io/shop/data2.json', { id : 'test', pw : 1234})
  .then((result)=>{  })
  .catch(()=>{ })