Javascript는 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.
웹사이트는 크게 HTML(Hyper Text Markup Language), CSS(Cascading Style Sheets), Javascript 3가지로 구성된다. HTML은 웹페이지의 큰 뼈대를 제공하고, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다. Javascript는 웹페이지의 동작을 담당한다. 웹 페이지에서 사용자로부터 특정 이벤트나 입력 값을 받아 동적인 처리를 목적으로 고안된 객체 기반의 스크립트 프로그래밍 언어로 일반적으로 HTML 문서에 내재되며, 브라우저에서 실행된다.
예를 들어 Javascript를 이용하면 마우스를 HTML 문서의 특정 이미지나 텍스트 위로 가져갔을 때 이미지의 크기가 커지거나 텍스트의 색이 바뀌는 기능이나 검색창에 '네'를 입력하면 현재 기준으로 사용자 검색이 많은 '네'로 시작하는 검색어 목록을 보여주는 기능도 Javascript로 구현한 것이다. 또는 '버튼을 클릭하면 서울시의 기온을 보여줘'라는 식의 명령을 내릴 수 있다.
출처 : 스파르타코딩클럽
- 클라이언트가 서버에 요청하면, 서버가 클라이언트에게 HTML + CSS + Javascript를 준다. 역사적인 이유와 이미 만들어진 표준이 있어서 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML + CSS + Javascript를 주게 되어 있다.
- Javascript 맛보기 (내 생애 최고의 영화들)
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타 피디아</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
......
</style>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button>영화 기록하기</button>
</div>
......- 버튼을 클릭하면 경고창이 뜨는 기능 만들기
<head>
<script>
function hey() {
alert('안녕!');
}
</script>
<head>- '영화 기록하기' 버튼에 함수 연결하기
<button oneclick="hey()">영화 기록하기</button>-> 버튼을 클릭하면(oneclick) hey를 불러라(hey()) 함수 hey()를 실행하라(alert('안녕!'))
3. 버튼을 클릭하면 콘솔창에 문구를 띄우는 기능 만들기
<script>
function hello() {
console.log('안녕하세요')
}
</script>
<body>
<button onclick="hello()">영화 기록하기</button>
</body>
-> 개발자도구(F12)의 Console 탭에서 '안녕하세요'가 출력되는 것을 볼 수 있다.
console.log는 개발자들이 코드가 맞게 출력되는지 미리 확인하기 위한 도구
- console 창에 직접 코드 작성하기
console 창에 hello()를 쓰고 엔터를 하면 똑같이 '안녕하세요'의 경고창이 뜬다.
function bye(){
console.log('잘가!');
}-> console 창에 위의 코드를 입력 후 bye()를 치면 '잘가!'가 출력된다.
새로고침을 하고 bye()를 한 번 더 치면 실행되지 않는다. 새로고침을 하면 console 창에 작성한 코드가 사라진다.
# 코드 해석
EX) 영어 문법
주어 + 동사 + 목적어
I love you -> 나는 사랑한다 너를
console.log('안녕하세요') -> console이 log한다. '안녕하세요'를
동사 + 목적어 -> 명령문
love yourself -> 사랑해라 너를
alert('안녕하세요') -> alert해라 '안녕하세요'를
변수
- 변수 선언 (상수는 나중에 알아보도록 하겠다.)
변수는 값을 저장하는 박스
- 처음 변수를 선언할 때는 앞에 let을 쓴다.
let a = 2- 변수를 선언하고 값을 부여했다면 변수 이름만 적어도 값이 출력된다.
let a = 2
a // 2- 변수는 다른 값으로 선언이 가능하다. 새 값을 넣어줄 때는 let은 생략한다.
let a = 2
a = 4
a // 4
a = a + 4
a // 8- 변수는 선언만 하고 나중에 값을 지정해줄 수 있다.
let a
a
undefineda = 'Alex' // 문자열 자료는 작은 따옴표로 감싸준다.
a // 'Alex'- 다른 변수에 들어가 있는 값을 새 변수에 넣을 수 있다.
let a = 2
let b = a
console.log(a,b) // 2 2 (여러 값을 한번에 출력할 수 있다.)
a // 2
b // 2- 자료형과 기본 연산
자료형은 변수에 저장할 수 있는 값과 그 형태를 말한다.
1. 숫자 자료형
let a = 7
let b = 2변수가 둘 다 숫자형일 경우 사칙연산이 가능하다.
a+b // 9
a-b // 5
a＊b // 14
a/b // 3.5
a%b // 1 (나머지)
a+3＊b // 13 (여러 연산을 한 줄에 할 경우 사칙연산의 순서를 따른다.)- 변수에 적용할 수 있는 연산자
1) 복합 대입 연산자(+=, -=, ＊=, /= 등)
a = 100
a = a + 100
-> a += 100 (a에 100을 더한 a+100을 a에 저장)
a // 2002) 증감 연산자(++, --)
let a = 0
a++ // 0
a // 1
a-- // 1
a // 0
a++ // 0
a++ // 1
a++ // 2
console.log(a) // 3
a++ // 1을 더한 값을 다시 a에 저장
a-- // 1을 뺀 값을 다시 a에 저장2. 문자열
따옴표로 감싸면 문자로 취급되어 문자열 자료로 정의된다.
console에 abcd라고 입력하면 코드실행기가 이게 자료인 문자열인지 혹은 식별자인지 구분할 수가 없다. 그래서 문자열은 큰/작은(차이 없음) 따옴표로 표현한다.(식별자는 나중에 정의하도록 하겠다.)
let a = '대한'
let b = '민국'
a + b // 대한민국
(문자형 자료인 값을 이어붙인 문자열을 출력)
a + '' + b // 대한 민국
(띄어쓰기도 따옴표로 문자형 자료라고 정의했기 때문에 문자열 자료로 출력된다.)let a = 1
let b = 'a'
let c = a
console.log(a,b,c) // 1 'a' 1
(따옴표로 감싸지 않으면 문자열로 인식하지 않고 다른 변수(변수명)으로 인식한다.)let a = '3'
let b = '5'
a + b // '35'
(문자열 간의 덧셈이기 때문에 앞뒤로 이어붙인 문자열이 반환된다.)let a = 7
let b = '대한'
a + b // '7대한'
(문자열과 숫자를 더하면 숫자를 문자열로 바꾼 후 더해준다.)let a = x
a // Uncaught ReferenceError: a is not defined
(x라는 변수가 정의되지 않았기 때문에 에러메시지가 나온다.)let a = 'x'
a // 'x'
(변수 a의 값이 'x'라는 문자형 자료)- 문자열에 적용할 수 있는 처리
1) 문자열 연결 연산 (문자열 + 문자열)
'안녕' + '하세요' // '안녕하세요'
2) 문자 선택 연산 (문자열[index])
'안녕하세요'[0]' // 안 (index는 0부터 시작)
3) 문자열의 길이 (문자열.length)
'안녕하세요'.length // 53. 리스트와 딕셔너리
1) 리스트 (순서를 지켜서 가지고 있는 형태)
let a_list = []
빈 리스트를 선언하고 나중에 값을 지정해줘도 된다.
변수 이름은 아무거나 가능하고 자료값이 리스트형일 경우 '[]'를 쓴다.let b_list=[1,2,'사과',3]
서로 다른 자료형의 요소를 섞어서 가질 수 있다.
b_list[1] // 2 (index는 0부터 시작)
b_list[2] // '사과'
b_list[2] = 4 // 값 수정이 가능
b_list // [1,2,4,3]- 리스트에 요소 넣기(.push())
b_list.push('스파르타')
b_list // [1,2,4,3,'스파르타']- 리스트의 길이 구하기(.length)
b_list.length // 5let c_list = [1,2,3,[1,2,3]] // 리스트형 자료를 요소로 가질 수 있다.
c_list.length // 4
c_list[3] // [1,2,3]
c_list[3][1] // 2
let d_list = [9,8,7]
c_list.push(d_list)
c_list // [1,2,3,[1,2,3],[9,8,7]]
c_list.length // 5- 리스트와 리스트 이어붙이기(.concat())
let c_list = [1,2,3,[1,2,3]]
let d_list = [9,8,7]
let e_list = c_list.concat(d_list)
e_list // [1,2,3,[1,2,3],9,8,7]
c_list // [1,2,3,[1,2,3]] (c_list는 변함이 없다.)2) 딕셔너리(key:value 값의 묶음)
let a_dict = {}
빈 딕셔너리를 선언하고 나중에 값을 지정해줘도 된다.
변수 이름은 아무거나 가능하고 자료값이 딕셔너리형일 경우 '{}'를 쓴다.let b_dict = [
{'name':'영수','age':27},
{'name':'철수','age':15},
{'name':'영희','age':20}
]
b_dict[0]['name'] // 영수
b_dict[1]['age'] // 15
b_dict[1]['age'] = 25
b_dict[1]['age'] // 25
변수이기 때문에 언제든 값을 변경할 수 있다.- 딕셔너리에 key:value 값 넣기
b_dict[0]['height'] = 170
b_dict = [
{'name': '영수', 'age': 27, 'height': 170}
{'name': '철수', 'age': 15}
{'name': '영희', 'age': 20}
]- 딕셔너리를 요소로 갖는 리스트
리스트 전체는 대괄호([])로 묶고 안에 딕셔너리 요소들은 중괄호({})로 묶는다.
people = [{'name': '영수', 'age': 27, 'height': 170},
{'name': '철수', 'age': 15},
{'name': '영희', 'age': 20}
]
people[0]['name'] // '영수'
people[1]['age'] // 15
new_person = {'name': '미래', 'age': 22, 'height': 165}
people.push(new_person) = [
{'name': '영수', 'age': 27, 'height': 170},
{'name': '철수', 'age': 15},
{'name': '영희', 'age': 20}
{'name': '미래', 'age': 22, 'height': 165}
]
people[3]['age'] // 22
★ 리스트형 자료가 순서를 지켜서 가지는 이유는 보기에도 깔끔하고 많은 양의 정보를 다루기도 쉽기 때문이다. 예를 들어 고객의 정보를 저장한다고 했을 때 새로운 고객이 왔을 때 .push 함수로 쉽게 추가할 수 있다.
#### 괄호 사용법
- 대괄호([])
list를 나열할 때
list의 인덱스를 지정해줄 때
ex) mise[0], mise[1]
딕셔너리 요소를 가지고 있는 리스트형의 변수에서 키 값을 대입하여 밸류 값을 추출할 때
ex) b_dict[1]['age']
- 중괄호({})
딕셔너리를 만들 때 ('key' : 'value')
style 태그를 적용해줄 때
ex) .mytitle {}
특정 함수(function)에 대해 정의해줄 때
ex) .function oneclick() {}
for문의 조건문 뒤에 실행할 것을 적어 줄 때
ex) fruits.forEach((a) => {
console.log(a)
})
if문 뒤에 실행 할 것을 적어 줄 때
ex) if (조건) {
// 조건에 맞다면~
} else {
// 아니라면~
}
- 소괄호 (())
for문의 특정 조건을 적어줄 때
ex) for (i=0; i<100; i++)
if문의 특정 조건을 적어 줄 때
ex) if (a>b)
jquery 선택자를 적어줄 때(특정조건)
ex) $('#names-q1')
함수 이름 바로 뒤에 (매개변수가 들어갈 위치)
ex) function oneclick() => ()여기에는 특졍 매개변수가 들어갈 수 있다.나머지 자료형은 나중에 알아보도록 하겠다.
- jQuery
jQuery는 HTML 요소드을 조작하는 편리한 Javascript 라이브러리
(라이브러리는 자주 사용하는 기능과 효과(그들을 실행하는 프로그램)을
Javascript 코드로 미리 만들어 두고 재활용할 수 있게 한 것이다.)
jQuery를 사용하기 위해서는 부트스트랩 CSS 파일을 가져올 때와 마찬가지로 내 컴퓨터에 해당 파일을 저장해서 사용할 수도 있지만 외부에서 온라인 상의 미리 작성된 JavaScript 코드를 임포트를 해서 사용한다.
Javascript는 웹을 움직이게 조작하기 위해 사용하는데 직접 Javascript 코드를 작성하여 모든 기능을 구현할 수도 있지만, 이 경우에 코드가 복잡하고, 개발환경과 다른 브라우저에서 잘 작동을 안하는 등 브라우저 간 호환성을 직접 고려해야하는 등의 문제가 있기 때문에 전문 개발자가 작성한 라이브러리를 가져와서 같이 사용하면 편하다.
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
</head>- jQuery와 순수 JavaScript의 코드를 비교
JavaScript에서 elememt란 id를 가진 요소를 감추려면
document.getElementById("element").style.display = "none";이렇게 길고 복잡하게 써야하지만, jQuery로는
$('#element').hide();이렇게 간단하고 직관적으로 쓸 수 있다.
- jQuery를 사용하는 방법
CSS와 마찬가지로 jQuery를 쓸 때 특정 요소를 '가리켜야' 조작할 수 있다.
CSS에서는 선택자로 class를 주로 사용했는데, jQuery에서는 고유한 하나의 요소를 가리키는 id를 주로 사용한다. 그래서 Javascript는 id로 선택한 값을 통해 특정 버튼/input 박스/div 등을 가리키게 된다.
<div id="q1">테스트</div>Example 1-1) '결과 확인하기!' 박스를 누르면 특정 text가 바뀌도록 해보자.
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
.button-part {
display: flex;
height: 50px;
}
</style>
<script>
</script>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr/>
<br>
<h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>2. 리스트</h2>
<div id="q1"></div>
</div>
<div class="dict-part">
<h2>3. 딕셔너리</h2>
<div id="q2"></div>
</div>
<div>
<h2>4. 리스트 딕셔너리</h2>
<div id="q3"></div>
</div>
</body>
</html>임포트가 되어있는지 먼저 확인!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
a) 움직이고 싶은 html 태그에 id를 부여한다.
<div>
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div>테스트1</div><div>
<buttononclick="checkResult()">결과 확인하기!</button>
</div>
<div id="q1">테스트1</div>b) script 태그에 checkResult 함수를 정의해준다. 값을 넣을 변수와 지목한 id 값을 어떻게 움직일건지 정의해준다.
<script>
function checkResult() {
let a = '사과'
$('#q1').text(a)
}
</script>-> '결과 확인하기!' 버튼을 누르면 '테스트1'라는 text가 a변수의 값인 '사과'로 바뀌는 것을 확인할 수 있다.
Example 1-2) 변수 값을 리스트와 딕셔너리 요소를 이용해서 '결과 확인하기!' 박스를 누르면 특정 text가 바뀌도록 해보자.
임포트가 되어있는지 먼저 확인!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>a) 움직이고 싶은 html 태그에 id를 부여한다.
<div>
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div>테스트1</div>
<div>테스트2</div>
<div>테스트3</div>
<div>테스트4</div><div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div>테스트1</div>
<div id="q2">테스트2</div>
<div id="q3">테스트3</div>
<div id="q4">테스트4</div>b) script 태그에 checkResult 함수를 정의해준다. 값을 넣을 변수와 지목한 id 값을 어떻게 움직일건지 정의해준다.
<script>
function checkResult() {
let b = ['사과','배','감','귤',['오렌지','한라봉']]
$('#q2').text(b[4])
$('#q2').css('color','red')
let c = {'name':'영수','age':'30'}
$('#q3').text(c['name'])
$('#q3').css('font-size','40px')
let d = [
{'name':'영수','age':'30'},
{'name':'철수','age':'35'}
]
$('#q4').text(d[1]['age'])
}
</script>-> '결과 확인하기!' 버튼을 누르면
'테스트2' -> (빨간 글씨) 오렌지,한라봉
'테스트3' -> (폰트 사이즈가 40px인) 영수
'테스트4' -> 35
CSS의 display 속성을 넣어줄 수도 있다. $(#id).css('display')
Example 1-3) 특정 div나 속성들을 숨기고 보이게 하는 버튼 만들기
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div id="q1">테스트1</div>
<div id="q2">테스트2</div>
<div id="q3">테스트3</div>
<div id="q4">테스트4</div>
<button onclick="remove()">숨기기</button>
<button onclick="show_up()">보이기</button>
<button onclick="remove_css()">css숨기기</button>
<button onclick="show_up_css()">css보이기</button>a) 테스트 4 숨기기 & 보이기
<script>
function checkResult() {
let a = '사과'
$('#q1').text(a)
let b = ['사과','배','감','귤',['오렌지','한라봉']]
$('#q2').text(b[4])
$('#q2').css('color','red')
let c = {'name':'영수','age':'30'}
$('#q3').text(c['name'])
$('#q3').css('font-size','40px')
let d = [
{'name':'영수','age':'30'},
{'name':'철수','age':'35'}
]
$('#q4').text(d[1]['age'])
}
function remove() {
$('#q4').hide()
}
function show_up() {
$('#q4').show()
}
</script>
-> '결과 확인하기!' 버튼을 누르면
-> '숨기기' 버튼을 누르면
-> '보이기' 버튼을 누르면
b) CSS속성을 부여하고, 숨기는 버튼 만들기
<script>
function checkResult() {
let a = '사과'
$('#q1').text(a)
let b = ['사과','배','감','귤',['오렌지','한라봉']]
$('#q2').text(b[4])
$('#q2').css('color','red')
let c = {'name':'영수','age':'30'}
$('#q3').text(c['name'])
$('#q3').css('font-size','40px')
let d = [
{'name':'영수','age':'30'},
{'name':'철수','age':'35'}
]
$('#q4').text(d[1]['age'])
}
function remove() {
$('#q4').hide()
}
function show_up() {
$('#q4').show()
}
function remove_css() {
$('#q3').hide($('#q3').css('font-size', '40px'))
$('#q2').hide($('#q2').css('color', 'red'))
}
function show_up_css() {
$('#q3').show($('#q2').css('color', 'red'))
$('#q2').show($('#q3').css('font-size', '40px'))
}
</script>-> 실패 // jQuery에서는 고유한 하나의 요소를 가리키는 id를 주로 사용한다. 그래서 Javascript는 id로 선택한 값을 통해 특정 버튼/input 박스/div 등을 가리키게 된다. css 속성은 선택자가 될 수 없기 때문에 조작할 수 없나보다.......
- 반복문
반복문은 같은 실행을 반복해야할 때 쓴다.
예를 들어, 100번을 반복하는 상황일 때
console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
...
console.log(99)
100번을 쓰기에는 비효율적이기에 반복문을 쓴다.
이번에는 forEach함수를 썼다.
- 리스트형
let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
console.log(a)
})
사과
배
감
귤- 딕셔너리형
let ages = [
{'name':'영수','age':'30'},
{'name':'철수','age':'35'}
]
ages.forEach((a) => {
console.log(a['name'] + ':' + a['age'])
})
영수:30
철수:35
-> forEach 반복문은 변수 안에 있는 값의 개수만큼 반복한다.
- 조건문
조건문은 조건에 따라 다른 코드를 실행할 때 쓰는 문법이다.
(불 자료형이 들어가고 보통 비교연산자를 사용한다. -> 나중에 알아보겠다.)
if (조건) {
// 조건 만족 시 실행
} else {
// 조건 불만족 시 실행
}if (조건1) {
조건1 만족 시 실행
} else if (조건2) {
조건1을 불만족하고 조건2를 만족할 때 실행
} else {
조건1과 조건2 둘다 불만족할 때 실행
}
-> 조건이 더 많을 때. else if 개수는 원하는 만큼 쓸 수 있다.ex 1) 연령 확인 조건문
if (x >= 20) {
console.log('성인입니다.')
} else if (x > 13) {
console.log('청소년입니다.')
} else {
console.log('어린이입니다.')
}
let x = 23 // '성인입니다.'ex 2) 연령 확인 함수
how_old(age) {
if (age >= 20) {
console.log('성인입니다.')
} else if (age > 13) {
console.log('청소년입니다.')
} else {
console.log('어린이입니다.')
}
}
how_old(17) // '청소년입니다.'
let a = 23
how_old(a) // '성인입니다.'
let age = 12
how_old(age) // '어린이입니다.'- 반복문 + 조건문
ex 1) 연령 확인 조건 반복문(리스트형)
let ages = [12,15,20,25,17,37,24]
ages.forEach((a)=> {
if (a > 20) {
console.log('성인입니다.')
} else if (a>13) {
console.log('청소년입니다.')
} else {
console.log('어린이입니다.')
}
})
어린이입니다.
청소년입니다.
청소년입니다.
성인입니다.
청소년입니다.
성인입니다.
성인입니다.ex 2) 연령 확인 조건 반복문(딕셔너리형)
let ages = [
{'name':'미래','age':'9'},
{'name':'영수','age':'30'},
{'name':'영희','age':'15'}
]
ages.forEach((a) => {
if (a['age'] > 20) {
console.log(a['name'] + ':' + a['age'] + '세' + ':' + '성인입니다.')
} else if (a['age'] > 13) {
console.log(a['name'] + ':' + a['age'] + '세' + ':' + '청소년입니다.')
} else {
console.log(a['name'] + ':' + a['age'] + '세' + ':' + '어린이입니다.')
}
})
미래:9세:어린이입니다.
영수:30세:성인입니다.
영희:15세:청소년입니다.- JQuery 연습하기 (.append())
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
function checkResult() {
}
</script>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr />
<br>
<h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>2. 붙이기</h2>
<div id="q1">
<p>사과</p>
<p>귤</p>
<p>감</p>
</div>
</div>
<div class="list-part">
<h2>3. 붙이기</h2>
<div id="q2">
<p>영수는 24살입니다.</p>
<p>세종은 30살입니다.</p>
<p>수영은 20살입니다.</p>
</div>
</div>
</body>
</html>
ex 1) 리스트형 (checkResult를 누르면 밑에 <p>과일</p>이 붙게 만들기)
a) checkResult 함수에 리스트와 forEach함수를 작성
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
fruits.forEach((a)=>{
// 실행할 것
})
}b) 2. 붙이기 밑에 있는 <div id="q1">에 텍스트를 붙이기 위해 함수 식에 백틱(backtick)으로 감싼 문자열을 요소로 한 변수와 jQuery ${}함수 그리고 .append()함수를 넣어준다.
b-1) '감' 텍스트 추가
fruits.forEach((a) => {
let temp_html = `<p>감</p>`
$('#q1').append(temp_html)
})
-> forEach 반복문이 변수 fruits의 리스트 요소들을 하나씩 대입하면서 ```<div id="q1">```에 ```<p>감</p>```를 덧붙여준다. 변수 fruits의 length가 5니까 총 5개의 감이 덧붙여질 것이다.
b-2) 백틱을 이용하여 변수 b 자체를 문자열로 취급하여 append로 덧붙여준다.
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
fruits.forEach((b)=>{
let temp_html = `<p>${b}</p>`
$('#q1').append(temp_html)
})
}
-> forEach함수가 변수 b에 변수 fruits의 리스트 요소 하나씩을 대입하면서 대입한 변수 b가 문자열이 되어 ```<div id="q1">```에 붙는다.
c) checkResult를 눌렀을 때 <div id="q1">에 '사과','배','감','귤','수박' 순서로 출력되기 위해서 $('#q1').empty()를 forEach 함수가 반복하기 전에 넣어준다.
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
$('#q1').empty()
fruits.forEach((c)=>{
let temp_html = `<p>${c}</p>`
$('#q1').append(temp_html)
})
}
ex 2) 딕셔너리형 (checkResult를 누르면 <div id="q2">밑에 '~는 ~살입니다.'가 붙게 만들기)
a) checkResult 함수에 리스트와 forEach함수를 작성
function checkResult() {
let people = [
{ 'name': '서영', 'age': 24 },
{ 'name': '현아', 'age': 30 },
{ 'name': '영환', 'age': 12 },
{ 'name': '서연', 'age': 15 },
{ 'name': '지용', 'age': 18 },
{ 'name': '예지', 'age': 36 }
]
fruits.forEach((a)=>{
// 실행할 것
})
}b) 2. 붙이기 밑에 있는 <div id="q2">에 텍스트를 붙이기 위해 함수 식에 백틱(backtick)으로 감싼 문자열을 요소로 한 변수와 jQuery ${}함수 그리고 .append()함수를 넣어준다.
b-1) '영수는 24살 입니다' 텍스트 추가
function checkResult() {
people.forEach((d) => {
let temp_html = `<p>영수는 24살입니다.</p>`
$('#q2').append(temp_html)
})
}
-> forEach 반복문이 변수 people의 딕셔너리 요소들을 하나씩 대입하면서 ```<div id="q2">```에 ```<p>영수는 24살 입니다.</p>```를 덧붙여준다. 변수 people의 length가 6니까 총 6개의 감이 덧붙여질 것이다.
b-2) checkResult를 눌렀을 때 <div id="q2">에 원래 있던 텍스트들을 지우고 새로 추가한 텍스트들만 보이게 하기 위해서 $('#q1').empty()를 forEach 함수가 반복하기 전에 넣어준다.
function checkResult() {
$('#q2').empty()
people.forEach((e) => {
let temp_html = `<p>영수는 24살입니다.</p>`
$('#q2').append(temp_html)
})
}
c) key인 'name'과 value인 'age'를 리스트 요소로 삼는 각각의 변수를 지정하고 백틱을 이용하여 <div id="q2">에 ''name'은 'age'살입니다.'라는 텍스트가 추가되도록 한다.
function checkResult() {
$('#q2').empty()
people.forEach((f) => {
let name = f['name']
let age = f['age']
let temp_html = `<p>${name}는 ${age}입니다.</p>`
$('#q2').append(temp_html)
})
}function checkResult() {
$('#q2').empty()
people.forEach((f) => {
let temp_html = `<p>${f['name']}는 ${f['age']}살입니다.</p>`
$('#q2').append(temp_html)
})
}
- 문자와 변수를 같이 쓰는 백틱(``)
백틱은 문자와 변수를 함께 써줄 수 있도록 하는 특수기호이다.
let profile = `${}의 나이는 ${}살 입니다`let temp_html = `${people['name']}는 ${people['age']}입니다.`let temp_html = `<p>${name}는 ${age}살입니다.</p>`Fetch
Fetch는 어떤 데이터를 주는 URL(서버에서 데이터를 받아올 수 있는)이 있다면 그 URL에서 데이터를 가져오는 도구이다.
- Fetch 기본 골격
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})- 코드 해설
url에서 result를 가져와서 json형태로 만들어서 그 data를 받아와 활용할 것이다.
- `fetch("여기에 URL을 입력")` ← 이 URL로 웹 통신 요청을 보낼 거야!
← 이 괄호 안에 **URL밖에 들어있지 않다면** `기본상태인 GET!`
- `.then()` ← 통신 요청을 받은 다음 이렇게 할 거야!
- `res ⇒ res.json()`
← 통신 요청을 받은 데이터는 res 라는 이름을 붙일 거야(변경 가능)
← res는 JSON 형태로 바꿔서 조작할 수 있게 할 거야!
- `.then(data ⇒ {})` ←JSON 형태로 바뀐 데이터를 data 라는 이름으로 붙일거야Ex 1) 서울 미세먼지 데이터를 가져와 각 구의 미세먼지 수치 console에 출력해보자.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch 시작하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})
</script>
</head>
<body>
Fetch 연습을 위한 페이지
</body>
</html>a) 서울시 미세먼지 데이터 중 첫 번째 구의 데이터를 fetch를 이용하여 가져와서 콘솔에 띄워보자.
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
console.log(data['RealtimeCityAir']['row'][0])
})
b) forEach 반복문을 이용하여 모든 구의 데이터를 콘솔에 띄워보자.
b-1) RealtimeCityAir라는 데이터의 row에 있는 리스트값을 변수 rows를 지정하여 담고 forEach 반복문으로 콘솔에 확인해보자.
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
console.log(a)
})
-> 미세먼지 데이터 리스트의 길이만큼 반복해서 하나씩 개발자 도구에서 보자
b-2) forEach 반복문으로 구 이름('MSRSTE_NM')과 미세먼지 수치('INDEX_MVL)을 콘솔에 띄워보자.
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
console.log(a['MSRSTE_NM'],a['IDEX_MVL'])
})fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
console.log(a['MSRSTE_NM'],a['IDEX_MVL'])
})
})
Ex 2) 서울 미세먼지 데이터를 가져와 각 구의 미세먼지 수치 Html에 출력해보자.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>미세먼지 API로Fetch 연습하고 가기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
</style>
<script>
function q1() {
// 여기에 코드를 입력하세요
}
</script>
</head>
<body>
<h1>Fetch 연습하자!</h1>
<hr/>
<div class="question-box">
<h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
<p>모든 구의 미세먼지를 표기해주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
<li>중구 : 82</li>
<li>종로구 : 87</li>
<li>용산구 : 84</li>
<li>은평구 : 82</li>
</ul>
</div>
</body>
</html>
-> 업데이트 버튼을 누르면 모든 구의 미세먼지가 표시되도록 해보자.
a) fetch를 이용하여 서울시 미세먼지 데이터를 가져와서 콘솔에 띄워보자.
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
console.log(data)
})
}
-> 업데이트 버튼을 누르면 데이터가 콘솔에 출력된다.
b) RealtimeCityAir라는 데이터의 row에 있는 리스트값을 변수 rows를 지정하여 담고 forEach 반복문으로 콘솔에 확인해보자.
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row']
console.log(data)
})
}
-> -> 업데이트 버튼을 누르면 RealtimeCityAir라는 데이터의 row에 있는 데이터가 콘솔에 출력된다.
c) forEach 반복문으로 구 이름('MSRSTE_NM')과 미세먼지 수치('IDEX_MVL)을 콘솔에 띄워보자.
c-1) 먼저 전체 데이터(['RealtimeCityAir']['row'])를 콘솔에 띄우는 것이 아니라 forEach 반복문을 통하여 ['row'] 리스트의 각 요소가 콘솔에 잘 찍히는지 확인해보자.
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
console.log(a)
})
})
}
c-2) 이제 ['row']의 데이터 중 구의 이름('MSRSTE_NM')과 미세먼지 수치('IDEX_MVL')만 리스트 값을 가지는 각각의 변수를 지정하여 콘솔에 띄워보자.
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
let gu_name = a['MSRSTE_NM']
let gu_mise = a['IDEX_MVL']
console.log(gu_name,gu_mise)
})
})
}
d) 이제 Html에 출력해보자. (붙여주려면 let temp_html = 백틱)
d-1) forEach 반복문을 이용해서 id="names-q1"에 <li>중구 : 82</li>을 ['row'] 리스트의 데이터 수 만큼 .append로 붙여보자.
let temp_html = `<li>중구 : 82</li>`
$('#names-q1').append(temp_html)
d-2) 구 이름('gu_name')과 미세먼지 수치('gu_mise')를 .append로 붙여보자.
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
$('#names-q1').append(temp_html)
c) '업데이트'를 눌렀을 때 <ul id="names-q1">에 원래 있던 텍스트들을 지우고 새로 추가한 텍스트들만 보이게 하기 위해서 $('#names-q1').empty()를 forEach 함수가 반복하기 전에 넣어준다.
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row']
$('#names-q1').empty()
rows.forEach((a) => {
let gu_name = a['MSRSTE_NM']
let gu_mise = a['IDEX_MVL']
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
$('#names-q1').append(temp_html)
})
})
}
d) 미세먼지 수치가 40 이상인 구를 빨갛게 보이게 해보자. (조건문을 이용해서 특정 li 태그에 class를 지정하여 style 태그에서 꾸민다.)
<style>
div.question-box {
margin: 10px 0 20px 0;
}
.bad {
color: red;
}
</style>d-1) 먼저 모든 구를 빨갛게 나타내보자.
let temp_html = `<li class='bad'>${gu_name} : ${gu_mise}</li>`
d-2) 이제 조건문을 이용하여 미세먼지 수치가 40이상인 곳은 빨갛게 나타내고 그 외의 구들은 그냥 붙여넣어보자.
let temp_html = ``
if (gu_mise > 40) {
temp_html = `<li class='bad'>${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
Ex 3) 서울 따릉이 데이터를 가져와 실시간 따릉이 현황 console에 출력해보자.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch 연습하고 가기!</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;
}
</style>
<script>
function q1() {
// 여기에 코드를 입력하세요
}
</script>
</head>
<body>
<h1>Fetch 연습하자!</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">
<tr>
<td>102. 망원역 1번출구 앞</td>
<td>22</td>
<td>0</td>
</tr>
<tr>
<td>103. 망원역 2번출구 앞</td>
<td>16</td>
<td>0</td>
</tr>
<tr>
<td>104. 합정역 1번출구 앞</td>
<td>16</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
-> 업데이트 버튼을 누르면 실시간 따릉이 현황을 보여주게 해보자.
a) fetch를 이용하여 서울 따릉이 데이터를 가져와서 콘솔에 띄워보자.
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {
console.log(data)
})
})
}
b) forEach 반복문으로 거치대 위치('stationName
'), 거치대 수('rackTotCnt'), 현재 거치된 따릉이 수('parkingBikeTotCnt')의 리스트 값을 가지는 각각의 변수를 지정하여 콘솔에 띄워보자. (forEach 반복문을 위해 'getStationList' 안의 'row'에 있는 리스트형 데이터를 변수로 지정)
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {
let rows = data['getStationList']['row']
rows.forEach((a) => {
let name = a['stationName']
let rack = a['rackTotCnt']
let bike = a['parkingBikeTotCnt']
console.log(name, rack, bike)
})
})
}
c) 이제 'let temp_html = 백틱'을 이용해서 Html에 출력해보자. (처음 있던 자료들은 지우기 위해 .empty()를 forEach 반복문 전에 넣어준다.)
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {
let rows = data['getStationList']['row']
$('#names-q1').empty()
rows.forEach((a) => {
let name = a['stationName']
let rack = a['rackTotCnt']
let bike = a['parkingBikeTotCnt']
let temp_html =`<tr>
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
$('#names-q1').append(temp_html)
})
})
}
-> 변수 temp_html을 ```id='names-q1'```으로 지정되어 있는 ```<tbody>```에 ```<tr><td></td></tr>```의 형태로 .append 붙여준다.
d) 따릉이 대수가 5대 미만인 곳은 빨갛게 보여주자.
-> 조건문으로 .append()해주는 temp_html의 태그에 'bike'가 5대 미만일 경우 클레스 값을 지정하고 Style 태그에서 꾸며준다.
let temp_html = ``
if (bike < 5) {
temp_html = `<tr class="red">
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
} else {
temp_html = `<tr>
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
}
$('#names-q1').append(temp_html)<style type="text/css">
....
.red {
color: red;
}
</style>
Ex 4) 스파르타 피디아에 실시간 온도 표시하기
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타 피디아</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<script src="prac.js"></script>
<script src="mise.js"></script>
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
width: 100%;
height: 250px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mytitle > button {
width: 200px;
height: 50px;
background-color: transparent;
color: white;
border-radius: 50px;
border: 1px solid white;
margin-top: 10px;
}
.mytitle > button:hover {
border: 2px solid white;
}
.mycomment {
color: gray;
}
.mycards {
margin: 20px auto 0px auto;
width: 95%;
max-width: 1200px;
}
.mypost {
width: 95%;
max-width: 500px;
margin: 20px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mybtns {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.mybtns > button {
margin-right: 10px;
}
</style>
<script>
</script>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<div>현재 서울의 날씨 : <span id="temp">20</span>도</div>
<button>영화 기록하기</button>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">영화URL</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>-- 선택하기 --</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">코멘트</label>
</div>
<div class="mybtns">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
a) fetch를 이용하여 서울시 날씨 데이터를 가져와서 콘솔에 띄워보자.
$(document).ready(function() {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
console.log(data)
})
})
b) 온도(temp) 데이터만 가져와 콘솔에 띄워보자.
$(document).ready(function() {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
console.log(data['temp'])
})
})
c) 'temp' 데이터를 자료로 한 변수(seoul_temp)를 지정하고 <div>현재 서울의 날씨 : <span id="temp">20</span>도</div>의 id="temp"를 .empty()로 비워준 후 변수(seoul_temp)의 'temp' 데이터를 .text()를 이용하여 텍스트의 형태로 붙여넣어준다.
</style>
$(document).ready(function () { // 자동 실행됨.
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
let seoul_temp = data['temp']
$('#temp').empty()
$('#temp').text(seoul_temp)
})
})
</script>
- $(document).ready(function(){});란?
해석 : 'document'라는 객체의 준비가 끝나면 즉, 로드가 완료되면 함수를 실행한다
jQuery 이벤트 메서드 중 하나로 $(document).ready()는 문서가 준비되면(html문서의 로딩이 다 끝나면) 매개변수로 넣은 콜백 함수를 실행하라는 의미이다. 자동으로 실행된다는 뜻이다.
Ex 5) 스파르타피디아에 영화 포스팅 카드 붙이기(OpenAPI)
스파르타피디아 API(GET)
http://spartacodingclub.shop/web/api/movie
-> 스파르타피디아에 들어가는 아티클들의 정보를 불러오는 스파르타코딩클럽의 OpenAPI이다.
-
API(Application Programming Interface)
운영체제와 응용프로그램 사이의 통신에 사용되는 언어나 메시지 형식으로 라이브러리에 접근하기 위한 규칙들을 정의한 것이다. 즉, 운영체제(OS)나 시스템, 애플리케이션(앱), 라이브러리 등을 활용하여 응용 프로그램을 작성할 수 있게 하는 다양한 인터페이스를 의미한다.
식당을 예로 들면 주방을 라이브러리, 메뉴판을 API, 직원이 이를 연결해주는 역할을 한다고 볼 수 있다.
서버가 클라이언트의 요청을 받으려면 문이 있어야 하는데 API는 은행 창구와 같이 그 창구에 접근하는 방식이 API이다. -
OpenAPI
플랫폼 기능 또는 콘텐츠를 외부에서 웹 프로토콜(HTTP)로 호출하여 사용할 수 있게 개방한 API -
앱을 만드는 개발자가 매번 서비스에 필요한 모든 데이터를 개별 수집하고 인터페이스를 새로 짜는 것은 사회 낭비다. API를 활용하면 이미 갖춰진 정보와 인터페이스를 일정 수준으로 개방된 상태에서 가져와 다양한 방법으로 활용할 수 있다. 포털이 제공하는 지도 서비스를 활용하여 맛집 정보 서비스를 앱으로 구현하거나 번역 API를 따와 다국어 서비스를 제공하는 사례도 모두 API 활용에 해당한다. 만약 API가 라이브러리와 함께 제공되면 소프트웨어 개발도구(SDK: Software Development Kit)라고 한다.
네이버, 카카오, 구글, 페이스북을 포함한 플랫폼 기업은 지도, 음악, 비즈니스, 날씨, 쇼핑, 누리소통망 서비스(SNS) 등 다양한 데이터를 오픈 API 방식으로 제공하고 있다. 국가도 전국 공공시설 정보나 대중교통 운행 정보와 같은 데이터를 공공 API로 개방한다. 오픈 API는 대부분 무료로 제공되지만 종류에 따라 호출 수에 제한을 두거나 초과 사용을 원할 경우 별도 비용을 받기도 한다. 구글은 2018년 하반기부터 지도 API를 유료로 하였는데 월 200달러 상당의 무료 크레딧을 소진하면 유료로 전환된다.
출처 : [네이버 지식백과] 오픈 API [Open API]
a) 붙여넣을 포스팅카드를 어떤 버튼을 클릭하면 추가가 되는 것이 아니라 로딩이 되면 알아서 붙게 만드려면 script 태그 안 $(document).ready(function(){}) 안에서 fetch로 데이터를 가져와서 붙여야한다.
a-1) 먼저 스파르타피디아 API를 Fetch를 통하여 데이터를 가져와서 콘솔에 띄워보자.
$(document).ready(function () {
fetch("http://spartacodingclub.shop/web/api/movie").then(res => res.json()).then(data => {
console.log(data)
})
})
a-2) 스파르타 피디아 전체 데이터 중 'movies'의 데이터만 가져와 콘솔에 띄워보자.
$(document).ready(function () {
fetch("http://spartacodingclub.shop/web/api/movie").then(res => res.json()).then(data => {
console.log(data['movies'])
})
})
b) 'movies'의 데이터들을 'rows'라는 변수로 지정하고 forEach 반복문으로 돌면서 console에 하나씩 출력해보자.
$(document).ready(function () {
fetch("http://spartacodingclub.shop/web/api/movie").then(res => res.json()).then(data => {
let rows = data['movies']
rows.forEach((a) => {
console.log(a)
})
})
})
c) 'movies' 데이터의 'comment','desc','image','star','title' 데이터들을 forEach 반복문을 통해 HTML에 붙여넣기 위해 각각의 데이터를 변수로 지정하고 콘솔에 각각의 변수 안 데이터들을 띄워보자.
$(document).ready(function () {
fetch("http://spartacodingclub.shop/web/api/movie")
.then(response => response.json()).then(data => {
let rows = data['movies']
rows.forEach(a => {
let title = a['title']
let desc = a['desc']
let comment = a['comment']
let star = a['star']
let image = a['image']
console.log(title,desc,comment,star,image)
})
})
})
d-1) 변수 temp_html에 card column 형식의 html을 작성한 후 <div class="row row-cols-1 row-cols-md-4 g-4">에 붙이기 위해 id = "cards">로 id 값을 주고 거기에 .append()로 붙여주자.
$(document).ready(function () {
fetch("http://spartacodingclub.shop/web/api/movie")
.then(response => response.json()).then(data => {
let rows = data['movies']
rows.forEach(a => {
let title = a['title']
let desc = a['desc']
let comment = a['comment']
let star = a['star']
let image = a['image']
// console.log(title,desc,comment,star,image)
let temp_html = `<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>`
$('#cards').append(temp_html)
})
})
})
d-2) 변수 temp_html 안의 html이 스파르타피디아 API에서 받아온 데이터들을 출력하기 위해 각각의 데이터 변수들을 대입한다.
$(document).ready(function () {
fetch("http://spartacodingclub.shop/web/api/movie")
.then(response => response.json()).then(data => {
let rows = data['movies']
rows.forEach(a => {
let title = a['title']
let desc = a['desc']
let comment = a['comment']
let star = a['star']
let image = a['image']
// console.log(title,desc,comment,star,image)
let temp_html = `<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${desc}</p>
<p>${star}</p>
<p class="mycomment">${comment}</p>
</div>
</div>
</div>`
$('#cards').append(temp_html)
})
})
})
d-3) 스파르타피디아 API의 'star' 데이터가 숫자로 되어있는데 이것은 1. Javascript 함수 중 .repeat()라는 함수로 안에 'star'데이터가 들어간 변수 star를 넣고 2. 별 문자 뒤에 넣는다. 3. 이 별 문자 함수식을 다른 변수로 지정하고 4. temp_html 변수의 <p>${star}<p>에 ${별 문자 함수식 변수}를 넣어준다.
e) 처음에 있던 것을 forEach 반복문이 돌기 전에 .empty()로 지워준다.
$(document).ready(function () {
fetch("http://spartacodingclub.shop/web/api/movie")
.then(response => response.json()).then(data => {
let rows = data['movies']
$('#cards').empty()
rows.forEach(a => {
let title = a['title']
let desc = a['desc']
let comment = a['comment']
let star = a['star']
let image = a['image']
// console.log(title,desc,comment,star,image)
let star_image = '⭐'.repeat(star)
let temp_html = `<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${desc}</p>
<p>${star_image}</p>
<p class="mycomment">${comment}</p>
</div>
</div>
</div>`
$('#cards').append(temp_html)
})
})
})
아직 배울 것이 많지만 첫 입문 치고는 많은 것을 배웠다. 앞으로도 배운 것들을 기록해나가야겠다.
개발자로서 성장하는 데 큰 도움이 된 글이었습니다. 감사합니다.