[React/MBTI] JSON Server 500 에러 발생: 원인 분석 및 해결 방법

🔍 문제 상황

회원가입 시, 인증 서버에서는 정상적으로 회원가입이 완료되었지만 JSON Server에 유저 ID를 저장하는 과정에서 500 Internal Server Error가 발생함.

에러메세지

Error: AxiosError: Request failed with status code 500
POST http://localhost:4000/users 500 (Internal Server Error)

에러메세지 - 브라우저 콘솔

🛠️ 원인 분석 및 디버깅 과정

디버깅 포인트: 왜 JSON Server에서 500 에러가 발생했을까?

1️⃣ JSON Server 실행 상태 확인

JSON Server가 정상적으로 실행 중인지 확인해봤다.

• 터미널에서 json-server가 정상 실행 중인지 확인

• 혹시 서버가 터졌으면 CTRL + C로 종료하고 다시 실행

• 실행 커맨드:
  npx json-server --watch db.json --port 4000
  (패키지 매니저로 yarn을 사용하면 npx 대신 yarn json-server --watch db.json --port 4000)

2️⃣ POST 요청 데이터 검증

500 에러 원인은 보통 db.json 구조랑 안 맞거나, 요청 데이터가 예상과 다를 때 발생한다.

JSON Server로 전송되는 데이터가 올바른지 확인하기 위해, axios.post()를 호출하기 전에 console.log()를 추가함.

원인이 된 코드를 보면, 회원가입 요청 데이터(formData)를 한 번 콘솔에 찍어본 이후, 인증 서버의 응답을 콘솔에 출력하고 있다.

✅ 인증 서버에서는 회원가입 성공했음.
❌ 하지만 JSON Server에 유저 ID 저장하는 과정에서 500 에러 발생.

3️⃣ JSON Server에 users 배열 존재 여부

만약 users 키가 없다면 추가 후 JSON Server를 재시작해야 함.
지금은 있으니까 데이터가 잘 들어오는지만 확인해본다.

JSON 서버를 확인해 보니 users 배열은 존재하지만, 들어온 데이터는 역시 없다.

🛠️ 해결 방법

정리
✅ JSON Server가 실행 중인지 확인하고 필요하면 재시작
✅ db.json에 users 배열이 있는지 확인
✅ axios.post() 전에 console.log(userData) 해서 JSON Server에 보내는 데이터를 확인
✅ id가 중복되었는지 확인
✅ id를 문자열로 변환해서 보냄

과정

• 서버 확인을 vscode에서 해야하나 터미널에서 해야하나? 궁금증이 생겨 찾아봤다.

둘 다 가능하지만, VS Code 터미널에서 실행하는 것이 좋다고 한다.

• VS Code에서 터미널 열고, JSON Server가 있는 프로젝트 폴더로 이동.

• yarn json-server --watch db.json --port 4000
  나는 패키지 매니저로 yarn을 쓰고 있기 때문에 위 코드를 사용했다.
  실행하면 JSON Server가 http://localhost:4000에서 돌아가고, db.json 변경 사항을 자동 반영한다.

처음엔 에러가 났다.

문제: EADDRINUSE (Address Already in Use)

이미 4000번 포트를 이미 다른 프로세스가 사용하고 있었음.

🔧 EADDRINUSE (Address Already in Use) 해결 방법

기존 JSON Server 종료 후 다시 실행

✅ 현재 실행 중인 프로세스 확인
lsof -i :4000(Mac & Linux 전용)

보통 숫자로 된 포트 번호가 나와야 하는데, terabase처럼 문자열이 나온 이유는
OS가 해당 포트에 등록된 서비스 이름을 매칭해서 보여주기 때문.

/etc/services 파일을 보면, 특정 포트에 대한 이름이 정의돼 있음.
terabase는 잘 알려진 서비스 이름이 아니라, 커스텀으로 설정된 네트워크 서비스일 가능성이 있다고 한다.

• terabase가 현재 4000번 포트를 쓰는 건 맞다.
  lsof 또는 /etc/services를 확인하면 포트 번호를 알 수 있다고 한다.

✅ 실행 중인 프로세스 종료

• kill -9 52799에서 52799는 4000번 포트에서 실행 중인 프로세스 ID (PID)이고, -9는 강제 종료(SIGKILL) 시그널이라고 한다.

• kill -9에서 -9의 의미
  -9는 SIGKILL 시그널을 의미한다고, 실행 중인 프로세스를 즉시 강제 종료하게 된다.
  일반적인 kill PID (기본적으로 -15 사용)로 종료되지 않는 경우 강제로 프로세스를 종료시킬 때 사용한다.

kill -9는 프로세스가 정리 작업 없이 바로 종료되므로, 열린 파일, 데이터베이스 연결, 캐시 등이 비정상적으로 닫힐 수 있으니,
보통의 kill PID_NUM 먼저 시도하고, 안 될 때 kill -9 사용!

잘 죽었따. 🐱
이후 JSON Server를 재시작해 주었다.

사실 여기까지의 과정은 불필요했다고 느낀 것이, 여기까지 했는데도 여전히 500 Error가 계속 발생했기 때문.

🔧 Error: Internal Server Error 해결 방법

JSON Server에 보낼 데이터 구조 수정

원래의 오류가 발생하던 코드를 보자.

POST 요청을 보낼 때 객체로 감싸야 하기 때문에,

response.success && (await addUserToJsonServer({ id: formData.id }));

위 코드와 같이 json Server에 보내는 데이터 구조를 기존 문자열에서 객체로 변환했다.

{ id: "asdf1234" } 형태로 바꾸자마자 감쪽같이 해결됨.
뭐하러 멀쩡한 서버 죽였다 다시 실행했니..?

- 수정 코드

- 디버깅 완료
이제 회원가입 후 서버에 유저 ID가 정상적으로 저장된다.