[JavaScript] 자바스크립트에서 fetch()로 데이터 보내기

230_자바스크립트에서 fetch()로 데이터 보내기

[적용]

• 웹 서버에 데이터를 전달하고 싶을 때
• 웹 서버 연동 프로그램을 만들고 싶을 때

---

[내용]

웹 서버에 데이터를 전달할 때도 fetch()를 사용하며, 데이터 전달 방법은 GET과 POST가 있다.

 

웹에서 '?ket=value'와 같은 문자가 포함된 URL을 본 적이 있다면 이것이 URL에 인수를 전달하는 GET 방식이다.

GET 방식은 URL로 페이지의 결과가 결정되는 방식에 적합하며,

SEO(Search Engine Optimization-검색 엔진 최적화)와 궁합이 좋다.

 

하지만 GET 방식은 URL에 전달 데이터가 노출되므로 보안 문제가 생길 수 있다.

URL은 액세스 분석 등 다양한 용도를 위해 로그에 기록으로 남을 가능성이 있으며, 

이는 개인 보안의 취약점으로 인식된다.

그러므로 개인 정보 등에 관한 데이터는 일반적으로 GET 방식을 사용하지 않는다.

폼의 내용과 개인 정보 관련 데이터는 POST 방식을 사용한다.

POST 방식은 URL에 인수 데이터 정보를 표시하지 않으며,

HTTPS 프로토콜을 사용하면 다른 사람이 데이터를 확인하는 것이 불가능하므로 데이터를 안전하게 전송할 수 있다.

 

여기서는 POST 방식을 사용한 샘플을 확인해 보자.

PSOST로 데이터를 전달하는 경우 메소드, 헤더, 바디의 정보를 지정하며,

서버에 전달하는 데이터에 따라 코드가 변한다.

다양한 방법이 있으나 자주 사용되는 방식을 먼저 알아보자.

 

JSON 포맷으로 전달하는 방법(application/json 방식)

데이터를 JSON 포맷으로 서버에 전달하는 방법이다.

fetch()의 두 번째 인수에 옵션을 지정한다.

데이터를 전달하고 통신 성공 여부를 확인하기 위해 서버의 응답을 확인한다.

JavaScript   

const obj = {hello: 'world'};

const data = {
  method: 'POST'.
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(obj)
};

fetch('./new', data)
  .then((res) => res.text())
  .then(console.log);
});

 

PHP는 file_get_contents('php://input')을 사용해 입력값을 가져온다.

문자열 타입을 가져오므로 PHP를 사용해 JSON 데이터 형식으로 변환해야 한다.

변환은 json_decode()를 사용한다.

PHP

<?php
$json_string = file_get_contents('php://input');  ##데이터 가져오기

// PHP로 문자열을 JSON 데이터로 변환
$obj = json_decode($json_string);

echo $obj->{"hello"};

 

폼 방식으로 전달하는 방법(multipart/form-data 방식)

폼의 형식으로 전달하면 PHP가 값을 전달받기 쉽다.자바스크립트로 FormData 객체를 사용하면 키와 값을 조합하여 전송 데이터를 정의할 수 있다.서버는 multipart/form-data 포맷으로 전달받으며,주로 이미지와 첨부 파일 등을 서버에 보관할 때 사용하는 포맷이다.Content-Type 값은 자동으로 설정되므로 코드에서 지정할 필요가 없다.다음 샘플 코드를 확인해 보자.

JavaScript   

const body = new FormData();
body.set('hello', 'world');

const data = {
  method: 'POST',
  body: body
};

fetch('./new', data)
  .then((res) => res.text())
  .then(console.log);

 

 

PHP는 $_POST 연관 배열에 값이 자동으로 보관된다.키를 지정하여 값을 출력해 보자.PHP

<?php
echo $_POST["hello"];

 

폼 방식으로 전달하는 방법(application/x-www-form-urlencoded 방식)

이 포맷은 '키1=값1&키2=값2&...' 의 형태와 같이 키와 값을 하나로 묶어 서버에 전송한다.

한글 등 멀티 바이트 문자는 사용할 수 없으므로 URL 인코딩을 통해 전송된다.

URLSearchParams의 인스턴스를 생성하고 set()로 키와 값을 설정한다.

명시적으로 headers의 Content-Type 값을 'application/x-www-form-urlencoded; charset=utf-8'로 지정한다.

JavaScript   

const params = new URLSearchParams();
params.set('hello', 'world');

const data = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
  },
  body: params
};

fetch('./form_xform.php', data)
  .then((res) => res.text())
  .then(console.log);

 

PHP는 $_POST 연관 배열에 값이 자동으로 보관된다.

키를 지정하여 값을 출력해 보자.

PHP

<?php
ecgo $POST["hello"];

 

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김