3일차 : 오늘 배운 것(클라이언트와 서버 / Fetch)

클라이언트와 서버의 관계

• 클라이언트 (Client)
  • 클라이언트는 쉽게 말해서 '요청을 하는 쪽'. 우리가 흔히 사용하는 컴퓨터, 스마트폰, 태블릿 등이 모두 클라이언트가 될 수 있다.
  • (예를 들어, 인터넷에서 영화를 보고 싶어서 웹사이트에 들어간다면, 컴퓨터나 스마트폰이 클라이언트가 됨)
• 서버 (Server)
  • 서버는 '요청을 받는 쪽'. 클라이언트가 요청하는 정보를 제공해주는 컴퓨터라고 생각하면 된다. 이 서버는 웹사이트, 게임, 이메일 등을 제공해주는 컴퓨터이다. (예를 들어, 유튜브에서 영화를 보려고 한다면, 유튜브 서버가 영화를 보내줌)

JSON

JSON은 Key:Value로 이루어져 있다.

 

Fetch

API에 있는 데이터를 가져올 때 쓰인다.

 

Fetch의 기본 골격

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

 

코드 설명

😐 fetch("여기에 URL을 입력") ← 이 URL로 웹 통신 요청을 보낼 거야!

• ← 이 괄호 안에 URL밖에 들어있지 않다면 기본상태인 GET!
• .then() ← 통신 요청을 받은 다음 이렇게 할 거야!
• res ⇒ res.json()
  • ← 통신 요청을 받은 데이터는 res 라는 이름을 붙일 거야(변경 가능)
  • ← res는 JSON 형태로 바꿔서 조작할 수 있게 할 거야!
• .then(data ⇒ {}) ←JSON 형태로 바뀐 데이터를 data 라는 이름으로 붙일 거야