TMI

아직 모든 도전기능까지 구현한 건 아니지만, 제출 전에 배포에서 문제가 터지면 머리가 아프니 미리 해보기로 했다

후기 : 미리 해보길 잘했다. 오류가 무슨....

json-server 배포

배포 방법

mkdir mbti-server
cd mbti-server
npm init -y

^ 우선 서버로 설정할 directory를 만들어 준다

그런 후 server.js, db.json파일을 만들어주고, package.json의 script와 devDependency를 설정해주어야 한다.

따로 GitHub에 public repository를 생성해준다
그리고 Glitch를 통해 서버를 배포해주면 끝이다.

• 회원가입 및 GitHub 연동
• 홈화면 우측상단헤더에 New Project → import from Github
• 상세화면 우측상단헤더 Share → Live site 주소 (배포된 서버 API_URL)

+) testResult axios 인스턴스 생성

auth.js 부분과 마찬가지로 axios를 사용하던 중이었기에 이참에 인스턴스까지 만들어 주었다.

import axios from 'axios';

// axios instance
const testAxiosInstance = axios.create({
  baseURL: '...배포받은 링크...',
});


// 요청 인터셉터
testAxiosInstance.interceptors.request.use(
  (config) => {
    console.log(
      `TEST_RESULTS\nmethod: ${config.method}\nbaseURL: ${config.baseURL}`
    );
    return config;
  },
  (error) => {
    console.log(`request error => ${error}`);
    return Promise.reject(error);
  }
);

export default testAxiosInstance;

이제 준비 완료!

... 인줄 알았으나 테스트 쪽 기능이 갑자기 와장창 깨졌다.

트러블 슈팅

1. 테스트 결과를 DB에 전해주지 못한다

2. DB의 데이터를 받아오지 못한다

filter가 function (함수)가 아니라고 쓰여있지만 사실 배열이 아닌 데이터 타입에 filter, map 등의 함수를 사용해도 나타나는 에러이다. 자주 나와서 이제는 저 에러가 뜬다면 데이터 타입 의심부터 해본다.

원인 찾기 1 : 링크 경로 오류

생각해보자 일반 json-server를 사용할때 아래의 URL을 사용했다.

http://localhost:5000/testResults

그랬다.... 뒤에 testResults를 추가해서 경로를 설정했었다

새카맣게 잊은 사실이라 많이 황당했다ㅠㅠ

1차 해결 시도 : 경로 설정

const testAxiosInstance = axios.create({
  baseURL: '...배포받은 링크.../testResults',
});

이러면 되겠지?

응 아니야....

원인 찾기 2 : axios.post 인자

원래 있던 testResult.js에서 API_URL이 필요 없으므로 testAxiosInstance로 바꾸면서 API_URL도 다 지웠는데...

export const createTestResult = async (resultData) => {
  const response = await testAxiosInstance.post(resultData);
  return response.data;
};

... 저런 상태였다
post는 항상 인자를 두개 받으니 이 사실 잊지 말것!

2차 해결 시도 : post에 경로 설정

이미 testAxiosInstance에서 baseURL을 정해줬으므로, 그냥 "/"만 붙여주면 될것 같았다.

export const createTestResult = async (resultData) => {
  const response = await testAxiosInstance.post("/", resultData);
  return response.data;
};

그리고 나서 확인해본 결과

데이터가 잘 들어가서, testResult 페이지도 다시 잘 동작한다는 것을 확인 했다

마치며...

배포는 늘 예상치 못하는 에러를 준다