Q1. URL의 구성 요소 중 쿼리가 무엇인지 실제 웹 서비스의 쿼리를 예시로 설명해 주세요.
A1. URL(Uniform Resource Locator)에서 쿼리란 쿼리 파라미터(Query Parameter)를 의미하며, HTTP 통신에서 클라이언트가 서버측에 보내는 데이터 중 하나이다. 쿼리 파라미터는 URL의 Path에서 물음표(?) 문자 뒤에 키-벨류 형식으로 작성하는 것을 통해 전달할 수 있다.
예를 들어서, https://sample.com/viewPost?postnum=293&category=normal 라는 URL에는 postnum=293, category=normal라는 두 개의 키-벨류 쌍이 포함되어 있다.
Q2. HTTP로 서버에 데이터를 보내는 방식에 대해 실제 웹 서비스를 예시로 리퀘스트, 리스폰스를 설명해 주세요. (크롬 개발자 도구를 활용합니다)
A2. 크롬 개발자 도구를 열어 네트워크 탭을 연 상태에서 코드잇 홈페이지(https://codeit.kr)에 접속해 보자.
가장 처음으로 요청된 GET 요청을 예시로 들어보겠다.
첨부된 스크린샷을 보면 https://www.codeit.kr/dashboard 라는 URL에 GET 요청을 보내고 있다. dashboard 뒤에 물음표(?) 기호와 쿼리 스트링이 없으니, 이 요청은 파라미터 없는 단순 GET 요청이다.
해당 요청은 서버에 dashboard라는 파일을 불러오도록 하는 요청인데, 서버가 이 요청을 받으면 웹 서버의 스토리지의 상대 경로에 dashboard라는 파일이 있는지 찾아보고, 파일이 있으면 200번대, 없으면 400번대 응답 코드를 클라이언트에게 보낸다.
스크린샷의 Status Code 부분을 보면, 서버로부터 도착한 응답 코드는 200(OK)이다. 이는 일반적으로 서버에 해당 파일(또는 엔드포인트)이 있으며, 응답 바디에 관련 데이터를 포함하여 전달했다는 의미이다.
크롬 개발자 도구의 Response 탭을 열면, 코드잇 dashboard에 해당하는 HTML 데이터가 담겨 있다.
웹 브라우저(클라이언트)는 해당 HTML 코드를 통해 사용자에게 보여줄 웹 사이트의 뼈대를 그리고, 이어서 다운로드받은 CSS와 Javascript를 통해 우리에게 익숙한 최종적인 웹 사이트가 보이게 된다.
