내일배움단 Web3.1
[웹개발 종합반] 3주 1일차 개발일지(3주 1-3강)
💻TIL Web.301
복습: 나홀로 메모장에 OpenAPI 붙여보기
현재 ‘나홀로 링크 메모장’ 페이지에는 포스팅박스를 열고 닫는 기능과 함께, 페이지 하단 여러 카드들이 생성되어 있으며, 카드 부분의 html 코드는 아래와 같다. 이번 시간에는 아래의 OpenAPI 데이터를 불러와 각각의 카드 부분에 붙여볼 것이다.
{
"articles": [
{
"comment": " 안녕하세요. 케이론입니다! 오늘 리뷰할 영화는...",
"desc": "1962년 미국, 입담과 주먹만 믿고 살아가던 토니 발레롱가(비고 모텐슨)는 교양과 우아함 그 자체인천재...",
"image": "https://movie-phinf.pstatic.net/20190115_228/1547528180168jgEP7_JPEG/movie_image.jpg?type=m665_443_2",
"title": "그린 북",
"url": "https://movie.naver.com/movie/bi/mi/basic.nhn?code=171539"
},
...
]
}
<div class="card-columns" id="cards-box">
<div class="card">
<img class="card-img-top" src="https://media.socastsrm.com/wordpress/wp-content/blogs.dir/2311/files/2020/01/5e271dbe023d16073306ba72jpeg.jpg" alt="Card image cap">
<div class="card-body">
<a class="card-title" href="http://naver.com/">여기 기사 제목이 들어가죠.</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card"...>
<div class="card"...>
...
</div>
1) 로딩 후 바로 실행되는 함수
$(document).ready(function() {
// 페이지 로딩 후 바로 실행될 함수
listing();
});
위의 JSON 데이터(OpenAPI)를 하단의 HTML 코드의 “card”에 불러오고 싶다. 이 데이터는 페이지를 로딩하자마자 화면에 떠야 하므로, 로딩 후 바로 실행되는 함수를 <script> 태그 내에 써 준다. 앱 개발 때 배운 useEffect와 비슷한 느낌이다.
2) Ajax/반복문으로 데이터 불러오기
function listing () {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/post",
data: {},
success: function(response) {
console.log(response);
}
})
}
위와 같이 Ajax 기본 템플릿에 API url 주소를 입력하고, console.log()로 데이터가 잘 출력되는지 확인한다.
function listing () {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/post",
data: {},
success: function(response) {
let rows = response.articles;
}
}
})
}
다음으로, rows를 만들고 반복문을 사용해 API 데이터에 접근할 수 있도록 한다. 위의 API 데이터를 참고하면, 내가 사용할 데이터는 articles key의 값이다. 연결 연산자를 이용해 response(입력한 url의 데이터)의 articles key에 접근한다. response['articles'] 처럼 bracket을 사용해도 된다.
3) 불러온 데이터 입력하기
- 스스로 해보기
// X
success: function(response) {
let rows = response.articles;
for (let i = 0; i < rows.length; i++) {
$('#card-img-top').attr("src", "${rows[i].image}");
$('#card-title').text("${rows[i].title}");
$('#card-title').attr("href", "${rows[i].url}");
$('#card-text').text("${rows[i].desc}");
$('#card-comment').text("${rows[i].comment}");
}
}
반복문은 articles array의 각 element를 돌면서, 딕셔너리(Object) 형태의 element에서 key-value값을 각각의 카드에 배정해야 한다. 이를 위해 text와 attr를 사용해 각각의 key 값을 입력했다. 그런데 이 코드를 사용하면 반복문이 실행될 때마다 클래스가 적용된 카드에 입력되는 값도 모두 같이 바뀔 것 같았고, 실제 페이지에도 적용이 되지 않았다.
- 해설 코드
success: function(response) {
let rows = response.articles;
for (let i = 0; i < rows.length; i++) {
let comment = rows[i]['comment'];
let desc = rows[i]['desc']
let image = rows[i]['image']
let title = rows[i]['title']
let url = rows[i]['url']
console.log(comment, desc, image, title, url);
}
}
튜터분은 일단 모든 key 값을 변수로 설정하셨고, 다음으로 console.log()로 값들이 잘 찍혀 나오는지 확인하셨다. 앞 강의들에서도 계속 느끼고 있지만, 자주, 또 오래 사용될 값들은 변수로 간단히 설정하고, 값을 자주 체크하고 확인하는 습관을 들이자! 이때까지의 흐름을 살펴보면, 화면이 로딩된 직후 listing 함수가 실행되며, 이 함수는 Ajax를 사용해 url의 데이터를 call한다. 데이터는 반복문을 통해 순차적으로 불려 console창에 찍히게 된다.
success: function(response) {
let rows = response.articles;
for (let i = 0; i < rows.length; i++) {
let comment = rows[i]['comment'];
let desc = rows[i]['desc']
let image = rows[i]['image']
let title = rows[i]['title']
let url = rows[i]['url']
let temp_html = `<div class="card">
<img class="card-img-top" src="${image}" alt="Card image cap">
<div class="card-body">
<a class="card-title" href="${url}">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-comment">${comment}</p>
</div>`
$('#cards-box').append(temp_html);
}
}
그리고, 카드에 데이터를 가져오는 것은 각각의 클래스에 값들을 주는 것이 아니라, 각 데이터를 담은 카드 전체를 back-tick을 사용한 temp_html로 가져오는 것이었다. 그런 다음, Ajax의 append를 사용해 card-columns 부분에 붙여넣으면 된다.
변수로 지정한 값들은
${}형태로 따옴표 없이 사용이 가능하다. 또, Ajax의 $(‘’) 안에는 태그의 아이디를 사용한다. 클래스를 사용하는 부트스트랩과 헷갈리지 말 것!
미리 있던 카드들을 없애기 위해, 나는 원래 있던 코드들을 다 지웠다. 하지만 강의에서처럼 Ajax의 empty를 listing() 함수를 부르기 전 사용해 이미 있던 카드들을 다 지울 수도 있다. 아래 코드처럼, 화면 로딩 직후 실행되는 함수 파트에 empty를 사용해도 되고, 함수 최상단에 empty를 사용해도 된다.
$(document).ready(function() {
// 페이지 로딩 후 바로 실행될 함수
$('#cards-box').empty();
listing();
});
function listing() {
$('#cards-box').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/post",
data: {},
success: function (response) {
let rows = response.articles;
...
}
}
})
}
- 결과 이미지
Leave a comment