안녕하세요. 이제 갓 2년차에 접어든 프론트엔드 개발자입니다.. 이 글은 제가 부캠, 실무1년중 백엔드분들과의 소통시 항상 머리속으로 그리던 의식의 흐름 플로우를 작성해봤습니다! (제 기준) 이정도까지 체크했는데 안되면 백엔드에게 토스 가능하다고 봅니다! (물론 제 기준이에요 .. ㅜ)
1. 넘겨받은 api 문서 그대로 코드를 짠다.
2. 코드를 실행한다.
3. 에러가 발생한다. 혹은 원하는 데이터가 넘어오지 않는다.
4. 백엔드 개발자님을 호출한다. ("이거 안돼욧! 봐주세여!! 뿌엥")
이러면 안됩니다..! 그거 들어보셨죠 구조를 요청할때는
"거기 빨간옷 입으신 여학생분! 지금당장 119에 전화해주세요!"
라고 해야 한다는 내용. 얘랑 비슷한 맥락으로 백엔드 개발자님에게 에러상황을 넘기려면
어떤 api에서 어떤 요청을 보냈을때 어떤 에러가 떴다! 를 전달드려야 백엔드 개발자분들이 파악하고 확인이 가능합니다.
그럼 어떻게 에러상황을 넘기냐! 이제 세세한 시나리오로 들어가 봅시다.
1. 개발자 도구의 네트워크 탭을 킨다.
1.1 원하는 페이지에서 해당 api 요청이 넘어갔다. -> 2로 이동
1.2 원하는 페이지에서 해당 api 요청이 발생하지 않았다. -> 3로 이동
2. 네트워크 탭의 해당 api를 클릭하여 Payload 탭을 클릭한다.
에러 status code를 확인한다.
https://www.whatap.io/ko/blog/40/ 여기서 한번 어떤 모양의 오류인지 확인해보시면 좋을것같습니다.
일반적으로 저의 경우에는
404에러 -> 엔드포인트 잘못 입력
500에러 -> 백엔드쪽에서 개발 이후 문서 작성은 했지만 푸시를 안함(?)
2.1 백엔드 api 문서를 키고 내가 올바른 endpoint, 올바른 method(GET,POST,DELETE,PUT...), 올바른 방식(body에 request 값을 담는지, parameter로 넘기는지...),올바른 변수명(중요)으로 데이터를 요청하는지 다시한번 확인한다.
저같은 경우는 보통 2.1 에서 걸려서 수정,해결해왔습니다2.2 그럼에도 불구하고 원하는 데이터가 넘어오지 않는다거나 에러가 발생한다.
위대하시고 멋지신 백엔드 개발자님... 제가 이런 api로 이런 요청을 이런 request 값으로 보냈는데 원하는 데이터가 들어오지 않아요.. 혹은 에러가 발생해요.. 시간이 나신다면 한번만 봐주시겠어요..?? (간절)
에러 발생시 response탭으로 에러 메세지가 들어오니 해당 메세지도 함께 보여드린다면 더 쉽게 찾으실거에요.
3. Console 탭을 켜 오류가 발생했는지 확인한다.
3.1 오류가 있다. -> 오류를 해결한다.
3.2 오류가 없다. -> 코드를 킨다.
코드에서 해당 api를 호출하는 위치에서 해당 호출 함수등이 라이프사이클 내에서 정확히 작동하는지 콘솔을 찍어가면서 확인한다.!
내 기준 이정도만 확인해도 이거안대여!! 하고 앗 제가 잘못했네요 (머쓱) 하는 상황은 거의 없었으니까 다들 최소 이부분은 확인하고 넘기도록 합시다!!
