아래 내용은 이전에 영화 프로젝트에서 진행했을때
함께했던 팀원이 로그인/회원가입에서 사용하던 방식을 토대로 작성했다.
내가 작성했던 코드가 아니여서
코드 하나하나 이렇게 작성한 이유와 좋은점을 되짚어보면서 공부하기 위해서
언젠가 또 백엔드 연결하려 할때 헤매지 않기 위해서 작성한다.
1. .env 파일 생성
env 파일은 local, dev, prod 등으로 용도에 따라 나눠서 사용한다고 봤던것같다.
우선은 토이프로젝트에서 진행하는것이기 때문에 .env.local로 파일을 생성하고 아래 코드를 작성했다.
VITE_API_URL = "백엔드주소"2. api 폴더 생성
: api 요청 목적에 따라 파일로 분리하여 관리하기 위해 별도의 폴더를 생성
2-1. index.js 파일 생성
백엔드 주소를 간편하게 사용할 수 있도록 변수를 설정해준다.
export const API_PREFIX = import.meta.env.VITE_API_URL + 'api';2-2. 기능.api.js 파일 생성
인증과 관련된 api 요청들을 메서드(함수)로 만든다.
// 예시
import {API_PREFIX} from '.';
export const AUTH = `${API_PREFIX}/auth`;
export const fetchUser = () => {
return fetch(url)
}3. hooks 폴더 생성
: 커스텀 훅들을 관리
3-1. 인증관리 훅 생성
삐약