스파르타 코딩클럽 개발일지_2주차
수업 목표
1. Javascript 문법에 익숙해진다.
2. jQuery로 간단한 HTML을 조작할 수 있다.
3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.
1. JQuery
-
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 만들어놓은 코드.(라이브러리)
-
Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만, 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장
-
javascript 코드
document.getElementById("element").style.display = "none";
-
jQuery 코드
$('#element').hide();
✔ javascript 코드와 비교했을 때 간단하고 직관적으로 코드 작성이 가능하다.
1-1 jQuery 다뤄보기
1) 임포트하기
- 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 한다.
- 임포트 하는 방법
1. jQuery CDN 부분을 참고해서 임포트하기: (링크)
2. <head>
와 </head>
사이에 아래 코드를 넣으면 임포트 완료!!<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
2) input 박스의 값을 가져와보기
<div class="posting-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>
// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();
3) 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>
// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();
// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();
4) css의 값 가져와보기
$('#post-box').hide();
$('#post-box').css('display');
//display : none;
$('#post-box').show();
$('#post-box').css('display');
// display : block;(또는 다른 값)
5) 태그 내 텍스트 입력하기
- input box의 경우
$('#post-url').val('여기에 텍스트를 입력하면!');
- 다른 것들 - 예) 버튼의 텍스트 바꾸기
// 가리키고 싶은 버튼에 id 값을 준다음
<button id="btn-posting-box" type="button" class="btn btn-primary">포스팅 박스 열기</button>
$('#btn-posting-box').text('포스팅 박스 닫기');
6) 태그 내 html 입력하기
<div>
~ </div>
내에, 동적으로 html을 넣고 싶을 땐? (예를 들어, 포스팅되면 → 카드 추가)
// 사이에 html을 넣고 싶은 태그에 id값을 준 다음
<div id="cards-box" class="card-columns">
<div class="card">
<img class="card-img-top" src="https://www.fodors.com/wp-content/uploads/2018/10/4_UltimateRome_PiazzaNavona-975x650.jpg" alt="Card image cap">
<div class="card-body">
<a href="https://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
<p class="card-text">여기에 기사 내용이 들어가겠죠</p>
<p class="card-text comment">여기엔 코멘트가 들어갑니다</p>
</div>
</div>
</div>
- 버튼을 넣어보기
let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);
- 버튼 말고, 카드를 넣어보기
// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';
let temp_html = `<div class="card">
<img class="card-img-top"
src="${img_url}"
alt="Card image cap">
<div class="card-body">
<a href="${link_url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p>
</div>
</div>`;
$('#cards-box').append(temp_html);
1-2 JQuery 적용하기(나홀로 메모장)
- 포스트 박스 열기/닫기 기능 추가(CSS 추가, text 변경, 조건문 활용)
-
포스트 박스 열기
-
포스트 박스 닫기
-
사용 코드
<!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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Jua', sans-serif;
}
.wrap {
width: 900px;
margin: auto;
}
.commend {
color: blue;
font-weight: bold;
}
.form {
display: none;
width: auto;
margin: 0px auto 30px auto; /*시계 방향*/
border: solid 3px black;
border-radius: 10px;
padding: 40px;
}
</style>
<script>
$(document).ready(function () {
$('#cards-box').empty();
})
function openclose() {
let status = $('#postbox').css('display');
if (status == 'block') {
$('#postbox').hide();
$('#btn-postbox').text('포스트박스 열기');
} else {
$('#postbox').show();
$('#btn-postbox').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 onclick=openclose() id="btn-postbox" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
</p>
</div>
<div class="form" id="postbox">
<div class="form-group">
<label for="exampleInputEmail1">아티클 URL</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">간단 커멘트</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</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://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
</body>
</html>
1-3 jQuery 퀴즈
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 만들어놓은 코드.(라이브러리)
Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만, 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장
javascript 코드
document.getElementById("element").style.display = "none";
jQuery 코드
$('#element').hide();
✔ javascript 코드와 비교했을 때 간단하고 직관적으로 코드 작성이 가능하다.
1. jQuery CDN 부분을 참고해서 임포트하기: (링크)
2.
<head>
와 </head>
사이에 아래 코드를 넣으면 임포트 완료!!<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="posting-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>
// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();
<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>
// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();
// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();
$('#post-box').hide();
$('#post-box').css('display');
//display : none;
$('#post-box').show();
$('#post-box').css('display');
// display : block;(또는 다른 값)
$('#post-url').val('여기에 텍스트를 입력하면!');
// 가리키고 싶은 버튼에 id 값을 준다음
<button id="btn-posting-box" type="button" class="btn btn-primary">포스팅 박스 열기</button>
$('#btn-posting-box').text('포스팅 박스 닫기');
<div>
~ </div>
내에, 동적으로 html을 넣고 싶을 땐? (예를 들어, 포스팅되면 → 카드 추가) // 사이에 html을 넣고 싶은 태그에 id값을 준 다음
<div id="cards-box" class="card-columns">
<div class="card">
<img class="card-img-top" src="https://www.fodors.com/wp-content/uploads/2018/10/4_UltimateRome_PiazzaNavona-975x650.jpg" alt="Card image cap">
<div class="card-body">
<a href="https://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
<p class="card-text">여기에 기사 내용이 들어가겠죠</p>
<p class="card-text comment">여기엔 코멘트가 들어갑니다</p>
</div>
</div>
</div>
let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);
// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';
let temp_html = `<div class="card">
<img class="card-img-top"
src="${img_url}"
alt="Card image cap">
<div class="card-body">
<a href="${link_url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p>
</div>
</div>`;
$('#cards-box').append(temp_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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Jua', sans-serif;
}
.wrap {
width: 900px;
margin: auto;
}
.commend {
color: blue;
font-weight: bold;
}
.form {
display: none;
width: auto;
margin: 0px auto 30px auto; /*시계 방향*/
border: solid 3px black;
border-radius: 10px;
padding: 40px;
}
</style>
<script>
$(document).ready(function () {
$('#cards-box').empty();
})
function openclose() {
let status = $('#postbox').css('display');
if (status == 'block') {
$('#postbox').hide();
$('#btn-postbox').text('포스트박스 열기');
} else {
$('#postbox').show();
$('#btn-postbox').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 onclick=openclose() id="btn-postbox" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
</p>
</div>
<div class="form" id="postbox">
<div class="form-group">
<label for="exampleInputEmail1">아티클 URL</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">간단 커멘트</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</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://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
</body>
</html>
- Quiz1 사용 코드
.....
<script>
function q1() {
let input = $('#input-q1').val(); // 텍스트를 변수에 기입
if (input == '') { // 빈칸 여부 확인
alert('입력하세요!'); // 빈칸일 경우
} else { // 빈칸이 아닐 경우
alert(input);
}
}
</script>
.....
- Quiz2 사용 코드
.....
<script>
function q2() {
let input = $('#input-q2').val(); // 텍스트를 변수에 기입
if (input.includes('@') == true){
let email = input.split('@')[1].split('.')[0];
//1. @기준 텍스트 분리 -> 2. . 기준 텍스트 분리
alert(email);
} else { // @가 없는 경우(=이메일이 아닌 경우)
alert("이메일이 아닙니다.")
}
}
</script>
.....
- Quiz3 사용 코드
.....
<script>
function q3() {
let txt = $('#input-q3').val(); // 텍스트를 변수에 기입
let temp_html = `<li>${txt}</li>`; // 추가할 HTML 코드 변수에 기입
$('#names-q3').append(temp_html); // 텍스트 추가
}
function q3_remove() {
$('#names-q3').empty(); // 축적된 텍스트 삭제
}
</script>
.....
2. Ajax
그 전에, 서버-클라이언트 통신 이해하기
-
ajax
: 비동기식으로 서버로부터 데이터를 가져오기 위해 사용
: 전체 페이지를 로드하는 동기식 통신이 아닌 일부분의 데이터만 변하기를 원할 경우 특정 부분만 로드하여 준다.
-
JSON
: 서버에 저장되는 데이터의 표준 포맷 양식이며 {키:값}형태로 구성
: Ajax를 활용하기 위해 서버와 주고받는 데이터의 형식이 JSON인 것
2-1 Ajax 코드 설명
1) Ajax 기본 골격
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
2) GET , POST 타입
ajax
: 비동기식으로 서버로부터 데이터를 가져오기 위해 사용
: 전체 페이지를 로드하는 동기식 통신이 아닌 일부분의 데이터만 변하기를 원할 경우 특정 부분만 로드하여 준다.
JSON
: 서버에 저장되는 데이터의 표준 포맷 양식이며 {키:값}형태로 구성
: Ajax를 활용하기 위해 서버와 주고받는 데이터의 형식이 JSON인 것
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
API가 은행 창구라고 할 때,
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재
-
GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회 -
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정 -
GET 요청은, url뒤에 아래와 같이 붙여서 데이터 가져간다.
http://naver.com?param=value¶m2=value2 -
POST 요청은, data : {} 에 넣어서 데이터를 가져간다.
data: { param: 'value', param2: 'value2' },
3) Ajax 활용 예시
- 서울 미세먼지 API 활용
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})
- 값 중 도봉구의 미세먼지 값만 가져와보기
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function(response){
let dobong = response["RealtimeCityAir"]["row"][11];
let gu_name = dobong['MSRSTE_NM'];
let gu_mise = dobong['IDEX_MVL'];
console.log(gu_name, gu_mise);
}
})
- 모든 구의 미세먼지 값을 찍어보기
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
let mise_list = response["RealtimeCityAir"]["row"];
for (let i = 0; i < mise_list.length; i++) {
let mise = mise_list[i];
let gu_name = mise["MSRSTE_NM"];
let gu_mise = mise["IDEX_MVL"];
console.log(gu_name, gu_mise);
}
}
});
2-2 Ajax 퀴즈
1) 서울시 미세먼지 현황
-
완성 페이지
✔ 추가 기능 : 미세먼지 수치 70 이상의 구는 빨간색 글씨로 표시 -
사용 코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 연습하고 가기!</title>
<!-- jQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
.bad{
color:red;
}
</style>
<script>
function q1() {
// 여기에 코드를 입력하세요
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
let rows = response["RealtimeCityAir"]["row"];
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM'];
let gu_mise = rows[i]['IDEX_MVL'];
let temp_html = ''
// 70 이상 구 구별, 클래스 활용 css 추가
if(gu_mise > 70){
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html);
}
}
})
}
</script>
</head>
<body>
<h1>jQuery+Ajax의 조합을 연습하자!</h1>
<hr />
<div class="question-box">
<h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
<p>모든 구의 미세먼지를 표기해주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
</ul>
</div>
</body>
</html>
2) 실시간 따릉이 현황
-
완성 페이지
✔ 추가 기능 : 주차된 따릉이 대수가 5대 이하의 구는 빨간색 글씨로 표시 -
사용 코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
table {
border: 1px solid;
border-collapse: collapse;
}
td,
th {
padding: 10px;
border: 1px solid;
}
.urgent {
color: red;
}
</style>
<script>
function q1() {
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let bike = response['getStationList']['row'];
for (let i = 0; i < bike.length; i++) {
let station = bike[i]['stationName']
let rack = bike[i]['rackTotCnt']
let park = bike[i]['parkingBikeTotCnt']
let temp_html = ``
// 5대 이하 구 구별, 클래스 활용 css 추가
if (park < 5) {
temp_html = `<tr class="urgent">
<td>${station}</td>
<td>${rack}</td>
<td>${park}</td>
</tr>`
} else {
temp_html = `<tr>
<td>${station}</td>
<td>${rack}</td>
<td>${park}</td>
</tr>`
}
$('#names-q1').append(temp_html)
}
}
})
}
</script>
</head>
<body>
<h1>jQuery + Ajax의 조합을 연습하자!</h1>
<hr/>
<div class="question-box">
<h2>2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기</h2>
<p>모든 위치의 따릉이 현황을 보여주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<table>
<thead>
<tr>
<td>거치대 위치</td>
<td>거치대 수</td>
<td>현재 거치된 따릉이 수</td>
</tr>
</thead>
<tbody id="names-q1">
</tbody>
</table>
</div>
</body>
</html>
3) 랜덤 고양이 사진 업로드 페이지
- 완성 페이지
- 사용 코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>퀴즈3_김선호</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
div.question-box > div {
margin-top: 30px;
}
</style>
<script>
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {
let cat = response[0]['url'];
$("#img-cat").attr("src", cat); //'ajax img src 변경' 구글링
}
})
}
</script>
</head>
<body>
<h1>JQuery+Ajax의 조합을 연습하자!</h1>
<hr/>
<div class="question-box">
<h2>3. 랜덤 고양이 사진 API를 이용하기</h2>
<p>예쁜 고양이 사진을 보여주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">고양이를 보자</button>
<div>
<img id="img-cat" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
</div>
</div>
</body>
</html>
temp_html은 위에 이미 let에 선언을 해 두었기 때문에 여기선 let을 선언해서는 안된다.
2주차 숙제
나만의 쇼핑몰 페이지에 환율계산기 추가
- 환율API를 활용
- 페이지 로딩과 동시에 환율이 페이지에 표시
1) 완성 페이지
- 환율API를 활용
- 페이지 로딩과 동시에 환율이 페이지에 표시
2) 사용 코드
<!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">
<!-- Google fonts 추가 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@700&display=swap" rel="stylesheet">
<!-- 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>
<style>
* {
font-family: 'Nanum Gothic', sans-serif;
}
.wrap {
width: 700px;
margin: 50px auto auto auto;
}
.img {
width: 700px;
height: 500px;
background-image: url("https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80");
background-position: center;
background-size: cover;
}
.description {
font-size: 20px;
}
.description_price {
font-weight: normal;
font-size: 20px;
}
.btn-primary {
font-size: 20px;
display: block;
width: auto;
margin: auto;
border-radius: 5px;
}
#dollartowon {
color:blue;
font-size: 15px;
}
</style>
<script>
$(document).ready(function () {
dollar_to_won();
})
function ordered () {
alert("주문완료!!")
}
function dollar_to_won() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let rate = response['rate'];
let date = response['date'];
let temp_html = `<p>(${date} 기준)<br>
오늘의 환율($ → ₩) : ${rate} 원</p>`;
$('#dollartowon').append(temp_html);
}
})
}
</script>
</head>
<body>
<div class="wrap">
<div class="img"> </div>
<div class="description">
<h1>사과를 팝니다 <span class="description_price">가격: 1,000원/개</span></h1>
<p>이 사과는 먹으면 기분이 좋아지는 효과가 있어요. 이유는 그냥 달고 맛있거든요😁</p>
<p id="dollartowon" > </p>
</div>
<div class="orderbox">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">주문자 이름</span>
</div>
<input type="text" class="form-control" aria-label="Default"
aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">개수</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected></option>
<option value="1">1개</option>
<option value="2">3개</option>
<option value="3">6개</option>
<option value="3">12개</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">주소</span>
</div>
<input type="text" class="form-control" aria-label="Default"
aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">전화번호</span>
</div>
<input type="text" class="form-control" aria-label="Default"
aria-describedby="inputGroup-sizing-default">
</div>
<button onclick = ordered() type="button" class="btn-primary">주문하기</button>
</div>
</div>
</body>
</html>
3) 숙제 해결 간 발생한 문제점
스파르타에서 제공해준 해설 코드보다 비효율적인 코드 작성
-
문제점
: 내가 작성한 코드는 환율 계산기의 텍스트까지 페이지 로딩 시 새로 가져오는 방식이지만 해설 코드는 환율 데이터만 가져오는 방식을 활용하여 효율적인 코딩을 못한 생각이 들었다. -
해설 function 코드
function get_rate(){ $.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/rate", data: {}, success: function (response) { let now_rate = response['rate']; $('#now-rate').text(now_rate); } }) }
-
내가 작성한 function 코드
function dollar_to_won() { $.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/rate", data: {}, success: function (response) { let rate = response['rate']; let date = response['date']; // 개인적으로 추가한 코드 let temp_html = `<p>(${date} 기준)<br> 오늘의 환율($ → ₩) : ${rate} 원</p>`; $('#dollartowon').append(temp_html); } }) }
Author And Source
이 문제에 관하여(스파르타 코딩클럽 개발일지_2주차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kimcno3/스파르타-코딩클럽-개발일지2주차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)