2025. 6. 18. 18:05ㆍJavascript
오늘은 자바스크립트 기초 Fetch() 함수에 대해 알아보자.
Fetch() 함수를 알아보기 전 자바스크립트 기본 문법을 모르겠다면 아래 글을 읽어본 뒤 이번 글을 참조하길 바란다.
2025.06.17 - [Javascript] - [Javascript] 자바스크립트 기초 - JQuery와 기본 문법
[Javascript] 자바스크립트 기초 - JQuery와 기본 문법
오늘은 자바스크립트 기초 문법과 JQuery에 대해서 알아보자.먼저, 자바스크립트(Javascript)란?: 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.즉, HTML과 CSS로 화면을 구성하여
mingstory-tech.tistory.com
Fetch() 함수는 서버에 요청(POST)을 보내고, 응답(GET)을 받을 수 있게 해주는 함수이다.
무슨 말인지 자세하게 알아보자.
[클라이언트-서버]
API는 은행 창구와 같은 것이라고 생각하면 쉽다.
따라서, 예금 창구에서도 개인 고객 / 기업 고객에 따라 가져와야 하고 처리해 주는 것이 다르듯
클라이언트가 요청 할 때에도, "타입"이 필요하다.
[GET]
: 통상적으로 데이터 조회(Read)를 요청할 때를 의미한다.
- 예) 영화 목록 조회
[POST]
: 통상적으로 데이터를 생성(Create), 변경(Update), 삭제(Delete)를 요청할 때를 의미한다.
- 예) 회원 가입, 회원 탈퇴, 비밀번호 수정
[GET 방식으로 데이터를 전달하는 방법]
-? : 여기서부터 전달할 데이터가 작성된다는 의미
- & : 전달할 데이터가 더 있다는 의미
-예) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
즉, 위 주소 google.com의 search 창구에 다음 정보를 전달한다.
1. q = 아이폰 (검색어)
2. sourceid=chrome (브라우저 정보)
3. ie=UTF-8 (인코딩 정보)
[Fetch]
위에서 Fetch() 함수는 서버에 요청을 보내고, 응답을 받을 수 있게 해주는 함수라고 정의했다.
즉, Fetch는 '가져오다'라는 의미로, 서버에서 요청을 보내 원하는 응답을 받을 수 있게 해주는 것이라고 생각하면 쉽다.
간단하게, 요청과 응답 과정이 이루어질 수 있도록 해주는 게 Fetch() 함수이다.
[기본 문법]
fetch("https://www.google.com")
.then(response => response.text())
.then(data => {
console.log(data)
});이 코드는 구글 사이트를 좀 보여달라는 요청에, 서버가 사이트를 주며 서버가 보낸 응답을 출력해 주는 코드이다.
- fetch("https://www.google.com") : URL로 웹 통신을 요청
-. then(response => response.text()) : 통신 요청을 받은 데이터는 response라는 이름으로 text화 한다.
-. then(data => {console.log(data)}); : text 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다.
만약, 오픈 API를 통해 미세먼지 데이터의 0번째를 가져오고 싶다면?
fetch("URL")
.then(res => res.json())
.then(data => {
console.log(data['RealtimeCityAir']['row'][0]);
})
원하는 대로 Console에 0번째 데이터를 가져와진 것을 확인할 수 있다.
만약, JSON 형태의 데이터를 구 이름, 미세먼지 수치 부분만 골라서 가져오고 싶다면?
fetch("URL")
.then(res => res.json())
.then(data => {
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
console.log(a['MSRSTE_NM'], a['IDEX_MVL'])
})
})
원하는 대로 구 이름과 미세먼지 수치 부분만 가져와진 것을 확인할 수 있다.
이제, 이 console로 조회한 데이터들을 화면에 뿌릴려고 한다면 어떻게 해야 할까?
let rows = data['RealtimeCityAir']['row']
$('#names-q1').empty()
rows.forEach((a) => {
let gu_name = a['MSRSTE_NM']
let gu_mise = a['IDEX_MVL']
console.log(gu_name, gu_mise)
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
$('#names-q1').append(temp_html)
})<body>
<h1>Fetch 연습하자!</h1>
<hr/>
<div class="question-box">
<h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
<p>모든 구의 미세먼지를 표기해주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
<li>중구 : 82</li>
<li>종로구 : 87</li>
<li>용산구 : 84</li>
<li>은평구 : 82</li>
</ul>
</div>
</body>반복문인 forEach문을 활용해서 원하는 데이터들을 변수로 따로 빼준 다음,
웹에 붙이기 위해 temp_html을 만들어. append(추가) 해준다면
console이 아닌 원하는 대로 웹 페이지에 조회되는 것을 확인할 수 있다.
지금까지는 버튼과 같이 특정 이벤트가 작동했을 때 데이터가 출력되는 코드였다.
그렇다면, 페이지가 새로고침 될 때마다 데이터가 출력되도록 하고 싶다면 어떻게 해야 할까?
[기본 문법]
$(document).ready(function () {
})이렇게, ready를 사용한다면 새로고침이 될 때마다 데이터가 출력된다.
$(document).ready(function () {
let url = "URL";
fetch(url).then(res => res.json()).then(data => {
let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
$('#temperature').text(mise)
})
})
※ 여기서, ready를 자세하게 설명한다면?
: 문서(DOM)가 모두 로드되고, 준비되었을 때 실행되는 코드 블록이다.
위 기본 문법처럼 사용했을 시, {} 안에 DOM이 준비된 후 실행할 코드를 작성하면 된다.
반드시, DOM이 준비된 이후 실행되어야 하는 점 기억하자.
- fetch() 함수를 사용하여 주어진 URL의 데이터 가져오기
-. then(res => res.json()) : 반환된 응답 내용을 JSON 형식으로 만들기
-. then(data => {...}) : JSON 데이터를 가져온 후
- mise 값을 변수에 담기
- 선택자(#temperature) 선택 후 mise 값을 문자열 삽입
이렇게, fetch() 함수를 사용하면 API의 원하는 데이터들을 뽑아 출력할 수 있다.
'Javascript' 카테고리의 다른 글
| [Javascript] 자바스크립트 기초 - JQuery와 기본 문법 (2) | 2025.06.17 |
|---|