크롬 개발자도구를 잘 활용해보자! 1) Network 활용하기

 

안녕하세요.

 

이번 포스팅에서는 제가 크롬의 개발자 도구를 사용하면서 가장 많이 사용한 기능 중 하나에 대해 소개합니다.

프론트엔드 개발자라면 개발자 도구는 사용하지 않을래야 사용하지 않을 수가 없을 거에요.

특히 이 기능은 Rest API를 연동하는 작업을 할 때 효율적으로 사용할 수 있습니다.

 

 

 

---

 

우선 개발자 도구의 Network 탭을 열어 봅시다. 맥 기준 cmd + shift + c를 누른 뒤 상위 탭에서 Network를 선택합니다. 

그리고 구글에 아무거나 검색해 볼까요?

 

이 Network 탭에서는 XHR(XMLHttpRequest)를 포함해 JS, CSS, IMG등의 정적 파일까지 로드가 잘 되고 있는지에 대한 정보가 나옵니다.

여기서 XHR은 AJAX 요청을 생성하는 JavaScript API입니다. 프론트엔드단에서 Rest API를 호출하는 AJAX 요청을 했다면 이 XHR이 생성되게 될 것입니다.

 

XHR 탭을 따로 클릭해 보겠습니다.

구글에서 검색 기능을 사용했기 때문에, 검색어에 해당하는 검색 결과가 나오는 API가 호출되었을 것입니다. 그 외 기타 구글에서 연동해 놓은 Rest API에 대해 나옵니다. Status가 200이니 서버가 요청을 정상적으로 처리했다는 뜻이겠네요. 특히 하나하나 클릭해 보면 Header, Response, 걸린 시간 등등 다양한 정보를 직접 확인할 수 있습니다. 어떻게 보면 Postman보다도 더 강력한 기능을 제공하기도 합니다.

 

이 Network 탭의 기능을 사용하면 직접 만들고 있는 Rest API에 대해 더 효율적으로 오류의 원인을 분석하고 개선할 수 있습니다. 어떠한 이유로 서버에서 블락당했고, 서버에서 어떤 Response를 내놓았으며, 어떤 서버 코드로 오류가 발생했는 지 알 수 있으니까요.

 

---

자, 이제 직접 사용해 봅시다.

하나의 Form이 있고, 이 Form을 작성한 후 작성 내용에 따라 POST 요청을 한다고 가정해 봅시다.

(하나의 예일 뿐, Rest API를 연동하는 단이라면 어디서든 사용 가능합니다)

 

저는 제 홈페이지에 추가한 이 임시로 만든 조악한 폼에, 임시로 만든 Rest API를 연동해 보도록 하겠습니다.

너무 대충 만든 것 같습니다... '-'

주의할 점은 Rest API를 연동하기 전에 미리 Network 탭을 열어 놔야 한다는 것입니다.

 

서비스의 흐름에 따라 다양한 API가 호출되고 있습니다. 게다가 예전에 홈페이지에 Hotjar 코드를 심어놨더니 Hotjar가 열심히 일을 하고 있는 모습도 함께 볼 수 있네요. (Hotjar에 대해서는 나중에 포스팅하도록 하겠습니다)

 

자, 이제 폼을 작성하고 POST 요청을 하는 API를 사용하였는데 서버 단에서 오류가 났다고 가정해 봅시다.

서버 쪽에서 수정을 하고, 저장을 했지만 수정된 결과를 확인하고 싶어도 이미 오류가 발생하여 작동이 중지된 상태입니다.

원인을 찾아보니 서버 코드가 잘못되어서 서버에서 에러를 뱉었다는 가정을 해 봅시다.

이럴 경우 폼이 초기화되기 때문에 다시 작성하고 다시 POST 요청을 넣어야 할 것입니다.

 

서버에서 원인을 찾아 에러를 해결하고, 수정을 했지만 이미 폼이 초기화되었기 때문에 폼을 다시 작성하고 다시 요청해야 할 것입니다.

이 과정이 반복되면(서버에서 코드 수정이 잦아지면) 매우 귀찮은 작업이 될 것입니다.

이럴때는 Replay XHR라는 기능을 사용하면 됩니다. 아까 Network 탭에서 XHR 목록을 확인할 수 있다고 했죠?

 

 

이 Replay XHR을 사용하면 아까 HTTP 요청을 한 것을 그대로 다시 요청해 줍니다. 굳이 폼에 다시 작성할 필요 없이, 아까 폼에 작성한 내용을 바탕으로 다시 요청을 할 수 있게 됩니다. 이러면 불필요하게 다시 폼을 작성할 필요가 없겠죠?

심지어 백엔드 코드를 수정하고 다시 이 회원가입 페이지로 이동해야 하는 것 까지 고려하면 너무 비효율적이죠. 이럴땐 이 Replace XHR을 사용합시다. 

 

---

 

저는 프론트엔드와 백엔드를 동시에 개발하는 경우가 더 많았기에, 개발자 도구에서도 특히 Network 탭을 많이 사용했습니다.

개발자 도구는 UI 관련 코드를 짤 때도 많이 이용하기도 하지만, 이렇게 HTTP 요청의 흐름과 결과를 전부 볼 수 있는 기능을 제공합니다. 이를 통해 더욱더 효율적인 개발을 할 수 있을 것입니다!

 

 

이상으로 포스팅을 마칩니다.