heyday2024 님의 블로그
[사전캠프 3주차] 클라이언트-서버 개념 이해와 Fetch 시작하기 본문
서버 --> 클라이언트 : JSON
데이터를 받음(text 데이터를 긁어오는 방식)
클라이언트 --> 서버: GET 요청
API: Application Programming Interface, 어떤 응용 프로그램에서 데이터를 주고 받기 위한 방법.
API 유형
- REST API (Representational State Transfer): HTTP를 사용해 자원(Resource)을 CRUD (Create, Read, Update, Delete) 방식으로 처리.
- SOAP API (Simple Object Access Protocol): XML을 기반으로 한 메시징 프로토콜을 사용해 데이터 교환을 처리.
- GraphQL: Facebook에서 만든 쿼리 언어로, 클라이언트가 원하는 데이터 구조를 정확히 정의해 서버에서 해당 데이터를 반환받음.
1. JSON(JavaScript Object Notation)
데이터를 구조화하여 표현하는 데이터 교환 형식. 사람이 읽고 쓰기 쉽고, 컴퓨터가 파싱하고, 생성하기에도 적합함.
구조: 객체(key:value) 형태로 표현되고, key는 문자열, value는 문자열, 숫자, 배열, 객체 등이 될 수 있음.
- API 통신 시 데이터 주고 받을 때
- 클라이언트와 서버 간의 데이터 교환할 때
- 데이터 파일 형식으로 저장할 때
2. GET 요청(HTTP 요청 메서드 중 하나)
주로 서버에서 데이터를 조회할 사용. 웹 브라우저가 URL을 통해 웹 서버에 요청을 보내면, 서버는 해당 자원(페이지, 데이터 등)을 반환함.
- 읽기 전용: GET 요청은 서버에 있는 리소스를 조회(Read)만 하고, 데이터를 변경하지는 않음
- 캐시 가능: GET 요청은 종종 캐시되며, 동일한 요청에 대해 서버에 다시 요청하지 않고 캐시된 데이터를 사용할 수 있음(아무래도 사용자가 빠르게 정보 접근 가능...)
- 쿼리 스트링 사용: GET 요청 시 데이터를 URL에 포함시킬 수 있고, 일반적으로 URL의 끝에 ?key=value 형식으로 데이터를 전달함
- (예시) https://movie.daum.net/moviedb/main?movieId=68593
- ? 기준으로 앞부분이 서버주소, 뒷부분이 영화번호 (?movieId=68593, ?key=value)
- (예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
- ? 뒷부분: 전달할 데이터가 작성된다는 의미, &: 전달한 데이터가 더 있다는 의미
- q=아이폰 (검색어) sourceid=chrome (브라우저 정보) ie=UTF-8 (인코딩 정보)
- (예시) https://movie.daum.net/moviedb/main?movieId=68593
정리하면, GET 요청을 통해 서버에 데이터를 요청하면, 서버가 요청한 그 데이터를 JSON형식으로 반환해줌. 그러면 이 JSON 데이터를 브라우저(클라이언트)가 파싱해서 화면에 보여주는 등 여러 작업에 활요함.
특정 정보를 제공하는 OpenAPI(누구나 사용할 수 있도록 공개된 API) 링크를 열어보면 데이터가 보기 좋게 나와있기 보다는 보통 아래처럼 보여짐.
JSON View(크롬 extension)를 사용하면 좀 더 보기 좋게 데이터 확인해볼 수 있음.
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko
JSONVue - Chrome 웹 스토어
Validate and view JSON documents
chromewebstore.google.com
3. POST(HTTP 요청 메서드 중 하나): 통상적으로 클라이언트가 서버에 데이터를 전송하거나 새로운 리소스 생성할 때 사용. (데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 사용)
- POST 요청은 데이터를 서버로 보내는 데 사용됨. 이 데이터는 요청 본문(body)에 포함되고, 보통 JSON, XML 형태로 전송됨.
- 읽기(조회)만 할 수 있는 GET과 달리 POST는 서버의 상태를 변경하는 요청임.
- POST 요청은 여러번 보내면 서버의 상태가 변경될 수 있음. (GET은 같은 요청을 여러번 보내도 결과가 동일함.)
- POST요청의 데이터는 HTTP 본문에 포함되기 떄문에 GET 요청처럼 URL에 노출(?뒤에 key, value 보여지는 거)되지는 않지만, HTTPS를 사용하지 않으면 여전히 데이터가 노출될 수 있으므로 보안을 신경써야함.
- POST는 GET과 달리 캐시되지 않음.
POST는 회원가입, 탈퇴, 비밀번호 수정 등에 사용됨
HTTP(Hypertext Transfer Protocol): 웹 브라우저와 서버 간에 데이터를 주고 받는 통신 규약. (기본적으로 포트 80 이용)
HTTP는 데이터를 평문(암호화되지 않은 상태)으로 전송하기 때문에 중간에 네트워크를 감청하는 제 3자가 있다면 데이터 쉽게 볼 수 있음 --> 보안 취약!
보안문제 때문에 HTTPS 사용.
HTTPS(Hypertext Transfer Protocol Secure): HTTP에 보안 layer(SSL/TLS) 추가한 프로토콜. SSL(Secure Sockets Layer) 또는 TLS(Transport Layer Security) 사용해서 데이터 암호화하고, 정보 통신 제공함. (포트 443 사용)
추가적으로, SSL 은 main-in-the-middle attack 방지하려고 만들어졌는데, 지금은 보안 취약점이 발견되면서 더 이상 사용되지 않음. 그래서 SSL의 개선버전인 TLS를 현재 대부분의 웹사이트가 사용하고 있음.
Fetch
자바스크립트에서 비동기적(순서대로 작업 처리하는 게 아닌 작업이 독립적으로 한번에 여러개 진행되는 것)으로 네트워크 요청을 보내기 위해 사용되는 API. (Promise 기반으로 동작)
서버로부터 데이터를 가져오거나 서버에 데이터 보낼 때 사용.
매서드로 오픈 API url 주소 가지고, 정보 가져와보기
fetch("여기에 URL을 입력")
.then((res) => res.json())
.then((data) => {
console.log(data);
});
1. fetch(url)
- fetch함수는 주어진 url(API주소나 서버주소)로 HTTP 요청 보냄.
- (기본적으로 GET 요청이고, 해당 URL에서 데이터 가져옴)
2. .then((res) => res.json())
- fetch는 Promise를 반환하고, 이 Promise가 성공하면 res(응답 객체)가 반환됨.
- 이 응답 객체는 서버로부터 받은 응답 데이터를 포함.
- res.json()은 응답 데이터를 JSON형식으로 변환함.
- res.json() 역시 Promise를 반환하기 때문에, 변환된 JSON 데이터를 사용하려면 .then()을 통해 처리해야함.
3. .then((data) => { ... })
- 두 번째 .then()에서 data는 JSON으로 변환된 응답 데이터를 가리키고, 이 데이터는 서버에서 반환된 정보로, 구조는 서버 API에 따라 달라짐.
- 이 코드가 접근한 data를 console.log를 통해 콘솔에 출력함.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Fetch 시작하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function hey() {
let url = "http://spartacodingclub.shop/sparta_api/seoulair";
fetch(url)
.then((res) => res.json())
.then((data) => {
console.log(data["RealtimeCityAir"]["row"][0]);
});
}
</script>
</head>
<body>
<button onclick="hey()">fetch 연습!</button>
</body>
</html>이런 식으로 (data["RealtimeCityAir"]["row"][0]), 데이터 특정값을 지정해서 가져올 수 있음.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Fetch 시작하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function hey() {
let url = "http://spartacodingclub.shop/sparta_api/seoulair";
fetch(url)
.then((res) => res.json())
.then((data) => {
let rows = data["RealtimeCityAir"]["row"];
rows.forEach((element) => {
let gu_name = element["MSRSTE_NM"];
let gu_mise = element["IDEX_NM"];
console.log(gu_name, gu_mise);
});
});
}
</script>
</head>
<body>
<button onclick="hey()">fetch 연습!</button>
</body>
</html>
다음에는 fetch를 이용해서 페이지에 직접 가져온 정보를 가공해서 보여주는 코드를 작성해볼 것이다.
'프론트엔드 부트캠프' 카테고리의 다른 글
| [사전캠프 퀘스트] 숫자 기억 게임 만들기 (8) | 2024.09.12 |
|---|---|
| [사전캠프 3주차] Fetch 여기저기 사용해보기 (0) | 2024.09.11 |
| [사전캠프 3주차] jQuery로 웹페이지 제어하기 (0) | 2024.09.09 |
| [사전캠프 Day 7] 자바스크립트 (JS) (0) | 2024.09.03 |
| [사전캠프 2주차 - Day6] Bootstrap이용해서 웹페이지 꾸미기 (3) | 2024.09.02 |
