[TIL] fetch API

영화 평점 사이트 제작하려면 알고 있어야할 API 요청 관련 정보들 기록하기

🧐  클라이언트 - 서버 

1) 서버 -> 클라이언트

- JSON 사용한다. 

🔍 JSON?

• Javascript Object Notation
• 자바스크립트 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷
• 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용한다,[ 서버 -> 클라이언트 ]

{
	soo: {
    	age: 27,
        ...
    }
}

2) 클라이언트 -> 서버

- GET 요청한다.

🔍 GET 요청?

- 통상적으로 데이터 조회(Read)를 요청할때 사용하는 타입

👩‍💻 GET 요청 전달 방식

ex) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

1) ? 뒤부터 전달할 데이터가 작성된다는 의미

2) & : 전달할 데이터가 더 있다는 뜻

-> q=아이폰 [ 검색어 ] / &sourceid=chrome [ 브라우저 정보 ] / ie=UTF-8 [ 인코딩 정보 ]

🙋‍♀️ 조회가 아닌 생성, 변경, 삭제(Create, Update, Delete)를 요청할 땐??

-> POST 요청

📦 fetch API

-  HTTP 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공

🔍 API?

- Application Programming Interface

- 응용프로그램과 운영체제 간의 통신을 연결해주는 인터페이스

- 프로그램들이 서로 상호작용하는 것을 도와주는 매개체

참조링크: https://blog.wishket.com/api%EB%9E%80-%EC%89%BD%EA%B2%8C-%EC%84%A4%EB%AA%85-%EA%B7%B8%EB%A6%B0%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8/

- fetch 기본 골격

fetch("여기에 API URL을 입력").then(res => res.json()).then(data => {
		console.log(data)
})

fetch("여기에 URL을 입력")
// 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
	.then(res => res.json()) 
// 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
// res는 JSON 형태로 바꿔서 조작할 수 있게 한다.
	.then(data => { 
		console.log(data) // 개발자 도구에 찍어보기
	}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다