이 글에서는 Axios와 jQuery를 사용하여 REST API에서 데이터를 가져오고, 국가 이름과 국기 이미지를 웹 페이지에 출력하는 방법을 단계별로 설명합니다. 추가적으로 검색 기능을 구현하여 특정 국가만 필터링해 출력할 수도 있습니다.
사전 준비
1. JSON Formatter 크롬 확장 설치
REST API 데이터를 보기 쉽게 포맷해주는 JSON Formatter 크롬 확장을 설치하세요.
https://chromewebstore.google.com/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=ko&pli=1
2. REST API 활용
REST API를 통해 국가별 정보 데이터를 가져옵니다.
URL: https://restcountries.com/v3.1/all?fields=name,flags
API가 반환하는 데이터는 국가명과 국기 이미지 URL을 포함합니다.
프로젝트 구성
HTML 기본 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>국가별 국기 출력</title>
</head>
<body>
<h1>국가별 국기 정보를 출력하는 웹 페이지</h1>
</body>
</html>라이브러리 추가
Axios와 jQuery를 사용하여 REST API 데이터를 가져오고 DOM 조작을 합니다.
아래와 같이 CDN 링크를 추가합니다. 위치는 타이틀 위치입니다.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"
></script>단계별 구현
1. 국가와 국기 데이터 가져오기
REST API로 데이터를 가져온 후 console.log()로 출력하여 데이터 구조를 확인합니다. 위치는 바디 안입니다.
<script>
axios
.get("https://restcountries.com/v3.1/all?fields=name,flags")
.then((res) => {
console.log(res.data); // 가져온 데이터를 콘솔에서 확인
})
.catch((err) => console.error(err));
</script>2. 데이터 출력
가져온 데이터를 <ul> 안에 <li> 요소로 국가명과 국기 이미지를 출력합니다.
<ul></ul>
<script>
axios
.get("https://restcountries.com/v3.1/all?fields=name,flags")
.then((res) => {
res.data.forEach((nf) => {
const li = `
<li>
<img src="${nf.flags.png}" alt="국기" />
<p>${nf.name.common}</p>
</li>
`;
$("ul").append(li);
});
})
.catch((err) => console.error(err));
</script>3. 간단한 스타일 적용
이미지 크기를 조정하고 텍스트를 이미지 옆에 표시하도록 CSS를 추가합니다. 위치는 타이틀 아래에 붙인 스크립트 아래에 넣겠습니다.
<style>
img {
width: 100px;
vertical-align: middle;
}
p {
display: inline;
margin-left: 10px;
}
</style>4. 검색 기능 구현
특정 단어가 들어간 국가만 필터링해 출력하도록 검색 입력창을 추가합니다.
HTML에 검색 입력창 추가
<input type="text" placeholder="검색할 국가명을 입력하세요." />검색 로직
- 데이터를 전역 변수 g_datas에 저장.
- 검색어를 포함한 국가만 필터링하여 출력.
<script>
let g_datas = []; // 전역 변수에 데이터 저장
// 데이터를 화면에 출력하는 함수
const showFlagAndNation = (datas) => {
$("ul").empty(); // 기존 내용 초기화
datas.forEach((nf) => {
const li = `
<li>
<img src="${nf.flags.png}" alt="국기" />
<p>${nf.name.common}</p>
</li>
`;
$("ul").append(li);
});
};
// 데이터를 가져와 전역 변수에 저장 및 초기 출력
axios
.get("https://restcountries.com/v3.1/all?fields=name,flags")
.then((res) => {
g_datas = res.data;
showFlagAndNation(g_datas); // 전체 데이터를 화면에 출력
})
.catch((err) => console.error(err));
// 입력값 변화에 따라 필터링
$("input").on("keyup", (e) => {
const inputText = $(e.currentTarget).val().toLowerCase(); // 입력값 소문자로 변환
const filtered = g_datas.filter((data) =>
data.name.common.toLowerCase().includes(inputText)
);
showFlagAndNation(filtered); // 필터링된 데이터 출력
});
</script>
이렇게 완성된 최종 코드는 아래와 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>국가별 국기 출력</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"
></script>
<style>
img {
width: 100px;
vertical-align: middle;
}
p {
display: inline;
margin-left: 10px;
}
</style>
</head>
<body>
<h1>국가별 국기 정보를 출력하는 웹 페이지</h1>
<input type="text" placeholder="검색할 국가명을 입력하세요." />
<ul></ul>
<script>
let g_datas = [];
const showFlagAndNation = (datas) => {
$("ul").empty();
datas.forEach((nf) => {
const li = `
<li>
<img src="${nf.flags.png}" alt="국기" />
<p>${nf.name.common}</p>
</li>
`;
$("ul").append(li);
});
};
axios
.get("https://restcountries.com/v3.1/all?fields=name,flags")
.then((res) => {
g_datas = res.data;
showFlagAndNation(g_datas);
})
.catch((err) => console.error(err));
$("input").on("keyup", (e) => {
const inputText = $(e.currentTarget).val().toLowerCase();
const filtered = g_datas.filter((data) =>
data.name.common.toLowerCase().includes(inputText)
);
showFlagAndNation(filtered);
});
</script>
</body>
</html>
이것으로 국가명과 국기가 리스트로 출력되고 검색창에 텍스트를 입력하면 해당 텍스트가 포함된 국가가 출력됩니다.
*생성형 AI 활용한 클라우드&보안 전문가 양성캠프 과정의 교육내용 정리 자료입니다.
'코딩 > 자바스크립트' 카테고리의 다른 글
| [새싹 성동 2기] JavaScript의 배열 메서드: map(), filter(), reduce() (2) | 2024.11.15 |
|---|---|
| [새싹 성동 2기] JavaScript 전개 연산자(Spread Operator)와 비구조화(Destructuring) 정리 (0) | 2024.11.15 |
| [새싹 성동 2기] JavaScript에서 JSON 데이터 처리 및 객체 속성명 활용 (4) | 2024.11.15 |
| [새싹 성동 2기] 자바스크립트를 이용한 간단한 코딩 실습 (0) | 2024.11.12 |
| [새싹 성동 2기] 자바스크립트에서 함수 정의와 활용법 (2) | 2024.11.12 |