JSON 이란?
1. JSON(JavaScript Object Notation) : 클라이언트와 서버 간의 http 통신을 위한 텍스트 데이터 포멧
- 표기방식 : 키와 값으로 구성된 객체와 동일하다.
- JSON 객체는 키에 따옴표("")가 붙어있다.
2. JSON.stringify() : 객체 또는 배열을 JSON포맷의 문자열로 변환
- 객체로 된 배열의 경우, 객체의 각 키들도 ""가 붙는다.
- 직렬화 : 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야 하는데, 이를 직렬화라고 한다
3. JSON.parse() : JSON 포맷의 문자열을 객체로 변환
- 역직렬화 : 서버로부터 클라이언트에게 전송된 JSON데이터는 문자열 타입이다. 이 문자열을 객체로 사용하기 위해 객체화 시키는 것을 역직렬화라고 한다.
Fetch API
1. Fetch API
- 데이터 요청과 응답(통신)을 자바스크립트에서 접근하고 조작할 수 있는 인터페이스를 제공
- fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수 있다.
* 비동기적 : 비동기로 실행하면 코드가 작성 순서대로 실행되는 것이 아니라 수행시간에 따라서 실행 순서가 변경되는 것을 말한다.
* fetch() 메서드
fetch(resource, options)
- resource : json 파일의 경로
- option : 필요하면 사용, 필요없으면 사용x
예시)
fetch(url, option) //url : 백엔드 주소(데이터를 요청할 주소)
.then(response => console.log(response)) //response:요청결과(데이터)
.catch(error => console.log(error))
//데이터를 가져오지 못했을때 어떤 에러로 가져오지 못했는지 에러를 출력
데이터 요청 및 출력
1. fetch(url) 에 작성된 주소로 데이터를 요청한다.
2. .then(response => response.json())
response 객체에 데이터가 저장되고 json 형태로 변환한다.
* response 객체 : http 응답 상태(status), http 응답 헤더(headers), http 응답 전문(body) 등을 포함
* JSON 문자열 형태로 변환을 해줘야 처리 가능하다(json 형태로 파싱)
3. .then(data => console.log(data))
json 형태로 변환 된 response가 data에 저장된다 : 데이터처리
- 콘솔에 data.title을 찍으면 타이틀 값이 출력됨.
4. .catch(error => console.log(error))
데이터를 가져오지 못할 경우 에러를 콘솔에 출력.
Fetch API - GET : 데이터 가져오기
* json-server : json 파일을 사용하여 간단한 테스트를 위한 REST API server를 구축할 수 있는 패키지 (페이크 서버)
* fetch()메서드를 이용한 GET 방식 호출
: fetch() 메서드는 디폴트로 get 방식으로 작동하는데, 메서드 호출 시 별도의 옵션을 추가하지 않아도 된다
bookList.json 파일에 데이터가 존재하고 이 데이터를 읽어오기 위해서
fetch("http://localhost:4000/books") //데이터 요청
.then((response) => response.json()) //데이터가 response에 저장되고 json()형태로 변환
.then((data) => console.log(data)) //json으로 변환된 데이터가 data에 저장되고 원하는 항목만 출력가능
.catch((error) => console.log(error)); //데이터를 가져오는데 실패했다면 에러를 출력fetch.js 에서 이렇게 데이터를 요청할 수 있다.
Fetch API - POST : 데이터 추가하기
* fetch() 메서드를 이용한 POST 방식 호출
- option : method(데이터 전송 방식), body(http 요청 전문)
**게시판 만들기 + 목록(데이터) 추가하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="showBoard()">
<!-- 데이터를 요청하고 가져오는 showBoard 메소드 호출 -->
<table>
<thead>
<tr>
<th>순위</th>
<th>제목</th>
<th>저자</th>
<th>가격</th>
</tr>
</thead>
<tbody class="boardTbody"></tbody>
</table>
<h3>도서 추가</h3>
<form id="save" method="POST">
제목 : <input type="text" name="title"><br>
저자 : <input type="text" name="writer"><br>
가격 : <input type="text" name="price">
<button type="submit">저장</button>
</form>
<script src="fetch.js"></script>
</body>
</html>//1. 데이터 출력
function showBoard() {
//데이터를 요청하고 가져오는 함수
fetch("http://localhost:4000/books") //데이터 요청
.then((response) => response.json()) //데이터가 response에 저장되고 json()형태로 변환
.then((data) => showList(data)) //json으로 변환된 데이터가 data에 저장되고 showList 메소드를 이용해 데이터 출력
.catch((error) => console.log(error)); //데이터를 가져오는데 실패했다면 에러를 출력
}
function showList(data) {
//데이터를 출력하는데 데이터가 새로 생성되면 추가 출력된다
console.log(data);
data.forEach((book) => {
// forEach() : 배열에서 사용하는 메서드로 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행
// 즉, 데이터가 새로 추가되면 함수가 실행된다
let boardTbody = document.querySelector(".boardTbody");
//클래스 boardTbody를 선택하여 변수화 - 클래스 명 앞에 .붙이기
//Document.querySelector() : 문서 내 첫 번째로 일치하는 Element를 반환
let tr = `<tr">
<td>${book.id}</td>
<td>${book.title}</td>
<td>${book.writer}</td>
<td>${book.price}</td>
</tr>`;
//반복 출력할 태그들을 백틱으로 묶어 변수로 지정
boardTbody.innerHTML += tr;
//tbody에 변수 tr을 추가
//innerHTML : 요소(element) 내에 포함 된 HTML태그를 가져온다
})
}
//2. 데이터 추가
const form = document.getElementById("save");
//id save를 변수 form으로 저장
form.addEventListener("submit", (e) => {
//e : 발생한 이벤트에 대한 정보가 들어있다
e.preventDefault();
//submit 클릭 시 페이지 넘어가지 않게 폼태그의 기본행동을 제거
const formData = new FormData(form);
//FormData 객체 생성 : 폼 전송을 가능하게 해주는 양식으로 변경
const bookInfo = new URLSearchParams(formData);
//URLSearchParams 객체 생성 : 사용가능한 데이터 양식으로 변경
//키, 값 자동으로 추가되도록
//서버에 접속하여 데이터를 넣어준다(전송) - 데이터 추가하면 바로 갱신
fetch("http://localhost:4000/books", {
method: "POST",
body: bookInfo //데이터 내용
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.log(error));
});'JavaScript' 카테고리의 다른 글
| [새싹 프론트엔드] 고차 함수 정리(map, filter, reduce, forEach) (0) | 2023.01.01 |
|---|---|
| [새싹 프론트엔드] GRS80TM좌표계 -> WGS84좌표계 변환하기 (0) | 2022.11.26 |
| [코딩 알려주는 누나] api통신, 뉴스타임즈 만들기 - 1 (0) | 2022.11.14 |
| [새싹 프론트앤드] 함수 실습 다시 풀기 (0) | 2022.11.13 |
| [새싹 프론트엔드] 반복문 조건문 배열 실습 문제 다시풀기 (0) | 2022.11.06 |