[TIL] 내일배움캠프 71일차 - 리액트 API 공통 설정

오늘의 학습 키워드📚

Axios 공통 설정

리액트에서 axios를 이용해 API 통신이 가능하다.

        axios
        .get(`/api/chat-rooms`)
        .then(response => {
            console.log(response.data);
        })
        .catch(error => {
            console.error('Failed. Status: ' + error.response.status);
        });

axios.{HTTP 메소드}.then(성공 시 로직).catch(실패 시 로직) 이런식으로 API를 호출하고 로직을 처리한다.

하지만 API 개수가 수십, 수백개이고 전부 하드코딩을 한다면 나중에 수정이 생겼을 때 찾기가 굉장히 힘들 거고 공통 헤더 등을 설정하는 것도 고려를 해야 한다.
이런 설정을 할 수 있는 것이 axios.create 라는 메소드이다.

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

Axios 인스턴스 | Axios Docs

Axios 인스턴스라고 하는 것인데 사용자 지정 config로 Axios 인스턴스를 만들어 해당 인스턴스로 API 호출을 할 수 있는 방법이다.

import axios from "axios";

//서버 연결하는 부분
export const apiClient = axios.create({
    //baseURL = 서버 주소
    baseURL: "http://localhost:8080",
    headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
    },
});

먼저 Axios 인스턴스를 만들고 export 하여 다른 곳에서도 import 해서 쓸 수 있도록 한다.

API 설정 및 다른 컴포넌트에서 사용을 위한 js 파일을 만들었다.
각 도메인 별로 생성해 관리하면 좀 더 편할 것 같다.

import {apiClient} from "../Client";

const startUrl = "/api/v1";

export const getMyRooms = async () => {
    return apiClient.get(startUrl + `/chat-rooms/my-rooms`);
};

export const getAllRooms = async () => {
    return apiClient.get(startUrl + `/chat-rooms`);
}

get, post 등의 메소드와 URL, 필요한 데이터 등을 설정한다.

    import {getMyRooms} from "./api/ChatRoomApi";
    
    async function getMyRoomList() {
        try {
            const response = await getMyRooms();
            setRoomList(response.data);
        } catch (error) {
            console.error("채팅방 목록을 가져오는데 실패했습니다.", error);
        }
    }

해당 메소드를 import 하고 필요한 함수 등에서 호출하면 된다.

---

오늘의 회고💬

리액트로 채팅 시스템을 구현하고 있는데 처음엔 역시나 뭘 어떻게 해야 할지 감도 안 잡혔지만 이제는 그래도 얼추 부트스트랩 이거저거 갖다 쓰고 AI 활용해서 컴포넌트 구성하고 편집하는 등 기초적인 작업은 가능한 것 같다.
역시 프론트는 어렵다...

 

내일의 계획📜

채팅 방에 입장해 실시간 채팅을 하는 기능까지 완료할 예정이다. 이미 백엔드 적으로는 구현이 다 돼있지만 리액트에서 STOMP 연결을 해야 하기에 쉽지 않은 것 같다.