🐸 웹에서는 정말 수많은 정보들이 서버에 요청되고 보내진다.

예시로 우리는 로그인을 하기 위해 Id와 Pw를 입력창에 입력하고 로그인 버튼을 눌러 로그인 요청을 한다.

그러면 웹은 서버에 우리가 입력한 Id와 Pw가 사용자정보에 있는 Id와 Pw값들을 비교해보고 일치하면 로그인요청을 받아들이고 로그인 접속을 허락하는 내용을 다시 웹에게 줄 것이다.

이처럼 웹이 서버에 정보를 보내는 것을 request라고 하고 그 정보에 대한 대답 받는 것을 response라고 한다.

[request]

🐸request는 서버데이터의 어떤 처리를 요구하냐에 따라 4가지로 나뉜다

• 데이터 조회
• 데이터 추가
• 데이터 수정
• 데이터 삭제
  
  

🐸 그러면 내가 지금 서버에 보내는 request가 어떤 종류의 request인지 알려면 어떻게 해야할까?

그것은 바로 request에 존재하는 메소드라는 정보를 통해 알 수 있다.

아까 4가지 종류 request가 있다고 했는데 각 request의 메소드를 알아보자

1.데이터를 조회하는 request의 메소드:get , post, put, delete

request는 Head와 Body로 이루어져 있다.

Head: data에 관한 부가정보(메소드)
Body: 실제 data를 담는 부분

🐸 그래서 각 HEAD에 담겨있는 메소드 정보를 보면

• 데이터 조회: GET
• 데이터 추가: POST
• 데이터 수정: PUT
• 데이터 삭제: DELETE

라는 값들이 담겨져 있는 것을 볼 수 있다.

그럼 자연스럽게 생각을 해보면 put이나 post는 데이터를 수정하고 추가하기 때문에 각각 수정 할 데이터

get delete는 ㄴbody정보가 필요 없음

실제로 head와 body를 살펴보려면 개발자도구에서 network라는 창을 살펴보면 된다.

netwokr탭에서는 웹 브라우저가 보낸 request와 response를 볼 수 있다.

저기서 header란 헤드 안에 존재하는 각 key와 value의 쌍을 의미한다.

바로 이 여러개의 헤더들이 현재 request의 여러가지 부가정보를 나타낸다

또한 잘 살피봄 path가 존재하는데 이 path로 인해 정확히 어떤 데이터를 원하는 것인지 서버에 전달 할 수 있따.

그리고 아까 위에서 설명했듯이 get은 바디에 담을 정보가 없기 때문에 body가 존재 하지 않는다

🐸fetch함수로 url을 작성할 때 request에 따라서 보내야 하는url도 달라진다

1.특정 정보를 조회 할 때
1.특정 정보를 수정 할 때
2.특정 정보를 삭제 할 때

이렇게 특정 정보에 대한 접근이 필요 할때는 이 작업들을 수행하기 위해서는 작업의 대상이 되는 정보를 특정할 수 있도록 URL 고유 식별자를 붙여줘야 한다.

🐸 특정 정보를 조회 해볼 때

입력 결과

(특정 정보를 조회하는 것이기 때문에 url을 자세히 보면 아까와 달리 /3이 추가 되는 것을 볼 수 있다.)

특정 정보만 잘 출력 된 것을 볼 수 있다.

🐸 새로운 정보를 추가할 때

위 사진을 보면 newMember라는 새로운 객체 뿐만 아니라 fetch함수에 파라미터값으로 새롭게 추가된 객체까지 볼 수 있다.

그리고 fetch함수 파라미터값으로 있는 객체는 바로 우리가 보낼 request에 관한 각종 설정을 적는 객체이다.

이 객체를 옵션객체라고 부른다
(get리퀘스트를 보낼때 이런 새로운 객체를 추가하지 않은 이유는 get리퀘스트는 기본적으로 get만의 설정이 자동으로 되어 있기 때문이다.)

옵션객체에 있는 첫번째 프로퍼티는 우리가 이전에 알게 된 method에 관한 정보를 담은 프로퍼티이다.

옵션객체에 있는 두번째 프로퍼티는 우리가 추가할 새로운 정보를 request바디에 담기 위해 추가한 프로퍼티이다.

그런데 바로 body:newMember로 담을 수 도 있지만 JSON.stringify를 써준 이유는 JSON.parse를 써준 맥락과 같은 맥락이다.(JSON데이터를 다루는 방법을 모른다면 이해하지 못한다..)

JSON.parse는 string타입의 json데이터를 자바스크립트 객체로 변환하기 위해서 써준 것이지만 이번에는 json데이터로 만들어줘야 하기 때문에 새로운 정보를 담은 객체를 string타입으로 변환시켜주어야 한다.

그래서 이번에는 json메소드의 stringify를 쓴 것이다.

request Payload라고 쓰이 부분이 바로 request의 body를 나타낸다.
그래서 payload부분을 보면 아까 newMember라는 객체형태로 담은 정보가 잘 추가 되어 Json형태의 데이터로 잘 들어가 있는 것을 확인할 수 있다.

🐸 기존 정보를 수정 할 때

id값이 2인 객체에서 department를 marketing부서로 옮겼다고 가정해보고 정보를 수정해보자

아까 위에서도 말했듯이 특정 정보를 수정하거나 삭제하거나 접근해야 할 때는 url을 더 자세히 써줘야 한다고 했다.

따라서 현재 fetch함수의 파라미터로 전달 된 url에서 /2가 추가 된 것을 볼 수 있다.

그리고 아까 데이터르 추가할때와 마찬가지로 옵션객체를 작성해주고 method프로퍼티는 PUT으로 설정해주고 수정 할 데이터를 두번째 프로퍼티로 전달해주면 된다.

🐸 기본 정보를 삭제 할 때

위에서도 말했듯이 delete 리퀘스트는 url을 통하여 특정 정보에 접근 할 수 있기 때문에 body부분이 필요 없다.

[response]

response는 request와 마찬가지로 Head와 Body를 가지고 있다.

response가 조금 특별한건 서버가 웹이 요청한 데이터를 잘 담았는지에 대한 상태정보를 Head에 같이 담아 보낸다.