문제 발생

글리치에서 json-server를 배포하는 과정에서 오류가 발생했다. 배포 후 실제 API를 호출했을 때, 예상한 대로의 응답을 받지 못하고 있었다. 그러나 개발자 도구의 네트워크 탭에서는 HTTP 상태 코드가 200으로 정상적으로 응답을 받았기 때문에, 서버에서 데이터를 잘 처리한 것처럼 보였다.

원인 추론

json-server는 데이터베이스 파일(db.json) 내의 특정 리소스(예를 들어 내 프로젝트의 경우에는 testResults)에 접근해야 한다. 즉, 단순히 기본 도메인만 지정할 경우 서버가 어떤 리소스를 조회해야 하는지 알 수 없어 오류가 발생하게 된다. 이 상황은 로컬 개발환경에서는 별도의 리소스 경로를 명시하여 사용했던 것과 다르기 때문에 발생하였다. 따라서 json-server는 Glitch에 배포할 때 리소스 경로가 포함된 URL로 접근해야 한다는 것을 알게 되었다.

해결 방법

문제 해결을 위해 BASE_URL과 리소스 경로(TEST_RESULTS_PATH)를 별도로 선언한 후, 두 값을 합쳐 최종 API_URL을 구성하도록 코드를 수정하였다.

수정 전 코드

const API_URL = "https://smart-fortunate-fighter.glitch.me"

수정 후 코드

const BASE_URL = "https://smart-fortunate-fighter.glitch.me"
const TEST_RESULTS_PATH = "/testResults"
const API_URL = BASE_URL + TEST_RESULTS_PATH;

이렇게 수정한 이유는, Glitch에서 배포된 json-server가 기본 도메인만으로는 특정 데이터를 찾지 못하고 반드시 리소스 경로(여기서는 "/testResults")를 함께 전달해야 정상적인 응답을 할 수 있었기 때문이다.
따라서 BASE_URL과 TEST_RESULTS_PATH를 분리하여 관리하면 추후 리소스가 추가되거나 변경될 때도 유연하게 대처할 수 있다.

결과

수정 후, API 호출 시 Glitch에 배포된 json-server가 올바른 엔드포인트에 접근하여정상적으로 데이터가 반환되는 것을 확인하였다.

이번 에러를 통해 서버 배포 시 기본 도메인 외에 실제 데이터 리소스 경로를 반드 확인해야 함을 깨달았다(튜터님 감사합니다).