웹 / 제이쿼리(jQuery)란 무엇인가/유용한공부사이트/함께해보는예제/쉬운설명/ w3schools
웹 / 제이쿼리(jQuery)란 무엇인가/유용한공부사이트/함께해보는예제/쉬운설명/ w3schools
다음은 자바스크립트보다 더욱 간결하게 웹 기능을 사용할 수 있는 '제이쿼리(jQuery)'에 대해 알아볼 것이다. jQuery 란 무엇인가? 제이쿼리는 '경량의 JavaScript 라이브러리'라고도 한다. 기존과 다
parkjh7764.tistory.com
이번에는
이전 글에서 잠깐 포스팅했던 골격을 활용할 것이다.
이전에는 '포스팅박스 닫기' 버튼을 누르면 아래의 URL 과 기사 내용을
입력하는 부분이 사라지는 것을 연습했다면
이번에는 그 아래, 포스트들을 이전부터 다뤘던
jQuery와 Ajax를 통해 다른 포스트들을 가져오려고 한다.
완성 전의 모습
완성된 모습
위의 아무 의미 없는 이미지와 글들을 미리 써서 포스팅을 구성했더라면
아래와 같이 영화 이미지, 영화 이름과 줄거리를 가져와
의미있는 포스팅으로, 그것도 우리가 일일이 작성하는 것이 아니라
다른 곳에서 데이터를 가져오는 방식으로 만들어보고자 한다.
들어가기 전에 유용한 정보 공유 !!!!!
'NAVER Developers'
네이버에 영화를 검색하면 나오는 데이터들을
API로 받아올 수 있습니다.
오픈 API 이용 신청을 하면 되는데,
네이버 영화 관련 API가 필요하시다면
아래 주소로 들어가 자세한 설명을 보시길 바랍니다 :)
https://developers.naver.com/docs/search/movie/
검색 API 영화 검색 개발가이드
NAVER Developers - 검색 API 영화 검색 개발가이드
developers.naver.com
또 다른 영화 OpenAPI를 가지고 올 수 있는 사이트
https://www.kobis.or.kr/kobisopenapi/homepg/main/main.do
영화진흥위원회 오픈API
OPEN API 서비스 영화진흥위원회 영화관입장권통합전산망에서 제공하는 오픈API 서비스로 더욱 풍요롭고 편안한 영화 서비스를 즐겨보세요.
www.kobis.or.kr
영화진흥위원회 오픈 API 예시를 가져와서 한번 보자.
우린 JSON 형태를 다뤘기 때문에 JSON 링크를 클릭한다.
| http://kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieList.json?key=f5eef3421c602c6cb7ea224104795888 |
크롬으로 열고, JSON View가 깔려 있다면 아래와 같이 보일 것이다.
이를 Ajax와 jQuery를 알고 있다면 내 마음대로 활용이 가능하다.
오늘 활용할 기본 골격(?) 코드이다.
Ajax와 브라우저를 켰을 때 다른 요소들이 로딩이 완료 됨과
동시에 함수를 실행하는 코드를 활용할 것이다.
※Ajax 기본 골격※
<script>
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
</script>※웹에 로딩 후 바로 실행하는 코드※
$(document).ready(function(){
ex();
});
function listing() {
console.log('화면 로딩 후 바로 실행');
}
그리고 완성 전의 모습에 대한 기본 틀.
HTML 코드는 맨 아래에 게시해놓을테니
필요하다면 복사해서 붙여쓰기를 바란다.
기본 HTML을 붙여 넣었다면
위에 완성된 모습을 보면서 코드들을 추가해보자.
여기서 영화에 대한 API를 가져와야 하는데 API에 대한 것은
사용자가 어떤 API 주소를 가져왔느냐에 따라서 URL과 해당 URL로 부터
가져온 데이터들이 다를 것이다.
내가 가져온 API 데이터의 JSON 형태는
articles 리스트 형태로 시작한다.
아래의 API 형태라고 가정하고 코드를 작성하겠다.
Script 완성 코드
<script></script> 부분에 대한 코드이다.
이전 포스팅에서 다뤘던 부분들과 거의 똑같고
영화 제목, 영화 이미지, 영화 줄거리, 영화 간단 설명, 영화 주소로
API로 부터 가져오는 데이터가 조금 더 많을 뿐이다.
<script>
$(document).ready(function () {
$("#cards-box").empty();
$.ajax({
type: "GET",
url: "", //사용자가 가져온 API를 넣으세요
data: {},
success: function (response) {
let article = response["articles"];
for (let i = 0; i < article.length; i++) {
let title = article[i]["title"];
let comment = article[i]["comment"];
let image_url = article[i]["image"];
let movie_url = article[i]["url"];
let desc = article[i]["desc"];
let temp_html = `<div class="card">
<img
class="card-img-top"
src="${image_url}"
alt="Card image cap"
/>
<div class="card-body">
<a href="${movie_url}"
>${title}</a
>
<p class="card-text">
${desc}
</p>
<p class="card-text comment">${comment}</p>
</div>
</div>`;
$("#cards-box").append(temp_html);
}
},
});
});
</script>코드를 간단하게 설명하자면
API URL로부터 "articles" 리스트를 article이란 변수에 넣는다.
그리고 for 반복문을 돌려 title, comment, image, url, desc 데이터를
각각 다른 변수에 넣고, 이를 카드 형태로 반복문이 돌 때까지 .append() 메소드로 붙여넣어 주는 것이다.
--------------------오늘 실습 기본 틀 HTML 코드-----------------
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
<title>나만의 영화 저장집</title>
<link
href="https://fonts.googleapis.com/css2?family=Jua&display=swap"
rel="stylesheet"
/>
<style>
* {
font-family: "Jua", sans-serif;
}
.wrap {
margin: auto;
width: 900px;
}
.comment {
font-weight: bold;
color: blue;
}
.posting-box {
margin: 10px auto 30px auto;
width: 500px;
border: 3px solid black;
border-radius: 5px;
padding: 25px;
display: none;
}
</style>
<script>
function openclose() {
let status = $("#post-box").css("display");
if (status == "block") {
$("#post-box").hide();
$("#posting-box-btn").text("포스팅박스 열기");
} else {
$("#post-box").show();
$("#posting-box-btn").text("포스팅박스 닫기");
}
}
</script>
</head>
<body>
<div class="wrap">
<div class="jumbotron">
<h1 class="display-4">나만의 영화 저장집</h1>
<p class="lead">봤던 영화들을 저장해두는 공간입니다.</p>
<hr class="my-4" />
<p class="lead">
<a
id="posting-box-btn"
onclick="openclose()"
class="btn btn-primary btn-lg"
href="#"
role="button"
>포스팅박스 열기</a
>
</p>
</div>
<div class="posting-box" id="post-box">
<div class="form-group">
<label for="exampleInputEmail1">URL</label>
<input
id="post-url"
type="email"
class="form-control"
aria-describedby="emailHelp"
placeholder=""
/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">코멘트</label>
<input type="password" class="form-control" placeholder="" />
</div>
<button type="submit" class="btn btn-primary">영화 저장</button>
</div>
<div class="card-columns" id="cards-box">
<div class="card">
<img
class="card-img-top"
src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
alt="Card image cap"
/>
<div class="card-body">
<a href="http://naver.com" class="card-title"
>여기 기사 제목이 들어가죠</a
>
<p class="card-text">
기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img
class="card-img-top"
src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
alt="Card image cap"
/>
<div class="card-body">
<a href="http://naver.com" class="card-title"
>여기 기사 제목이 들어가죠</a
>
<p class="card-text">
기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img
class="card-img-top"
src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
alt="Card image cap"
/>
<div class="card-body">
<a href="http://naver.com" class="card-title"
>여기 기사 제목이 들어가죠</a
>
<p class="card-text">
기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img
class="card-img-top"
src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
alt="Card image cap"
/>
<div class="card-body">
<a href="http://naver.com" class="card-title"
>여기 기사 제목이 들어가죠</a
>
<p class="card-text">
기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img
class="card-img-top"
src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
alt="Card image cap"
/>
<div class="card-body">
<a href="http://naver.com" class="card-title"
>여기 기사 제목이 들어가죠</a
>
<p class="card-text">
기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
</div>
</body>
</html>
댓글