프론트엔드 11.21 세션

Axios란?

axios는 웹 브라우저와 Node.js를 위한 HTTP 비동기 통신 라이브러리이며, npm을 이용해 다운로드가 가능합니다! 그리고 axios는 프론트엔드와 백엔드의 통신, React에서 OpenAPI를 이용할 때 주로 사용됩니다.

Axios의 특징으로는

1. Fetch와 같은 내장 라이브러리가 아니기 때문에 별도의 설치가 필요하다.
2. 오래된 브라우저에서도 지원 가능하고, Fetch보다 브라우저 호환이 좋다.
3. Axios는 JSON 자동 변환, 응답 시간 초과 설정 기능 등을 지원한다.
4. 요청 중단이 가능하다.
5. Promise(ES6) API를 사용한다.
6. CSRF 보호 기능이 내장되어 있다.

이렇게 있습니다!

그리고 Axios는 CRUD(Create, Read, Update, Delete) 연산을 수행하기 위해 ‘Post, Get, Delete, Put’이라는 HTTP
메소드를 통해 요청을 보내 사용합니다. 여기서 4가지의 HTTP 메소드는 아래와 같습니다.

1)POST: 데이터 등록, 전송 2)GET: 데이터 조회 3)DELETE: 데이터 삭제 4)PUT: 데이터 수정

그렇다면 이제 Axios의 사용법에 대해 알아볼까요?

Axios 사용법

1. Axios 다운로드

npm install axios
import axios from 'axios' -> axios import

먼저 터미널에서 위 코드를 입력해 axios를 다운받아 줍니다.

2. Axios 사용하기
npm으로 axios를 다운받았으면 이제 위에 설명한 4가지의 HTTP 메소드를 사용해봅시다!

1) POST(새로운 자원 생성 시 사용 => Create)

axios.post(url, data 객체)

ex)
axios.post('url', 예시data)
.then(response => {
console.log(response.data)
})

axios.post()를 사용하고 then()으로 post가 성공했을 때 response객체를 받아와서 data 를 추출합니다.
response 객체에는 status와 data등이 있으며, HTTP 상태 코드를 얻고 싶으면 response.status,
데이터 정보를 얻고 싶으면 response.data를 사용하면 됩니다!

2) GET(자원 요청 시 사용 => Read)

axios.get(url)

// 단순 데이터 요청 실행
axios.get('url')
    .then(function (response) {
	.then(function() //항상 실행
    )})

//파라미터 데이터 포함
axios.get('url', {
     params: {
       id: example
     }
})
.then(function(response) {
	.then(function()
})

get 메소드는 단순 데이터(페이지 요청, 지정된 요청) 요청 수행, 파라미터 데이터 포함(ex. 사용자 번호에 따른 조회 등) 하는 경우로 크게 두 가지 경우에서 사용되고 있습니다.

3) DELETE(자원 삭제 시 사용 => Delete)

axios.delete('url')

axios.delete('url')
.then(function (response) {
console.log(response);
})

Delete 메소드 형태는 Get과 비슷하지만, Delete 메소드가 서버에 들어가게 되면 서버 내에서 삭제 process가 진행하게 되며 삭제 후 별다른 데이터를 넘겨주지는 않기 때문에 HTTP 응답 코드를 통해 요청이 잘 되었는지 확인해보는 것이 좋습니다!

4) PUT(자원 갱신 시 사용 => Update)

axios.put(url, data 객체)

axios.put('url', data객체) 
   .then(response => {
	example.innerHTML = response.data.eaxample;
   })

Put 메소드는 서버 내부에서 Get -> Post의 과정을 거치기 때문에 Put 메소드와 비슷한 형태입니다.
그리고 전체 데이터가 아닌 일부만 수정하고 싶을 땐 Put이 아니라 axios.patch()를 이용하면 됩니다! Patch는 넘겨준 데이터만 변경되고 기존 데이터는 유지됩니다.

자 이제 이렇게 axios의 사용법을 간단하게 알아봤는데요! 자세한 사용방법은 아래 실습을 통해서 더 알아보도록 할까요?

실습

axios 활용 환경 세팅하기

react app을 생성해줄게요!

// 터미널

npx create-react-app session

session 부분에는 원하는 이름을 입력할 수 있습니다.

그리고, 만든 프로젝트로 경로를 이동해서 axios를 다운로드 받아주면 되는데요!

// 터미널

cd session

npm install axios

react에서 불필요한 파일들도 지워줄게요. public에서는 index.html , src에서는 App.js , index.js만 남기고 삭제한 후, 조금 수정해줄게요.

App.js 만들기

먼저, 필요한 것들을 import 해볼게요. React, 이번 실습 내용인 axios를 불러오고, 우리가 가져올 이미지 파일들을 넣을 PhotoCard도 미리 불러와줄게요!

import React from 'react';
import axios from 'axios';
import PhotoCard from '/PhotoCard';

다음으로, get을 사용하여 서버로부터 데이터를 받아오는 함수를 만들어볼게요. axios를 이용하여 API호출을 하는 경우 바로 응답이 오지 않기에 일반적으로 async function으로 비동기 방식을 사용하게 됩니다. DOG API 사이트(https://dog.ceo/dog-api/)에서 강아지 사진들을 랜덤으로 불러오는 API를 가져올 수 있어요!

async function callDogApi(){
	return await axios.get("https://dog.ceo/api/breeds/image/random")
}

그리고 본격적으로 class를 이용해서 App 컴포넌트를 정의해볼게요. 생성하는 부분, 함수를 불러오는 부분, 렌더링 하는 부분, 크게 세 가지로 나누어 볼 수 있어요.

class App extends React.Component{

/* 아래 세 부분을 작성해주시면 됩니다 */

}

생성자 constructor()를 사용하여 클래스 컴포넌트 내부에서 변화하는 값인 state를 선언해주겠습니다. this.state로 초기값을 할당해주면 됩니다. 하지만, 자바스크립트는 언어적 제약사항으로서 생성자에서 super를 호출하기 전에는 this를 사용할 수 없습니다. 그래서 super(props)를 써준 후, this.state로 image 값을 초기값으로 할당해 줄게요.

constructor(props){
	super(props)
	this.state = {
		image: ""
	}
}

다음으로, 컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드인 componentDidMount()를 사용해서 함수를 호출해 줄게요. 그리고 우리의 데이터는 DOG API 사이트에서 확인할 수 있듯이, 이미지 파일 링크가 값으로 들어있는 message와 status로 구성된 json 파일입니다. 그래서 미리 선언해두었던 state의 image값은 result.data.message로 설정해주면 되겠습니다.

componentDidMount(){
	callDogApi().then(result => this.setState({
		image: result.data.message
	}))
}

그리고 렌더링을 해줄게요. 이미지 파일이 들어있는 PhotoCard 컴포넌트를 렌더링해주면 됩니다. 완료되었으면, 이제 바로 PhotoCard.js 파일을 만들어볼게요~!

render(){
	return <PhotoCard image={this.state.image} />
}

PhotoCard.js 만들기

App.js와 비슷한 과정으로 하면 됩니다!

일단 import를 해줄게요. 이 부분에서는 react만 필요하므로 불러와줍니다.

import React from 'react';

그리고 class를 이용해서 PhotoCard 컴포넌트를 정의해준 후, PhotoCard 컴포넌트를 export 해줄게요!

class PhotoCard extends React.Component{}

export default PhotoCard;

이제 마지막으로 class형 컴포넌트 내용을 채워줄게요. 이미지 파일을 렌더링해주기만 하면 됩니다! 저는 부가적으로 alt를 사용해서 대체메시지를 설정해보았고, 사진의 넓이와 폭을 지정해주었어요.

render(){
	return <img src={this.props.image} alt="갱얼쥐"
	width="500" height="300"
	/>
}

완료

여기까지 모두 해 주었다면, npm start 명령어로 react 앱을 실행해서 결과를 확인해보면 됩니다~!

// 터미널

npm start

---

이렇게 강아지 사진을 랜덤으로 생성해주는 주어진 api를 통해 간단한 axios 실습을 마쳤는데요. 코드가 복잡하지 않아 하나하나 뜯어보며 복습해보기도 쉽답니다~! 그리고 CSS도 만들어본다면 더더 귀여운 웹사이트를 만들 수 있을 거예요!!

그럼 여기서 이번 세션 마치도록 할게요. 실습 따라오시느라 모두 수고 많으셨습니다!🙂