React Vite 프로젝트 API 호출

리액트 API 호출을 위해서는 어떤 방식으로 프로젝트를 생성했는지에 따라 호출 방법이 다르다.

 

현재 크게 두가지 방법으로 리액트 프로젝트를 생성할 수 있다.

1. Creat-React-App(CRA)를 이용한 프로젝트 생성

2. Vite를 이용한 프로젝트 생성

 

이 포스팅은 Vite를 이용한 프로젝트를 생성했을 때 API 호출 방법에 대해서 쓰려고 한다.

 

1. API 호출을 위한 axios 설치

npm install axios

 

 * axios란? Promise기반 HTTP 클라이언트 라이브러리로 클라이언트(브라우저)에서는 XML HttpRequest를 사용한다.

 

2. jsx 파일 상단에 axios 호출

import axios from "axios";

 

3. vite.config.js 파일에 아래 코드 작성

server: {
    proxy: {
      '/api': {
        target: 'https://stdict.korean.go.kr/api', // 원하는 api url 주소
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '') // 경로 재작성
      }
    }
  }

api 우회를 위한 proxy 설정으로 아래 rewrite로 경로를 재작성 해서 우회 하지 않으면 CORS 에러가 발생한다.

 

4. jsx 파일에 아래 코드 작성

const apiData = async (query) => {
        const url = '/api/search.do'; // 국립국어원 api 호출
        const apiKey = import.meta.env.VITE_API_KEY; // 암호화 된 api key
        let params = {
            key: apiKey,
            // 아래에도 각각의 api 에 맞는 설정이 필요하다
        };
        const response = await axios.get(url, { params });
        return response.data;
    };

 

위의 과정을 거치면 CORS 에러 없이 api를 호출 할 수 있다.

 

Vite CORS 에러와 해결된 이유는 아래 포스팅으로

https://deer-develope-diary.tistory.com/18

React Vite Cors Error 해결

 

 

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