[MBTI 테스트] - JSON 데이터를 get했는데 네가 왜 거기서 나와?

문제 상황

JSON 서버에 있는 데이터가 잘 가져와지는지 테스트를 해보고 있었다.

JSON 서버에 임시로 적어둔 데이터는 전혀 가져와지지 않고, HTML 태그들이 가져와졌다.

도대체 무엇이 잘못된 것일까?

 

 

문제 원인 및 해결 과정

JSON 서버의 url 설정이 잘못된건가 싶어서 이것저것 시도해보았다.

 

👀 기존의 JSON 서버 URL 설정 확인하기

.env 파일에 JSON 서버 URL 변수를 따로 만들어 가져오고 있었다.

VITE_SERVER_URL = 회원가입/로그인 url
JSON_SERVER_URL = http://localhost:4000

 

url을 한 곳에서 관리하기 위해 axiosInstance 파일을 따로 만들었다.

baseURL을 설정할 때 env 파일에서 서버를 가져오고 있었다.

import axios from "axios";

export const authAPI = axios.create({
  baseURL: import.meta.env.VITE_SERVER_URL,
});

export const jsonAPI = axios.create({
  baseURL: import.meta.env.JSON_SERVER_URL,
});

 

✅ JSON 서버 URL 설정 수정하기

다시 자료를 찾아보니 Vite 프로젝트에서는 .env에 들어가는 변수명을 제대로 지정해줘야 된다고 한다.

VITE_원하는변수명 = 값

이런 형태로 설정해줘야 값을 인지할 수 있다!

 

VITE_AUTH_SERVER_URL = 회원가입/로그인 url
VITE_JSON_SERVER_URL = http://localhost:4000

앞에 VITE를 붙여준 뒤에 원하는 변수명으로 설정해주었다.

 

그리고 여기서 중요한 점은!

다시 서버를 껐다 켜줘야 제대로 적용이 된다.

yarn json-server db.json --port 4000

 

 

결과

모든 걸 적용하고 다시 확인해보면...

다음과 같이 데이터가 잘 불러와진다.