1. INTRO
axios는 리액트에서 데이터를 처리하기 위해 사용하는 js의 웹 요청 라이브러리입니다. 어떻게 활용하는지 예시를 정리했습니다.
2. JSON Formatter
JSON 포맷 데이터를 쉽게 볼 수 있도록 아래 링크에서 크롬 확장자를 다운받는다.
https://chromewebstore.google.com/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=ko&pli=1
3. axios
axios는 JavaScript 환경에서 HTTP 요청을 보내고 응답을 처리하는 데 사용되는 Promise 기반의 HTTP 클라이언트 라이브러리이다.
요청 데이터를 JSON으로 직렬화하거나, 응답 데이터를 JSON으로 자동 파싱한다.
그리고 간단한 사용법과 강력한 기능을 제공하여 RESTful API와의 상호작용에 널리 활용한다.
axios 사용을 위해 아래의 라이브러리를 js 코드의 head 에 추가한다.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> - GET 요청
주소만 전달하며, 작성 코드는 아래와 같다.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios
.get("https://jsonplaceholder.typicode.com/posts")
.then(res => {
console.log(res.data);
// title만 콘솔에 출력
console.log("---------------------");
res.data.forEach(d => console.log(d.title));
console.log("---------------------");
res.data.map(d => console.log(d.title));
})
.catch(err => {
console.log(err);
});
</script>- POST 요청
요청 본문을 통해서 서버로 정보(요청 파라미터)를 전달. 확인 코드는 아래와 같다.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios
.post("https://jsonplaceholder.typicode.com/posts", {
title: "axios post test",
body: "axios is fun!!!",
userName: "홍길동"
})
.then(res => {
console.log(res.data);
})
.catch(err => {
console.log(err);
});
</script>- 요청 인터셉터 설정
요청 헤더의 Authorization을 보면 입력값이 보여짐. (GET/POST 요청 방식 모두 해당)
<script>
axios.interceptors.request.use(config => {
config.headers.Authorization = `Bearer MY_ACCESS_TOKEN`;
return config;
}, error => {
return Promise.reject(error);
});
</script>- 응답 인터셉터 설정
공통적으로 응답 데이터에 대해 처리할 때 설정.
<script>
axios.interceptors.response.use(response => {
console.log('Interceptor response data', response.data);
return Promise.resolve(response);
}, error => {
return Promise.reject(error);
});
</script>4. 국가 정보를 가져와서 화면에 출력 ⇒ 국가명, 국기 이미지, 지도 링크 등을 출력
- 국가 정보를 제공하는 REST API
엔드포인트 ⇒ https://restcountries.com/v3.1/all
필드 설명 ⇒ https://gitlab.com/restcountries/restcountries/-/blob/master/FIELDS.md
- 실행에 필요한 js 라이브러리 추가
CDN 검색해서 링크 넣어준다.
<!-- axios, jquery 라이브러리 추가 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>- axios 이용해서 국가 데이터 조회
axios.get("https://restcountries.com/v3.1/all")
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
- 가져온 데이터를 \<li> 로 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- axios, jquery 라이브러리 추가 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
axios.get("https://restcountries.com/v3.1/all")
.then(res => {
console.log(res);
res.data.forEach(country => {
/* 데이터의 구조를 파악해서 원하는 데이터를 추출
console.log(country.name.official);
console.log(country.flags.png);
console.log(country.maps.googleMaps);
console.log(country.maps.openStreetMaps);
console.log("---------------");
*/
const li = `
<li>
<img src="${country.flags.png}" alt="${country.flags.alt}" />
<p>${country.name.common} (${country.name.official})</p>
</li>
`;
$('ul').append(li);
});
})
.catch(err => {
console.log(err);
});
</script>
<style>
img { width: 100px; height: auto; }
p { display: inline; }
</style>
</head>
<body>
<h1>국가 정보를 가져와서 출력</h1>
<ul>
<!--
<li>
<img src="https://flagcdn.com/w320/ni.png" alt="국기설명" />
<p>일반국가명 (공식국가명)</p>
</li>
-->
</ul>
</body>
</html>- 부트스트랩 적용
부트스트랩은 빠르고 간편한 반응형 웹 디자인을 위한 오픈소스 프론트엔드 프레임워크이다. 아래 링크를 헤더의 js 라이브러리 위치 및 스타일시트 위에 넣어준다.
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> - 특정 단어가 들어간 국가만 필터링해서 출력되도록 수정
[추가 조건]
1. 검색 결과로 조회된 국가 개수를 출력하는 코드를 추가
2. 국가명 아래에 구글 지도와 Open Street Map 지도를 보여주는 링크를 추가
(링크를 클릭하면 지도가 새창에서 열리도록)
[결과]
[소스 코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- axios, jquery 라이브러리 추가 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<script>
// 서버로 부터 가져온 전체 국가 정보를 저장할 배열
let datas = [];
// 국가 정보를 담고 있는 배열을 출력
const showCountryInfo = (countryInfos, filteredCount) => {
$('ul').empty();
countryInfos.forEach(country => {
const li = `
<li class="d-flex align-items-center border p-3 bg-white rounded shadow-sm">
<img src="${country.flags.png}" alt="${country.flags.alt}" class="img-fluid rounded" />
<p class="mb-0 ms-3">${country.name.common} (${country.name.official})
<br>
<a href ="${country.maps.googleMaps}" target="_blank" title="googleMaps">googleMaps</a>
<br>
<a href ="${country.maps.openStreetMaps}" target="_blank" title="openStreetMaps">openStreetMaps</a>
</p>
</li>
`;
$('ul').append(li);
});
// 검색된 국가 수 출력
$('#country-count').text(`검색된 국가 수: ${filteredCount}`);
};
axios.get("https://restcountries.com/v3.1/all")
.then(res => {
datas = [...res.data];
showCountryInfo(res.data, res.data.length);
})
.catch(err => {
console.log(err);
});
</script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
img { width: 100px; height: auto; margin-right: 10px; }
ul { padding: 0; }
li { list-style-type: none; margin-bottom: 20px; }
</style>
</head>
<body class="bg-light">
<div class="container my-5">
<h1 class="text-center text-primary mb-4">국가 정보를 가져와서 출력</h1>
<div class="d-flex justify-content-center mb-4">
<input type="text" class="form-control" placeholder="검색할 국가명을 입력하세요." />
</div>
<!-- 검색된 국가 수를 표시할 부분 -->
<div class="mb-4 text-center" id="country-count">
검색된 국가 수: 0
</div>
<ul class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3"></ul>
</div>
<script>
$('input').on('keyup', e => {
const inputText = $(e.currentTarget).val().toLowerCase();
// 국가명에 입력창의 내용이 포함된 국가들만 필터링
const filteredData = datas.filter(data =>
data.name.common.toLowerCase().indexOf(inputText) >= 0 ||
data.name.official.toLowerCase().indexOf(inputText) >= 0
);
// 국가 정보를 출력하고, 검색된 국가 갯수를 전달
showCountryInfo(filteredData, filteredData.length);
});
</script>
</body>
</html>
5. 모듈
소프트웨어를 구성하는 하나의 독립적인 단위로, 특정 기능을 캡슐화하여 다른 코드와 분리한 코드의 집합이다.
모듈을 사용하면 코드 재사용성을 높이고, 관리와 유지보수를 쉽게 하며, 복잡한 시스템을 더 작은 단위로 나누어 개발하는 게 가능해진다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export
--import(다른 모듈을 가져와서 쓴다) 와 export(다른쪽에서 쓰게 하는 것) 읽어보기
- 모듈 생성 및 사용
>>> math.js (모듈 파일)
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;>>> main.js (모듈을 사용하는 파일)
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2- 기본(default) 내보내기
>>> math.js
export default function multiply(a, b) {
return a * b;
}>>> main.js
import multiply from './math.js';
console.log(multiply(5, 3)); // 15OUTRO
오늘은 실습이 많고 눈에 보이는 결과물이 있어서 재밌게 수업을 들었습니다. 새로운 내용이 많이 쌓이고 있지만 오늘도 역시 화이팅!
지니니