네트워크 패널 사용법

개발을 처음 배울 때는 그냥 기능이 잘 작동하는 데에만 초점을 맞춰 프로젝트를 진행했었지만, 

 

이런저런 경험이 쌓이다 보니 자연스럽게 유저의 입장에서 개발을 진행하게 되는 듯하다. 

 

그중 중요한 한 가지 고민되는 부분은 이렇게 코드를 짜면 유저입장에서 느리다고 생각되지 않을까? 와 같은 고민이다. 

 

예를 들어 지금 진행하고 있는 토이프로젝트에서 화면을 새로고침 할 때마다 데이터를 새롭게 가져오는 방식이 과연 유저한테 좋은 방식일까? 이런 방식이 유저 입장에서 느리다고 생각되지는 않을까? 등과 같이 고민에 고민을 더하게 되는 듯하다. 

 

오늘은 과연 내 웹앱이 느린지 안느린지 판별하는 방법에 대해 알아보려고 한다. 

How to Effectively Inspect Network Activity in Chrome Dev Tools

구글 크롬 개발자 도구로 네트워크 활동 효율적으로 확인하기

최근의 인터뷰에서 웹사이트의 데모 버전을 보여주고 데이터테이스의 값과 맞지않는 부정확한 값이 디스플레이 되고 있다는 문제를 받았다. 그리고 이 문제를 어떻게 디버깅하고 어디서 문제가 발생했는지 찾는 방법에 대해 질문받았다.

이런저런 대화를 나눈 뒤에 디버깅 프로세스에 대해서는 논의를 나눌 수 있었지만 처음 필자가 대답한 답변은 너무나 console.log()에 초점이 맞춰져 있었고 인터뷰 담장자는 나에게 구글 크롬 개발자 도구의 네트워크 패널을 이용할 것을 조언했다. 이전의 프로젝트에서 몇 번 구글 크롬의 네트워크 패널을 살펴본 경험이 있기 때문에 이번 기회에 디버깅 프로세스 향샹을 위해 구글 크롬 개발자 도구의 해당 부분을 더욱 깊게 파고들 가치가 있다고 생각하게 되었다. 그래서 이번 블로그에서는 크롬에서 도움이 될만한 팁과 트릭에 대해 공유하고자 한다. 

Getting Started

크롬을 통해 네트워크 패널에 접근하려면 개발자 도구를 열고, 네트워크 옵션을 드롭다운 메뉴에서 클릭한다. 

한 가지 명심할 점은 크롬은 네트워크 패널이 열려있을 때 발생하는 네트워크 요청에 대해서만 보여준다. 만약 페이지를 로드하고 하무것도 발생하지 않는 다면 네트워크 패널을 열어 둔 상태에서 새로고침 버튼을 누르면 된다. 

Inspecting Network Requests

자 그럼 이제 한번 깊게 들어가 보자. 데모용으로 취업 어플인 The Next Step이라는 어플에서 Get 요청을 보냈을 때 나타는 현상을 살펴보겠다. 잡서치 페이지로 이동하면, 네트워크 탭은 아래와 같이 로드된 엘리먼트들이 나타난다. 

 

그리고 웹사이트에서 잡을 탐색하기 위해 서치 버튼을 클릭하면 네트워크 탭은 Get 요청에 따라 어떤 결과들이 API를 통해 얻어지는지 그 결과를 업데이트 할 것이다.

이 과정이 디버깅을 하기 위해 첫번째로 하는 과정이다. 네트워크 요청이 실제로 이루어지고 있는지 확인할 수 있기 때문이다. 

 

그리고 요청을 클릭하면 아래과 같이 더욱 자세한 부분을 확인할 수 있다. 

여기 헤더부분에서 요청에 대한 상태 코드와 파라미터를 확인할 수 있다. 가장 중요한 점은 응답 그 자체를 확인할 수 있다는 점이다. 

 

이 점이 네트워크 패널이 정말 유용한 점이다. 만약에 어플의 데이터베이스에서 무언가를 가져왔고 응답이 예상과는 다를 때, 문제가 백엔드에 있음을 확인할 수 있고 console.log()로 일일이 귀찮게 탐색할 필요가 없다. 만약 응답이 예상과 같다면 어플의 프런트엔드 부분을 고쳐야 한다는 것을 알 수 있다. 

 

Simulating Different Speeds

또 다른 도움이 될만한 기능은 다른 네트워크 속도에 따른 상황을 시뮬레이션을 할 수 있도록 하는 기능이다. 네트워크 도구 메뉴에서 'Online'이라는 단어 옆에 네트워크 속도에 따라 어떻게 페이지가 보여질지 선택할 수 있는 드롭다운 메뉴가 있다. 

 

빠른 Wifi를 이용해 프로그래밍을 하다보면 사람들이 불안정한 스마트폰으로 웹사이트를 이용한다는 점을 간과하곤 한다. 빠른 3G 혹은 느린 3G로 사이트를 테스트하면 타이밍과 웹사이트의 로딩 결과를 다양한 시나리오로 테스트하고 필요한 조정을 할 수 있다. 

---

 

 

 

출처: https://medium.com/@ConnorFinnegan/how-to-effectively-inspect-network-activity-in-chrome-dev-tools-fd18592a735a#:~:text=To%20access%20this%20feature%20in,the%20Network%20panel%20is%20open.

How to Effectively Inspect Network Activity in Chrome Dev Tools