1. Javascript 복습
전에 배웠던 것을 이용해보자.
우리가 이번에 만들 것은 버튼을 클릭할 때마다 짝수, 홀수로 경고창이 뜨게 할 것이다. 그렇기 위해서 조건문을 활용해야 한다.
<script>
let count = 1;
function hey() {
if (count % 2 == 0) {
alert('짝수입니다')
} else {
alert('홀수입니다')
}
count++;
console.log(count);
}
</script>이렇게 만들면 클릭할 때마다 짝수, 홀수로 경고창이 뜨게 된다.
처음에 내가 해결하려고 생각했던 것은 반복문이었다. 그러나 말 그대로 버튼을 클릭하기도 전에 계속 반복되어 사용할 수 없었다. 그래서 조건문을 사용한 상태에서 해결하려고 보니 let count = 1;이 hey함수 안에 있어서 계속 반복하게 된다는 사실을 깨달았다. 그래서 그것을 밖으로 빼내어 해결했다.
이것을 통해 함수 안에 있는것은 반복되며 함수가 끝나면 작업도 끝나 기억되지 않는다는 것을 알 수 있었다. 그래서 우리가 let count = 1;을 밖으로 빼낸 것이다. 만약 기억했더라면 count++;로 인해 count가 2로 바뀌었을 것이다.
2. JQuery 시작하기
jQuery란?
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성대둔 것. 라이브러리!
Javascript로도 모든 기능(ex. 버튼, 글씨 바꾸기 등)을 구현할 수 있지만 코드가 복잡하고 브라우저 간 호환성 문제도
고려해야해서 jQuery라는 라이브러리가 등장하게 되었다.
jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드다. 다른 개발자들이 짜둔 코드를 가져와 사용하기 때문에 쓰기 전에 "임포트(미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 한다.)"해야 한다.
Javascript로 길고 복잡하게 써야 한다면
document.getElementById("element").style.display = "none";jQuery로 쓴다면
$('#element').hide();이렇게 짧게 쓸 수 있다.
3. jQuery 다뤄보기
jQuery를 이용하기 위해서 임포트해야 하며 다음 페이지에서 코드를 복사해 임포트 할 수 있다.
https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
jQuery Get Started Adding jQuery to Your Web Pages There are several ways to start using jQuery on your web site. You can: Download the jQuery library from jQuery.com Include jQuery from a CDN, like Google Downloading jQuery There are two versions of jQuer
www.w3schools.com
이 페이지에서 Google CDN을 복사해서 가져와 head안에 붙여넣으면 jQuery를 사용할 수 있다.
$('id나 class의 이름')의 형태로 지정하여 뒤에 속성을 붙여 숨기거나 css를 변경할 수 있다. class를 넣을 때는 [.class 이름] 형식으로 넣고 id를 넣을 때는 [#id 이름] 형식으로 넣는다.
jQuery를 이용해 자주 사용하는 것들을 연습해보겠다.
1. input 박스 값 가져오기
$('#post-url').val();
기존에 있는 id값을 넣고 마침표 뒤에 val();을 입력하면 input 박스 값을 가져올 수 있다.
2. div 보이기/ 숨기기
보이기: $('#post-box').show();
숨기기: $('#post-box').hide();
3. CSS값 가져오기
$('#post-box').css('display');
여기서는 css에서의 display 속성 값을 가져왔다.
4. 태그 내 텍스트 입력하기
1) input box의 경우
$('#post-url').val('여기에 텍스트를 입력하면!');
2) 다른 경우 ex. 버튼의 텍스트 바꾸기
// 가리키고 싶은 버튼에 id 값을 준다음
<button id="btn-posting-box" type="button" class="btn btn-primary">포스팅 박스 열기</button>
jQuery 사용
$('#btn-posting-box').text('포스팅 박스 닫기');
5. 태그 내 html 입력하기
1) <div> ~ <div> 내에, 동적으로 html을 넣고 싶을 때 (ex. 포스팅 되면 -> 카드 추가)
1. 추가할 코드에 id를 준다. ex. id = "card-box"
2. 이후 추가할 카드의 코드를 다음과 같이 입력한다. (let temp_html = ``의 백틱 안에 코드 삽입)
let temp_html = ` <div class="card"> <img class="card-img-top" src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg" alt="Card image cap"> <div class="card-body"> <h5 class="card-title blue"><a target="_blank" href="https://www.naver.com/">기사 제목이 들어가죠</a></h5> <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p> <p class="coment">여기에 코멘트가 들어갑니다.</p> </div> </div>`
3. 추가될 카드의 코드를 추가하고 싶다면 다음과 같이 한다.
$('#cards-box').append(temp_html)
이렇게 하면 cards-box라는 id를 가진 태그에 temp_html이 추가된다.
지우고 싶다면 뒤에 .empty()를 추가하면 된다. 그러면 내부 태그를 모두 비운다. [ex.$('....').empty()]
4. jQuery 적용하기
다음 페이지에서 아래 아티클URL을 적는 창을 포스팅박스 열기 버튼을 이용해 접고 펼수 있게 만들어보겠다.
먼저 기능을 적용할 아티클 창에 id를 부여하고 버튼에 onclick="openclose()"를 넣은 다음 openclose함수를 작성한다.
function openclose(){
let status = $('#post-box').css('display');
if (status == 'block'){
$('#post-box').hide(); // hide는 display를 none으로 바꾸니까!
$('#btn-posting-box').text(`포스팅박스 열기`);
} else {
$('#post-box').show();
$('#btn-posting-box').text(`포스팅박스 닫기`);
}
}그리고 닫히고 열릴 때마다 버튼의 글씨가 바뀌도록 btn-posting-box라는 id를 주고 $().text()를 이용했다.
마지막으로 처음 페이지에 들어왔을 때 접혀져있도록 하기 위해 CSS에서 posting-box를 찾아 display: none;을 주었다.
5. 서버 - 클라이언트 통신 이해하기
서버에서 클라이언트에게 데이터를 넘길 때 JSON파일을 건네준다.
클라이언트에서 서버로 요청할 수 있다. 이때 요청한 타입에 따라 가져와야하는 것이 다르다. 타입에는 두 가지 종류가 존재하는데 바로 GET, POST이다. GET은 통상적으로 데이터 조회를 요청할 때이며 예시로 영화 목록 조회 같은 것이 있다. POST는 데이터 생성, 변경, 삭제를 요청할 때 붙여지며 회원가입, 탈퇴, 비밀번호 수정할 때 주어진다.
이번 시간에는 GET방식에 대해 알아보겠다.
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
영화를 소개하는 주소가 있다면 ?를 기준으로 두 부분으로 쪼갤 수 있다. ? 앞부분은 서버 주소이고 뒷부분이 영화번호이다. 이때 code라는 이름으로 영화번호를 주는 것을 누가 정했을까? 바로 프론트와 백엔드 개발자들이 미리 정해둔 약속이다.
또한 &도 있는데 이것은 전달할 데이터가 더 있다는 뜻이다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
이렇게 있으면 주소는 google.com의 search 창구에 다음 정보를 전달한다.
q=아이폰 (검색어), sourceid=chrome(브라우저 정보), ie=UTF-8(인코딩 정보)
6. Ajax 시작하기
💡 들어가기 앞서 Ajax는 jQuery를 임포트한 페이지에서만 작동한다는 사실을 꼭 기억하자
미세먼지 Open API를 Ajax에 넣어보자
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function(response){
console.log(response)
}
})미세먼지 Open API를 Ajax의 url에 넣으면 function의 response에 담겨 console.log(response)로 찍혀서 출력된다.
만약 여기서 우리가 원하는 데이터를 출력하고 싶다면 다음과 같이 입력한다.
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function(response){
console.log(response['RealtimeCityAir']['row'][0])
}
})이렇게 입력하면 API에서 RealtimeCityAir에서 row의 0번째 값이 도출된다.
이제 활용해보자.
미세먼지 지수가 70보다 낮은 도시의 이름과 수치를 도출시키고 싶다면 어떻게 해야 할까?
$.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']
if(gu_mise < 70){
console.log(gu_name, gu_mise)}}
}
})반복문을 이용하여 전체를 조사하게 한 다음, 내부에서 수치와 이름을 따로 지정해주고 수치를 비교 후 조건에 맞는 것들만 골라 도출한다.
7. Ajax 연습하기
이번에는 다른 API를 이용하여 만들어보자.
서울의 따르릉 이용현황을 알 수 있는 API
http://spartacodingclub.shop/sparta_api/seoulbike
이것을 이용하여 다음과 같이 만들어보자
업데이트를 누르면 각 표가 업데이트 되고 현재 거치된 따릉이 수가 5보다 작으면 빨간색을 띄도록 만들어야 한다.
이것을 만들기 위해서는 앞서 사용했던 Ajax틀을 가져와야 한다.
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function(response){
}
})여기에 우리가 어떤 코드를 넣어야 할 지 생각해보자.
1. 클릭할 때마다 기존의 코드를 지워야 한다.
$().empty();
2. 표에 들어갈 거치대 위치, 거치대 수, 현재 거치된 따릉이 수에 맞는 데이터를 불러와야 한다.
let name = response['getStationList']['row'][0]['stationName']
let box = response['getStationList']['row'][0]['rackTotCnt']
let now = response['getStationList']['row'][0]['parkingBikeTotCnt']
3. 각각의 데이터를 계속 붙여 써야함으로 2를 변형해서 사용한다.
let rows = response['getStationList']['row']
for ( let i = 0 ; i<rows.length ; i++){
let name = rows[i]['stationName']
let box = rows[i]['rackTotCnt']
let now = rows[i]['parkingBikeTotCnt']
let html_txt = `<tr> <td>${name}</td> <td>${box}</td> <td>${now}</td> </tr>` //백틱 사용
$(`#names-q1`).append(html_txt) // #names-q1은 표에 주어진 id여기까지 하면 표가 업데이트 되면서 나오게 된다. 여기에 남은 따릉이 수가 5이하인 표에는 빨간색이 나와야 한다. 그러기 위해서 if를 사용하여 작성한다.
4. if를 사용하여 5개 이하인 정류장에 빨간색을 칠한다.
if (now <= 5) {
let red_txt = `
<tr class="red">
<td>${name}</td>
<td>${box}</td>
<td>${now}</td>
</tr>` // class="red"는 글씨에 빨간색을 입힌다
$('#names-q1').append(red_txt)
} else {
let html_txt = `
<tr>
<td>${name}</td>
<td>${box}</td>
<td>${now}</td>
</tr>`
이제 코드들을 하나로 합쳐보면 다음과 같이 쓸 수 있다.
<script>
function q1() {
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['getStationList']['row']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['stationName']
let now = rows[i]['parkingBikeTotCnt']
let box = rows[i]['rackTotCnt']
if (now <= 5) {
let red_txt = `
<tr class="red">
<td>${name}</td>
<td>${box}</td>
<td>${now}</td>
</tr>`
$('#names-q1').append(red_txt)
} else {
let html_txt = `
<tr>
<td>${name}</td>
<td>${box}</td>
<td>${now}</td>
</tr>`
$('#names-q1').append(html_txt)
}
}
}
})
}
</script>
8. Ajax 연습하기(2)
이번에는 고양이 사진을 랜덤으로 가져오는 api를 사용해서 버튼을 클릭할 때마다 사진이 바뀌도록 할 것이다.
먼저 ajax 틀을 가져와 url을 바꾼다.
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {}})}
그리고 API에서 랜덤으로 바뀌는 url을 변수로 가져온다.
let newImg = response[0]['url'];* 나는 'url'을 2로 넣어서 한참 해맸다... 객체에서 꺼낼 때 키를 넣는데 그걸 깜빡해서...
그리고 jQuery로 이미지를 변경하기 위해 jQuery의 attr을 사용한다.
$("#img-cat").attr('src', newImg);참고자료: https://jjyloves.tistory.com/24
[JQuery] 제이쿼리로 이미지를 변경해보자!
별견 아니지만... 계속 쓰면 괜찮지만 하다가 까먹을 수 있는 jquery로 이미지 변경이다. 아주 간단하다 jquery의 attr 함수를 사용하면 된다. 아이디 값으로 변경을 하던 클래스 명으로 변경을 하든
jjyloves.tistory.com
전체적인 코드를 보면
<script>
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {
let newImg = response[0]['url'];
$("#img-cat").attr('src', newImg);
}
})
}
</script>이렇게 작성할 수 있다.
2주차 후기
jQuery와 Ajax는 처음 써보았다. 특히 jQuery는 사용빈도가 줄어드는 추세라고 들었기 때문에 따로 시간을 내서 배울 생각을 하지 않았다. 그런데 여기서 배워서 그 점이 좋았다. 그리고 Ajax는 같이 공부하는 팀원들에게 간간히 들었었다. 그러나 제대로 알고 있지 않았기 때문에 먼 이야기처럼 들렸는데 여기서 쓰는 법을 알아서 큰 도움이 되었다. 특히 API를 이용할 때 Ajax를 사용해 꾸밀 수 있다는 점이 앞으로 내가 만들 프로젝트에 큰 도움이 될 것 같았다.