[TIL] 클라이언트(Fetch,API)

최유나·2024년 6월 14일

TIL

목록 보기

7/34

클라이언트(Client)

클라이언트 : 서버의 서비스를 받아 사용하는 장치, 프로그램

ex) 데스크톱, 노트북, 스마트폰, 태블릿, 웹 브라우저

서버(Server)

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

웹 브라우저에 www.google.co.kr이라는 URL을 입력하면 그 URL에 해당하는 웹 서버로 요청이 가게되고, 해당 웹 서버는 웹 브라우저의 요청을 확인한 후에 DB에서 www.google.co.kr이라는 도메인을 가진 웹 사이트를 찾아 우리에게 제공하여 웹 브라우저에 우리가 요청한 구글페이지가 보임

(출처 : 클라이언트(Client) vs 서버(Server))

API(Application Programming Interface)

API : 응용 프로그램 프로그래밍 인터페이스, 프로그램들과 데이터베이스, 그리고 기능들의 상호 통신 방법을 규정하고 도와주는 매개체

Web2.0의 “개방, 참여, 공유” 의 키워드 덕분에 정보의 쌍방향 소통의 개념이 생겼고, “사용자가 생성한 데이터”를 위주로 웹 앱의 붐, 클라우드(Cloud) 기반 인프라와 MSA(Microservices Architecture)의 사용이 확산되면서 API 확산이 가속화되었다. 이제 API에서 가장 흔한 구조인 REST 또는 RESTful API가 점차 새로운 웹 생태계의 기반으로 퍼지고 있다.

물론, 허락된 API만 접근 가능

(출처 : API란? API의 정의와 종류 그리고 장단점)

OpenAPI(OpenAPI Specification(OAS))

RESTful API : 정의된 규칙에 맞게 json이나 yaml로 표현하는 웹 서비스(누구나 접근이 가능)
쿼리 스트링(?) : URL/ Open API명 ? 인증키 값 &(그리고) 페이지위치 등으로 구분

서울시 미세먼지 OpenAPI JSON(예시)

JSON(Ajax)

JSON은 일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식(Key:Value)

크롬 익스텐션 JSONView : Json code(DB)를 웹 상에서 편하게 보게 해주는 프로그램
클라이언트가 요청 방식에 따라 GET, POST 방식으로 파일을 받는 방식이 다름

CRUD

댓글 작성(CRUD의 C), 댓글 조회(CRUD의 R), 댓글 수정(CRUD의 U), 삭제(CRUD의 D)
회원 가입(CRUD의 C), 회원 조회(CRUD의 R), 정보 수정(CRUD의 U), 회원 탈퇴(CRUD의 D)

GET 방식
데이터 조회(Read) : 모든 사용자 목록을 가져오는 경우
POST 방식
생성(Create) : 새로운 사용자를 생성하는 경우
변경(Update) : 특정 사용자의 정보를 업데이트
삭제(Delete) : 특정 사용자를 삭제하는 경우

Fetch

Fetch : 자바스크립트를 사용하여 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일(비동기)

자바스크립트는 왜 싱글 쓰레드일까?

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


fetch("http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99") // 기본 요청(GET)
	.then(res => res.json()) // 요청해서 받은 데이터를 JSON화
	.then(data => { // JSON화 한 데이터를 다시 data로 이름짓기
		let rows = data['RealtimeCityAir']['row']
		rows.forEach((a) => {
			// 미세먼지 데이터 리스트의 길이만큼 반복해서 하나씩 개발자 도구에서 보기
			console.log(a);
          	let each_name = a[];

            let temp_html = `<li>${a}</li>`
            if (gu_mise > 40) {temp_html = `<li class="a">${a}</li>` or $('#temp').text('bad');} 
          else {temp_html = `<li>${a}</li>` or  $('#temp').text('wow'); }
            $('#ID').append(temp_html);
		})
	})

// $('#temp').text('bad'); 일 시 $('#ID').append(temp_html)(X)