[JS] 클라이언트와 서버 개념 / Fetch (기초)

클라이언트 - 서버의 개념

클라이언트(client): 서비스를 이용, 요청하는 사용자 혹은 장치, 프로그램

서버(server): 네트워크를 통해 클라이언트에게 서비스를 제공하는 시스템

 

[예시]

• 클라이언트(손님): 식당에서 원하는 메뉴(서비스)를 주문(요청)하는 사람.
• 서버(주방 또는 점원): 주문받은 메뉴(정보, 데이터)를 만들어서 손님에게 제공(응답)합니다.

 

• 클라이언트(손님): 편의점에서 물건(정보)을 사기 위해 “이거 주세요”라고 이야기하고 계산을 합니다.
• 서버(편의점): 손님이 요구한 물건을 가지고 있고, 얼마인지 알려주며 판매해 줍니다.

 

• 클라이언트(고객): 온라인 쇼핑몰에서 주문을 합니다.
• 서버(쇼핑몰 서버, 물류창고): 재고가 있는지 확인하고, 결제 정보를 처리한 뒤, 택배를 보내줍니다.

---

1. 웹사이트 접속을 예시로
   1. 사용자가 인터넷 브라우저(클라이언트)를 엽니다.
   2. 주소창에 웹사이트 주소를 입력합니다.
   3. 브라우저가 웹사이트 서버에 “해당 페이지의 데이터를 주세요!”라고 요청합니다.
   4. 서버가 페이지에 대한 HTML, CSS, 이미지 등을 응답으로 보내줍니다.
   5. 브라우저가 이 응답을 받아 화면에 웹페이지를 표시합니다.
2. 메시지 전송(카톡 등 메신저)을 예시로
   1. 스마트폰에 설치된 메신저 앱(클라이언트)에서 “안녕!”이라는 메시지를 서버로 보냅니다.
   2. 메시지 서버는 “어떤 사용자에게 이 메시지를 보내야 하는지”를 확인하고, 해당 사용자에게 메시지를 전달합니다.
   3. 메시지를 받는 사람의 스마트폰(또 다른 클라이언트)에게 메시지 알림을 띄워줍니다.

 

특정 웹페이지를 사용자 웹브라우저에게 보여주기 위해 처리할 때

• 클라이언트가 서버에 웹페이지를 보여달라고 하는 것 -> 요청하는 것
• 서버가 클라이언트에게 요청받은 것을 보여주기 위해 웹페이지 내용을 html 문서로 주는 것 -> 응답을 주는 것

---

API(Application Programming Interface) 란?

• 응용 프로그램을 사용하기 위해 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스
• API 범주의 핵심은 애플리케이션을 서로 연결하여 서로 통신을 할 수 있다는 것
• 어떤 서버에 접속, 특정 데이터를 보여주는 창구로 가서 데이터를 받아오는 것
• 고객(클라이언트) 어느 지점의 은행에 도착 후 특정 은행 창구로 가서 상담받아야 하는데,
• 여기서 어느 지점의 은행- 서버 위치, 은행 창구가 API에 해당하는 것으로 이해!

간단하게 얘기하자면,

클라이언트가 서버에게 "이렇게 요청하세요" 라고 약속해둔 방법

프로그램끼리 통신할 때 사용하는 규칙/약속/명세

 

• 마구잡이 방식으로 줄 경우 복잡해지기 때문에
• 서버에서 제공하는 데이터를 어떤 경로(URL)로 요청해야 하는지, 필요한 정보는 어떻게 전달해야하는 지, 응답은 어떤 형식( JSON 등) 으로 주는 지 등을 미리 정해 둔 규칙

예시 - 레스토랑

 

손님(클라이언트)은 메뉴판을 보고 “어떤 음식을 어떻게 주문”할 수 있는지 알게 됨

 

레스토랑(서버)는 메뉴판에 적힌 대로 주문을 받아 “이 음식(데이터)은 이렇게 만들어서 내보내면 된다”라고 알게 됨

 

메뉴판(API) 덕분에 손님과 식당이 서로 쉽게 소통할 수 있죠.

API는 허락된 곳의 접근만 허용한다.

• 오픈 API는 누구나 다 접근을 허용한다.

[요약]

• 클라이언트는 “무엇을 원해요!”라고 요청.
• 서버는 “알겠습니다, 여기 있어요!”라고 응답.
• API는 “요청과 응답을 이 규칙대로 하세요!”라고 가이드를 제공.

---

클라이언트(Client):

• 데이터를 요청하는 프로그램/기기
• 예: 웹 브라우저, 스마트폰 앱

서버(Server):

• 요청을 처리해 데이터를 보내주는 프로그램/컴퓨터
• 예: 웹 서버, 메시지 서버, 게임 서버

API(Application Programming Interface):

• 클라이언트와 서버가 서로 통신하기 위해 약속해놓은 규칙(인터페이스)
• 어떤 경로(URL)로, 어떤 형식(HTTP 메서드, 파라미터, 헤더 등)으로, 어떤 형태(JSON, XML 등)의 데이터를 주고받아야 하는지 정의

---

클라이언트 -> 서버 요청 방식

GET: 통상적으로 데이터 조회(read) 요청 시 사용

POST: 통상적으로 데이터 생성(create), 변경(update), 삭제(delete) 요청할 때 사용

 

GET 방식 이란?

우리가 필요한 정보를 얻기 위해 서버에서 데이터를 가져오는 방식 

 

GET 방식의 특징

• URL에 변수(데이터)를 포함시켜 요청한다.
• 데이터를 Header(헤더)에 포함하여 전송한다.
• URL에 데이터가 노출되어 보안에 취약하다.
• 길이 제한이 있다. (브라우저 기준)
• 캐싱할 수 있다.

 > 개인정보가 담긴 정보의 경우 GET 방식을 사용하지 않는다. (개인정보 노출 문제)

 > 캐싱으로 속도를 높이거나 즐겨찾기를 편리하게 사용하는 경우가 많다.

 

GET 방식의 형태

• 쿼리스트링 형태 (URL + ? + 데이터이름 = 값)

(예시)

https://comic.naver.com/webtoon/list?titleId=769209&tab=wed

화산귀환

• comic.naver.com: 서버 위치
• webtoon/list: 창구
• titleid=769209: 가져간 데이터 이름 = 값

 

---

Fetch

서버로 데이터를 요청하고 응답을 처리하는 데 사용되는 Javascript API

• 첫번째 인자로 요청을 보낼 'url' 주소를 사용
• 두번째 인자로 method, headers, body 등 옵션 객체를 사용

fetch('url')
	.then(response => response.json())
	.then(data => console.log(data))
  
//예시  
function hey() {
	let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
	fetch(url)
		.then(res => res.json())
        .then(data => {
		console.log(data['RealtimeCityAir']['row'][0])
	})
}


//fetch 예시 - 미세먼지 값 가져오기
$(document).ready(function () {
	let url = "http://spartacodingclub.shop/sparta_api/seoulair";
	fetch(url).then(res => res.json()).then(data => {
		let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
		$('#msg').text(mise)
	})
})


//fetch 예시 - 온도 값 가져오기
$(document).ready(function () {
	let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
	fetch(url).then(res => res.json()).then(data => {
		let temp = data['temp'];
		$('#temperature').text(temp);
	})
})