[React] Axios 인스턴스와 .env 설정으로 API 호출 최적화하기

은서·2025년 1월 9일

HTML/React

목록 보기

4/7

정후의 Video 코드를 보니 무언가 다소 잘못 되었다는 것을 알게 되었다...

이것은 dE:moji PoC를 진행하면서 느꼈던 것과 비슷한..
이렇게 간단한 관리자 도구 및 검사를 통해서도 API url을 그대로 확인할 수 있는 문제가 발생하게 된다!

이렇게 api 주소를 코드에 바로 넣는 방식의 문제점들에 대해서 더 알아보도록 하자~

1. 코드의 문제점

api 주소를 코드에 바로 넣어보는 하드 코딩

유지보수 어려움, API 주소가 변경될 경우, 모든 관련 코드를 수정해야 하기 때문이다
보안 취약, 엔드포인트나 토근 등 민감한 정보가 포함될 수 있기 때문이다
API의 url이 위의 사진처럼 노출되게 된다면, 외부에서 API에 접근하거나 악용할 위험이 발생한다

=> 따라서 코드 내부의 민감한 정보가 노출되는 것을 방지하려면, 환경 변수 파일(.env)을 사용하여 민감한 정보를 별도로 관리하는 것이 바람하다

Axios 요청 시 보안 설정이 취약하다

현재 axios.get 방식은 단순한 HTTP 요청만 수행하며, 인증 토큰이나 헤더 기반 보안 설정이 없기 때문에 외부로부터 무단 접근이 쉽게 이루어질 수 있다
이러한 요청 방식은 누가 요청을 보냈는지를 API 사용을 추적할 수 없기 때문에 로그 기록이나 접근 제어가 어렵다

=> 따라서 Axios 인스턴스를 사용해야 한다

2. 환경 변수(.env)와 Axios

1. (.env)

1. (.env)란?

env 파일이란 환경 변수 파일을 말한다.
어플리케이션에서 자주 변경되거나 민감한 정보를 코드에 직접 하드 코딩하지 않고 외부 파일에 따로 관리할 수 있도록 도와준다.

2. env 파일을 사용하는 이유

민감한 정보 보호
API 키, 비밀번호 등 중요한 정보를 코드에 직접 하드 코딩하지 않고 외부 파일로 관리하여 보안을 강화할 수 있다.
환경별 설정 관리
개발, 테스트, 운영 환경마다 다른 설정을 손쉽게 적용할 수 있다.
유지보수 및 확장성 향상
코드 수정 없이 환경 변수만 변경하여 설정을 관리할 수 있어 유지보수가 편리하다.
공유 편의성
'.env` 파일을 통해 팀 내에서 공통 설정을 쉽게 공유할 수 있다.

3. env 파일 작성 방법
1. .env 파일 생성 및 .gitignore에 .env 추가한다.
2. React에서 변수명은 REACTAPP 으로 시작되어야 한다.
3. 변수명과 값 사이에는 공백 또는 따옴표("")가 존재해서는 안된다.
4. 변수명은 보통 대문자로 작성한다.

.env 파일 생성할 때 src처럼 폴더를 생성해버리는 것이 아니라 파일 단 하나면 rooter에 생성하면 되는 것이다.
처음에 폴더를 생성하고 왜 .env가 생기지 않지 하고 어리둥절했던 기억이 있다.

이렇게 .gitignore에 .env를 추가하면 된다.

이렇게 작성된 환경변수를 코드에 사용하면 되는 것이다.

환경 변수를 사용해야 하는 컴포넌트에서 process.env.REACTAPP내가저장한변수명 으로 접근하면 된다.

사용 빈도가 높다면 변수에 저장하여 사용해도 되고 URL에 직접 사용해도 됩니다. 이렇게 하면 더 이상 환경 변수의 값을 노출하지 않으면서 Ajax 요청이 가능하다.

script 태그로 외부 JavaScript 파일을 호출해야 될 때 환경 변수는 %REACTAPP내가저장한변수명% 으로 사용하면 된다.

2. Axios

1. Axios 인스턴스란?

Axios 인스턴스란 반복적으로 사용되는 재사용 가능한 설정값을 미리 정의한 HTTP 클라이언트 객체이다.
여러 API 요청에 공통적으로 적용할 설정을 한 번에 관리할 수 있도록 도와준다.

2. Axios 인스턴스의 특징

baseURL 설정
baseURL을 .env 파일에서 가져오도록 설정함으로써, 기본 URL을 쉽게 변경할 수 있다.
이를 통해 모든 요청에서 URL을 반복해서 입력할 필요 없이 상대 경로만 전달하면 된다.
Authorization 헤더에 Access Token 추가
요청 전에 Access Token을 Authorization 헤더에 자동으로 추가하여, API 요청 시 항상 인증이 필요한 경우 이를 자동으로 처리할 수 있다.

401 응답 처리 (토큰 갱신)
API 요청 시 401 응답(Unauthorized)이 발생하면 Refresh Token을 사용하여 새로운 Access Token을 자동으로 발급하고, 이후 재요청을 보내도록 설정한다.
이 기능을 통해 사용자 인증이 만료되더라도 자동으로 갱신되어 사용자 경험이 향상에 도움을 준다.

3. Axios 인스턴스 사용 유무 비교

-> 개인적으로 이 부분에서 코드를 적용하는데 어려움을 겪었다❗️

1. Axios 인스턴스 미사용 (직접 axios.get 등 사용)

요청 시마다 baseURL과 헤더를 매번 설정해야 하므로 중복 코드가 늘어나고 유지보수가 어려워진다.
공통적으로 처리해야 할 인증(토큰) 관련 로직이 각 요청에 분산되므로 비효율적이다.
보안 측면에서도 취약해진다.

2. Axios 인스턴스 사용 (SSIZENNET_API 인스턴스 활용)

baseURL, 헤더 설정, 인증 로직을 재사용하여 중복 코드를 줄이고 유지보수성을 높일 수 있다.
API 호출 시 상대 경로(/Settings, /video)만 전달하면 자동으로 baseURL이 추가되기 때문에, 코드가 단순하고 직관적이게 된다.
401 응답에 대한 자동 처리가 가능해져, 사용자 인증 만료 시에도 별도의 추가 작업 없이 자동 갱신이 이루어진다.

3. baseaxios

1. baseaxios 란?

baseaxios 파일은 Axios.create()를 이용해 공통 설정이 미리 정의된 Axios 인스턴스를 생성하는 파일이다.
예를 들어, 모든 API 요청에 공통적으로 필요한 기본 URL, 헤더, 타임아웃 설정 등을 한곳에 미리미리 만들어서 관리한다고 생각하면 좋을거 같다.

2. baseaxios 사용하기

매번 process.env.REACT_APP_API_BASE_URL을 포함해 전체 URL을 동적으로 작성해야하는 불편함이 있다.

공통 설정된 Axios 인스턴스인 SSIZENNET_API를 사용하면

요청 시 baseURL은 자동으로 붙으며,
요청에 필요한 것은 엔드포인트 경로(/manage/departmentList)뿐이다!
결과적으로 코드가 단순해지고, 공통 설정이 적용된 일관된 API 호출이 가능합니다.

정리하자면 ✨ baseaxios 파일을 만들어서 굳이굳이 다 일일이 호출하지 않고, 뒤에 엔드포인트만 호출하면 되는 것이다 ✨

3. 코드 변경하기

이렇게 URL이 그대로 있던 부분을

.env 파일에 정의된 REACT_APP_API_BASE_URL을 활용하여 Axios 인스턴스의 기본 URL을 설정하고, 기존에 하드코딩된 URL을 모두 제거한다.

개인적으로 Axios 인스턴스에 대한 개념은 이해했지만, 그래서 진짜 어떻게 적용해야 하는건데? 이 부분에 대해서 많이 헷갈렸다...

Axios 인스턴스 미사용
일반적인 axios.get 메서드를 사용하여 API 요청을 처리한 것이다.
API URL을 ${process.env.REACT_APP_API_BASE_URL}과 category를 포함한 동적 문자열로 직접 구성된 것을 볼 수 있다.
Axios 인스턴스 사용
SSIZENNET_API라는 Axios 인스턴스를 미리 정의하여 사용한 것이다.
API 경로(/manage/departmentList/departmentList)만 지정한다.