파일 업로드 웹 페이지 구축: (7) Axios 기반 API Call

📌 시리즈 포스팅

1.  파일 업로드 웹 페이지 구축: (1) React 기반 Frontend 개발
2.  파일 업로드 웹 페이지 구축: (2) AWS IAM 역할 생성
3.  파일 업로드 웹 페이지 구축: (3) AWS Lambda 생성
4.  파일 업로드 웹 페이지 구축: (4) AWS S3 생성
5.  파일 업로드 웹 페이지 구축: (5) AWS API Gateway 생성
6.  파일 업로드 웹 페이지 구축: (6) AWS Lambda 함수 작성
7.  파일 업로드 웹 페이지 구축: (7) Axios 기반 API Call
8.  파일 업로드 웹 페이지 구축: (8) 파일 업로드 테스트
9.  파일 업로드 웹 페이지 구축: (9) AWS S3 기반 웹 호스팅

👨‍💻 들어가며

본 포스팅에서는 Axios 패키지를 활용하여 앞서 생성한 REST API를 Call 하는 방법을 소개합니다.

📚 목차

1.  Axios 패키지 설명
2. Axios 패키지 설치
3. Axios 기반 API Call

---

1.  Axios 패키지 설명

Axios는 Promise API를 활용하는 비동기식 HTTP 클라이언트 라이브러리로써 브라우저와 서버 간 통신을 목적으로 사용됩니다. 더욱 자세한 설명은 Axios 공식 문서를 참고해 주세요.

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

2.  Axios 패키지 설치

npm을 활용해 쉽게 설치할 수 있습니다.

npm install axios

3.  Axios 기반 API Call

앞서 파일 업로드용 웹 페이지의 Frontend를 구축했습니다. 해당 내용에 대한 자세한 설명은 아래의 포스팅을 참고해 주세요.

https://heytech.tistory.com/403?category=559266 

파일 업로드 웹 페이지 구축: (1) React 기반 Frontend 개발

이제 axios를 활용하여 앞서 생성했던 API Gateway로 파일을 POST 해보겠습니다.

1) 패키지 import

src 폴더 내 App.js 파일에 axios 패키지를 import 합니다. 기존 코드에서 아래의 코드 한 줄을 추가합니다.

// App.js
import axios from 'axios';

2) API Call

같은 App.js 파일에서 파일 업로드 함수 내 axios의 post 메서드를 활용한 코드를 추가합니다. 첫 번째 파라미터로 앞서 생성한 AWS API Gateway URL을 입력합니다.

onFileUpload = () => {
    const formData = new FormData();
    formData.append(
      "demo file",
      this.state.selectedFile,
      this.state.selectedFile.name
    )
    axios.post("API Gateway URL", formData).then(() => { // API Gateway URL 입력
      this.setState({selectedFile: null});
      this.setState({fileUploadedSuccessfully: true});
    })
  }

이제 Aixos 기반 API Call 세팅까지 완료하였습니다. 다음 포스팅에서는 브라우저에서 파일 업로드 시 AWS S3 버킷에 잘 저장되는지 확인해 보겠습니다.

📌 시리즈 포스팅

1.  파일 업로드 웹 페이지 구축: (1) React 기반 Frontend 개발
2.  파일 업로드 웹 페이지 구축: (2) AWS IAM 역할 생성
3.  파일 업로드 웹 페이지 구축: (3) AWS Lambda 생성
4.  파일 업로드 웹 페이지 구축: (4) AWS S3 생성
5.  파일 업로드 웹 페이지 구축: (5) AWS API Gateway 생성
6.  파일 업로드 웹 페이지 구축: (6) AWS Lambda 함수 작성
7.  파일 업로드 웹 페이지 구축: (7) Axios 기반 API Call
8.  파일 업로드 웹 페이지 구축: (8) 파일 업로드 테스트
9.  파일 업로드 웹 페이지 구축: (9) AWS S3 기반 웹 호스팅

---

포스팅 내용에 오류가 있거나 보완할 점이 있다면 아래에 댓글 남겨주세요!

그럼 오늘도 즐겁고 건강한 하루 보내시길 바랍니다 :)

고맙습니다😊