혹시 API 연결... 애먹으신 경험 있나요?

어느 때처럼 React로 씨즌넷 방송국 인하우스를 만들던 하루
그러나 갑자기 API와 관련하여 씨름하게 되는데...
지금부터 그 때 발생한 오류들과 해결책을 보러 가시죠!!

1. 엔드포인트 확인&새 API 생성

1) 엔드포인트 확인

엔드 포인트를 확인하는 것은 가장 기본적이면서도 중요한 업무죠
백엔드가 만들어준 swagger를 보면서 차근차근 맞춰야 하는데!

우리의 송모씨(23)세는 엔드포인트 확인을 제일 늦게 하고 다른 기능 이상부터 체크하느라 시간이 오래 걸렸다
그러니까 부서를 불러오지 못하죠!
또한 문제가 하나 더 있었다
SSIZENT_API를 사용해야 하는데 일부 코드에는 반영하지 않은.

이렇게 SSIZENT_API를 사용하고 엔드포인트 확인을 해도...! 문제가 해결되지 않았다

2) 새 API 생성

회원가입 과정에서 아이디 중복확인에 사용된 아이디는 auth/signup 이었다
그래서 난 회원가입할 때 사용하는 아이디만 따로 확인하는 형태로 만들었지만 데이터 방식이 맞지 않아서 계속 에러가 발생했다

그럼 회원가입 전용 API를 새로 만들어야 하는거 아닌가?
라는 생각이 들어서 백엔드와 이야기를 해본 결과,
auth/idCheck API를 새로 만들어서 연결해보니
드디어 department가 뜬다!!!

2. 에러 메시지 파악하기

여기서 회원가입/로그인이 마무리 되면 좋지만~ 또다른 에러가 계속해서 발생한다 ㅎㅎㅎ

이 부분은 생각보다 정말 시간이 많이 들어갔다
검사에서 404가 뜨는걸 보고 프론트 어디에서 또 문제가 나는걸까를 계속 고민하게 되는 문제에 빠지게 된 것이다

이번에는 SSIZENET_API도 제대로 썼고, 프론트에서 기능적인 오류가 없는거 같다는 생각이 들어서 계속 찾아보면서 빠진 것을 확인했다

일단 혹시 모르니까 postman으로 확인을 해주면?
백엔드의 문제는 아닌걸 깔끔하게 확인하고
프론트에서 문제를 고치기로 한다

1) 에러 메시지 확인하기

auth/idCheck 회원가입 시 아이디 중복 확인을 하는 부분이었는데, 분명 백엔드에서 요구하는 정확한 형식대로 입력을 했음에도 불구하고...
200과 404가 번갈아 뜨는 이유를 알지 못했다

• 404의 의미가 뭘까?
  나는 일단 코드에서 잘못 구현된 부분이 있나를 보는데 중점을 두었지만, 404의 의미가 무엇인가부터 곰곰히 생각을 해보기로 했다

1) 200이 뜨는 경우
입력하는 아이디의 형식이 동일하지만 다른 반응이 나오는 것으로 입력하는 아이디 자체가 문제가 있는 것이 아니라는 것은 확인했다.
사용할 수 있는 유효한 아이디인 경우 200이 뜨는 것이라 생각했다

2) 404가 뜨는 경우
404가 뜨는 경우는 프론트 자체에 문제가 있다는 것이 아니라, 입력한 아이디가 이미 존재하여 회원가입이 불가능한 경우에 404를 리턴하는 것이라고 생각했다

그래서 백엔드와 다시 이야기해본 결과, 이게 맞았고
회원가입이 가능한 아이디인 경우 200, 이미 존재하는 아이디인 경우 409를 띄우기로 바꿨다

2) 여기서 배운 점

1. 지금처럼 postman으로 프론트의 문제인지 백엔드의 문제인지 확인해주는 작업이 선행되면 깔끔하다는 것
2. 일단 404가 뜬다고 프론트에서 문제가 반드시 발생하는 것은 아니라는 것
3. 백엔드에서 메시지는 임의로 설정해서 띄우기가 가능하므로, 너무 혼자 고민하기보다는 백엔드한테도 이러이러한 상황이다를 설명해주면 좋다는 것

그렇게 회원가입/로그인을 잘 마무리했다