[ Weekly Paper 01 ] URL의 구성 요소(쿼리) / HTTP 서버 데이터 방식

 

안녕하세요, 김데이입니다. 

이번 주에 공부할 주제는 웹 기초 영역인 URL과 HTTP에 관련한 내용입니다^^

 

위클리 페이퍼 주제 (2025.09.22 ~ 26)

✅ URL의 구성 요소 중 쿼리가 무엇인지, 실제 웹 서비스의 쿼리를 예시로 설명해 주세요.

✅  HTTP로 서버에 데이터를 보내는 방식에 대해 실제 웹 서비스를 예시로 리퀘스트, 리스폰스를 설명해 주세요.

 

---

 

Q1 - 1. URL 구성 요소 

- Protocol(프로토콜) : HTTP, HTTPS 처럼 서버와 클라이언트 간에 어떤 방식으로 통신 할지 정하는 통신규약

- Domain(도메인) : 각 웹사이트의 IP 주소를 사람이 사용하기 쉽게 만들어  문자형 주소 

- Path(패스) : 도메인에 속해 있는 리소스(하위 페이지, 특정 파일등) 의 위치

- Query(쿼리 스트) : 해당 서버에 추가 요청(검색어 입력, 필터링 등) 을 하는 경우, 해당 파라미터를 기제 

URL 구성 요소 예시

 

 

Q1 - Final . URL 구성요소 중 쿼리 & sample

네이버 블로그 메인페이지에 접속한 경우 기본 쿼리 부분, paging 숫자가 1을 가리키고 있음.

 

네이버 블로그 메인페이지서 paging 숫자를 5로 바꾸자 5페이지로 변경 됨.

 

네이버 블로그를 예로 보면, [directoryNo=0&currentPage=1&groupId=0] 부분이 쿼리 스트링(=쿼리 파라미터) 영역으로 확인 됩니다. 다른 파라미터의 역할은 정확히 확인 할 수 없었으나 중간의 "currentPage=1"는 전체 블로그 목록의 "페이징"을 담당하는 것으로 확인하였고, 이를 통해 하단 페이 버튼을 누르지 않고 "currentPage=5"로 변경하여 5페이지로 이동 할 수 있었습니다.

 

네이버 블로그 바로가기 >>>

 

---

 

 

Q2 - 1.  HTTP란?

- HTTP : HyperText Transfer Protocol의 약자로, 서버와 클라이언트 간의 데이터를 주고 받은 통신규약. 해당 방식이 가장 흔하게 사용되며 조금 더 보안을 높인 방식으로 HTTPS 가 있다. 

 

- JSON : 서버와 클라이언트가 주고 받는 데이터의 형식으로, 객체 형식으로 생겼으며 키와 값을 이용하여 정보를 표기.

JavaScript Object Notation으로 자바스크립트가 객체를 표기하는 방식에서 시작 된 형식. 

 

 

Q2 - 2. HTTP로 서버에 데이터 주고받기 TEST!

- "Postman"으로 API 확인하기(https://www.postman.com/) : API의 정보를 쉽게 확인 할 수 있는 서비스 

 

[ Postman 사용하기 ]

1. 회원가입 진행 후 자신의 페이지로 와 [Workspace] 하위 영역 중 "My Workspace" 로 접속
2. 왼쪽 메뉴 중 [Collections] 를 선택 한 상태에서 "new" 버튼을 눌러 새로운 작업 시작 
3. 원하는 작업 내용을 선택, API 테스트를 하기 위해서 "HTTP" 메뉴 클릭
4. 새로운 미니 작업 공간이 생성! 😉

1. 회원가입 후 상단의 Workspace 의 "My Workspace" 클릭하여 접속 2. 페이지 왼쪽의 "Collertions" 메뉴의 "new" 버튼을 눌러서 새로운 작업 영역 생성

3. 여러 작업 중 "HTTP" 선택 / 4. 새로운 작업 공간 완성!

 

 

만들어진 작업 공간에서 왼쪽 [GET]을 누르면 HTTP 메서드(요청어)가 나오고, 오른쪽 빈 칸에는 API 주소를 입력하는 구조로 되어 있습니다. 

좌측 : 서버에서 진행 할 요청어 선택 / 우측 : 정보가 저장되어 있는 API 주소 입력

 

[ HTTP 메서드 (요청어) 종류 ]

• GET : 원하는 데이터를 받아옴. 쿼리스트링을 추가하면 세부적으로 받아 올 수 있음
• POST : 신규 데이터를 업로드 하는 작업
• PUT : 서버에 있는 기존 데이터를 보내는 신규 데이터로 전부 교체 하는 작업
• PATCH : 보내는 일부 데이터만 교 하는 작업
• DELETE : API에 저장되어 있는 데이터를 삭제, 보통 ID 같은 고유 값을 함께 사용
• HEAD : GET과 비슷한 기능으로 HEAD의 정보를 받아오는 요청어, 주로 서버의 상태 / 리소스의 존재 여부 등 확인
• OPTIONS : 서버가 지원하는 HTTP 메서드 확인용 명령어.

 

 

Q2 - Final . HTTP 리퀘스트, 리스폰스 예시

 

• 리퀘스트 : 클라이언트(브라우저, 앱, 개발자 등)가 서버에 특정 행위를 요청하는 메세. HTTP 메서드(GET,POST등)와 함께  URL (+파라미터) , Header, body(json) 으로 발송하는 요청문.
• 리스폰스 : API 서버가 요청을 받아 처리 결과값과 응답 데이터를 보내주는 것. 상태 코드와 상태 메세지, 그리고 결과값(body with json)을 함께 보내줌.

 

 

 

 - 리퀘스트 / 리스폰스 성공 작동 예시

[리퀘스트] 개발자가 받고자 하는 데이터(GET)를 퀴리 스트링[ ?offset=10&limit=2 ] 을 통해 요청, 
[리스폰스] 정상 작동 메세지와 함께 body 영역에 해당 데이터가 나옴

상단 박스 : 리퀘스트 영역 / 하단 박스 : 리스폰스 영역, 정상적으로 응답을 받아왔다는 표시와 함께 내용 표기

 

 

 - 리퀘스트 / 리스폰스 실패 작동 예시

[리퀘스트] 개발자가 받고자 하는 데이터(GET)를 퀴리 스트링[ ?offset=10&limit=500 ] 을 통해 요청, 
[리스폰스] 보낸 리퀘스트가 올바르지 않다는 에러 코드와 메세지 반환.

상단 박스 : 리퀘스트 영역 / 하단 박스 : 리스폰스 영역, 요청한 리퀘스트가 잘못되었음을 알려줌

 

---

 

다음 주에 또 만나요 🖐️