1차 위클리 페이퍼(쿼리/리퀘스트/리스폰스/응답코드)

안녕하세요, 열심히 codeit 스프린트를 수강중인 파란쥐_입니다.

 

codeit 에서 진행하느 과제 중 하나인 위클리 페이퍼는

매주 제시된 주제에 대해 개별적으로 학습하고 정리한 뒤 팀원들과 공유하는 활동입니다.

 

1주차 위클리 페이퍼 주제

• URL의 구성 요소 중 쿼리가 무엇인지 실제 웹 서비스의 쿼리를 예시로 설명해 주세요.
• HTTP로 서버에 데이터를 보내는 방식에 대해 실제 웹 서비스를 예시로 리퀘스트, 리스폰스를 설명해 주세요. (크롬 개발자 도구를 활용합니다.)

1. 쿼리에 관하여

예시 쿼리(메이플 스토리에 캐릭터의 정보를 확인 가능한 홈페이지) https://maplescouter.com/info?name=아델&preset=00000

 

위 링크에서 쿼리는 name와 preset 으로 maplescouter.com 웹사이트에 “아델”이라는 캐릭터의 00000번 프리셋 정보를 기준으로 정보를 보여달라는 뜻 입니다.

즉 쿼리는 사용자가 원하는 특정 정보를 서버로부터 가져오기 위한 요청서 역할입니다.

 

2. 리퀘스트, 리스폰스 설명

https://api.maplescouter.com/api/id?name=아델&preset=00000®ion=kms

위 링크와 같이 id 라는 api 주소로 name과 preset, region값과 함께 요청하였고(아래 그림 참고)

 

리스폰스는 201created 코드와 함께 서버로부터 요청한 캐릭터 정보에 따른 해당 캐릭터 관련한 정보를 받았습니다.

 

---

3. 응답 코드의 종류

 위 내용에서 응답 코드가 201로 표시된 것 과 같이 응답 코드 관련 종류들이 2xx, 4xx, 5xx 와 같이 크게 백번대 숫자 종류로 구분하고 있습니다. 세 자리 숫자 중 첫 번째 숫자는 HTTP응답의 종류, 나머지 2개의 숫자는 세부적인 응답 내용을 구분하기 위한 번호입니다.

 HTPP 응답의 종류에는

 1XX : 정보 제공(infomation)

           - 임시 응답으로 현재 클라이언트의 요청까지는 처리 되었으니 계속 진행 바람.

 2XX : 성공(Success)

           - 클라이언트의 요청이 서버에서 성공적으로 처리되었음.

 3XX : 리다이렉션(Redirection)

           - 완전한 처리를 위해 추가 동작이 필요함 .주로 서버의 주소 또는 요청한 URL의 웹 문서가 이동되었으니 그 주소로 다시

             시도하라는 의미

 4XX : 클라이언트 에러(Client Error)

           - 클라이언트의 요청 메세지 내용이 잘못된 경우

 5XX : 서버 에서(Server Error)

           - 서버 문제로 메세지 처리에 문제가 발생한 경우

 

자세한 코드 종류는 아래 포스팅 참고 부탁드립니다.

https://bluehamster.tistory.com/28

웹 개발자 필수 상식! HTTP 상태 코드 총정리

---

4. 쿼리가 아닌 다른 방법으로 인자를 받는 방법

 URL쿼리가 아닌 다양한 방법으로 인자 값을 받아 활용하는 방법은 다양합니다. 방법 마다 용도와 특징이 달라 상황과 조건에 따라 알맞게 사용하는 것이 중요합니다.

 

 1. 경로 매개변수(Path Parameters)

  - fetch('/posts/123'); 와 같이 요청 경로의 일부는 변수처럼 사용하여 전달, 보통 특정 게시물 또는 사용자나 상품 등 고유한 자원을 지정할 때 사 용합니다. (ex : bluehamster.tistory.com/28 -> 제 블로그의 28번째 게시물)

 

   장점 : URL이 의미적으로 명확하고 깔끔

   단점 : 여러 개의 복잡한 검색 조건이나 선택적인 값 전달에는 부적합

 

 2. 요청 본문 (Request Body) 

HTTP 요청의 본문(Body)에 데이터를 담아 보내는 방식입니다. 눈에 보이지 않는 곳에 데이터를 싣기 때문에, 크기가 크거나 복잡하거나 민감한 데이터를 전송할 때 주로 사용됩니다. GET 요청에서는 사용할 수 없고, 주로 POST, PUT, PATCH 등의 메소드와 함께 사용됩니다. 보통 회원 가입이나 로그인 등의 민감한 정보를 전송할 때, 게시글 작성이나 상품 등록 등 새로운 데이터를 생성할 때, 복잡한 구조의 데이터나 대용량 데이터를 보낼때 사용합니다.

 

 

   장점 : URL에 데이터가 노출되지 않아 보안에 유리. 전송할 수 있는 데이터의 길이에 제한이 없음. JSON과 같은 구조적인                        데이터 를 보내기 매우 용이.

   단점 : GET 요청에서는 사용할 수 없습니다. 브라우저에서 직접 URL을 입력하는 방식으로는 요청을 보낼 수 없음.

 

 3. HTTP 헤더 (HTTP Headers) 

HTTP 요청의 헤더에 값을 넣어 보내는 방식입니다. 주로 데이터 자체가 아닌, 요청에 대한 부가 정보(메타데이터)를 전달할 때 사용됩니다. 보통 인증 정보(Authentication) API 키, JWT(JSON Web Token) 등을 전달할 때 (Authorization 헤더), 요청하는 콘텐츠의 형식, 언어 등 클라이언트의 상태 정보를 전달할 때 (Content-Type, Accept-Language 헤더) 사용합니다

 

   장점 : 요청의 URL이나 Body를 건드리지 않고 부가 정보를 깔끔하게 전달할 수 있음.

   단점 : 전달하려는 주된 데이터를 담는 용도로는 부적합합니다. 헤더의 크기 제한이 있을 수 있음.

 

---

5. 만약 내가 응답 구조 형태를 개선해야 한다면?

게시물 상단 이미지와 동일한 리스폰 body값

 리스폰 값의 바디 중 각 종 키값들이 300과 380 두 종류로 분류되는데 이것을 하나의 배열로 합쳐서 작성하는 방법

calculatedDamage_300, calculatedDamaged_380 을 calculatedDamage:{300 : 15~~~, 380 : 14~~~}

또는 이전 게임 개발이나 웹 콘텐츠 개발시에도 그룹별로 묶어서 작성하는 방법을 선호하였기에 구분을 위해 calculatedData 안에 두 종류의 키 값들을 각각 넣는 것이 아닌 info300, info380과 같이 종류별로 그룹으로 묶어서 작성 하는 방법으로 한다면 다른 코드 작성시 호출할때 300 그룹과 380 그룹을 구분하기에 용이할 것 같습니다.

calculatedData : {
cambatPower: 199999,
mr_stat:0,
 info300: {
calculatedDamage : 14666~~,
calculatedHexaDamage : 1000~~,
boss_stat : 5.0,
~~~
},
info380: {
calculatedDamage : 14222~~,
calculatedHexaDamage : 1000~~,
boss_stat : 7.0,
~~~
},