[JavaScript-75] request의 구조, 개발자도구 network탭에서 request직접 확인하기

모든 request는 head와 body부분으로 이루어져 있습니다.

각 부분의 역할은 다음과 같습니다.

 

(1) head: request에 관한 정보가 담깁니다. 이게 GET, POST, PUT, DELETE중 뭔지부터 시작해서, 기타 정보들이 담깁니다.

이런 부가 정보들은, 여러 개의 header(헤더)라고 하는 이름을 가진 키:값 쌍으로 구성됩니다.

(2) body: request시 보낼 데이터 자체가 담기는 공간입니다. 예를 들어, 5라는 데이터 추가해줘~ 하면, head에는 POST, body에는 5를 줘야겠죠?

 

조금 더 생각해보면, 데이터를 조회하거나 삭제해달라는 GET, DELETE request는 body부분이 비어있을 수도 있겠죠?

 

자, 이제 이론은 여기까지 하고, 실전으로 들어가봅시다!

요청을 보내는 보다 자세한 코드는 나중에 배울것이니, 일단 오늘은 어떤 요청이 있었다고 가정하고,

그 request를 어떻게 확인하는지 알려드릴게요.

 

개발자도구를 열어주시고, network탭에 가시면 됩니다!

개발자 도구의 network탭에서는 브라우저와 서버 사이의 통신 과정을 모두 살펴볼 수 있고, 

request, response의 모양을 일일이 확인해볼 수 있습니다!

 

저는 fetch함수로 request를 보냈다 가정해볼게요.

그러고 나서 개발자도구에 들어가보면...

자 이렇게 콘솔에 fetch함수로 get요청을 보내고..(fetch는 모르셔도 됩니다. 나중에 알려드릴거니까!! 아주 깊게 배울 예정!!)

콘솔에 입력하셔야 바로 확인하기 편하다는 점 기억하기!!

또, IDE에 코드를 미리 입력하시고, 복붙만 하시는거 추천!!(콘솔 줄 바꿈 때문에..ㅎㅎ)

네트워크 탭에 들어가보면, 

이제 헤더가 잘 보이는 것을 알 수 있죠?

아까 처음에 정리해드렸는데, header는 head의 구성요소들 하나 하나를 칭하는 말로, 키: 값 쌍이라 그랬죠?

즉, 해당 request나 response에 관한 정보들을 키: 값으로 정해둔거죠.

 

그럼, 위 사진의 응답 헤더를 보면, 한 줄 한 줄이 헤더고, 각각 응답에 관한 정보를 담고 있는거겠죠?

주의할건, 이건 응답이나 요청에 관한 "정보" 이지, 데이터 자체가 아니라는 점!

 

그리고 가장 중요한거!! 요청 메소드가 GET이라고 나와있죠?

이렇게, 개발자도구의 network탭에서 request, response가 어떤 요청이나 응답인지부터 시작해서, 

여러 정보를 확인할 수 있습니다!

신기하죠? ㅎㅎ