2025.05.15 ~ 05.16

RestFul API 개발

프론트와 백엔드 로컬 연결

.env 파일 활용

api 주소는 하드코딩하거나 .env로 관리할 수 있다.

.env

• 환경 변수를 저장하는 곳
• 민감하거나 자주 바뀔 수 있는 값(서버 주소, API key 등)을 소스 코드에 직접 적지 않고 따로 관리

# localhost
# VITE_APP
VITE_APP_RESTAPI_IP=localhost

• Vite, React, Vue 등에서 환경변수를 쓰려면 변수 이름 앞에 VITE_ 가 꼭 붙어야 한다
• 현재 JS 코드(React 등)에서 이 값을 읽어서 localhost라는 주소로 백엔드 API 요청을 보내게 된다는 뜻
• import.meta.env.VITE_APP_RESTAPI_IP 이 값을 쓰면 자동으로 localhost가 들어가게 된다.
• 나중에 배포할 때 서버 주소만 바꿔주면 코드 전체를 고칠 필요가 없다.

API 베이스 주소 관리

• src/apis/ 파일별로 함수 정리
• API 호출 코드는 대부분 src/apis 아래에 파일 별로 함수로 정리된다.
• 각 기능 별로 파일로 나뉘어 있고, 필요한 컴포넌트에서 이 함수를 import 해서 사용한다.
• .js 형식으로 카멜 형식으로 클래스 명을 정리한다.

const API_IP = import.meta.env.VITE_APP_RESTAPI_IP; // 'localhost'
const BASE_URL = `http://${API_IP}:8080/api`;
// 결과: 'http://localhost:8080/api'

• 둘 중의 하나의 방법으로 import 해서 사용하면 된다

const requestURL = `http://${import.meta.env.VITE_APP_RESTAPI_IP}:8080/api/v1/members/${memberId}`;

const requestURL = `http://${import.meta.env.VITE_APP_RESTAPI_IP}:8080/auth/login`;

const requestURL = `http://${import.meta.env.VITE_APP_RESTAPI_IP}:8080/auth/signup`;

const requestURL = `http://${import.meta.env.VITE_APP_RESTAPI_IP}:8080/api/v1/products-management/${productCode}`;

requestURL = `http://${import.meta.env.VITE_APP_RESTAPI_IP}:8080/api/v1/products-management?offset=${currentPage}`;