브라우저
뷰어
HTML 형태의 문자열
DOM(Document Object Model)
메모리상에 로딩되는 거 = DOM 처리
DOM 트리라고 부른다.
CSS : 배치 담당?
Render Tree
1 대 1 (HTML 태그 : DOM tree)
태그 하나를 객체라고 생각하면 됨
메모리를 차지하면 객체다
렌더 트리는 1대1 관계는 아님
DOM이 변경이 되면 어떤 일이 생기나
렌더 트리도 새로 그려야 됨
화면에 다시 그림을 그리는 거 (화면 갱신) : Reflow 리플로우, Repaint 리페인트
자바스크립트의 역할
HTML 데이터
CSS 스타일
JS 동작
데이터를 흔히들 모델이라고 부른다.
데이터 = Model
스타일 = View
동작 = Controller
MVC 구조
브라우저도 MVC 구조다
HTML을 화면 보여주는 애가 아니라 '브라우저가 받는 데이터'라고 생각하기
HTML : 브라우저가 받는 데이터
브라우저에서 자바스크립트가 어떻게 동작하는지
브라우저 내에서의 자바스크립트
3가지 종류 태그
1. 일반적인 태그 : <h1>, <div>
2. <style> 태그
3. <script> 태그
script 태그 사용법
1. <script src="OOO.js">
2. <script> </script>
자바스크립트는 두 번 실행한다.
1. 문 처리
2. 실행
두 번 실행한다는 거 강조하는 이유가 있음
나중에 jQuery 할 때
<script> 태그의 위치가 중요하다.
문서의 아래쪽에 있는 게 좋다.
DOM 처리할 때 유리하기 때문
문서의 위쪽에 있을 때도 있다. DOM 처리가 끝나면 수행하세요
DOM Content Loaded
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
});이벤트 핸들러 = 이벤트 리스너 = 이벤트 처리기
등록한다고 표현
이벤트 루프에 등록
브라우저 내에서는 이벤트 루프가 돈다
브라우저는 싱글 스레드
요즘 같은 경우에는 이 말이 좀 안 맞음
요즘에는 백그라운드 작업이 허용
이렇게 등록하는 애들을 콜백 함수라고 부른다.
헐리우드 원칙
- 누가 이벤트를 발생할 거냐 (이벤트 주체)
document의 get 메소드를 이용해서 특정한 애를 찾는다 - 어떤 이벤트를 발생할 거냐
- 그러면 어떻게 할 것인가
콜백함수를 등록하는 과정
→ 이 방법이 표준이기는 한데
w3school
https://www.w3schools.com/
html button event 검색
https://www.w3schools.com/jsref/event_onclick.asp
https://www.w3schools.com/tags/tag_button.asp
리액트
html이랑 흡사하지만 같은 건 아님
이벤트 처리 다양한 방식
DOM Level 0
DOM Level 2
Level 1은 없음
button 버튼에 바로 입력 가능 → 옛날 방식
왜 따로따로 분리했을까
html5가 처음 나왔을 때 자동차 회사들이 관심
navigation
다양한 디바이스에
인터넷 공유기
공유기 안에서 서버가 떠있는 거
어떤 디바이스가 웹
어떤 디바이스는 자바스크립트를 처리할 수 없을 수도 있고
어떤 디바이스는 CSS를 처리할 수 없을 수도 있고
HTML이랑 CSS랑 자바스크립트랑 다 분리함
우리가 쓰는 방법의 장점 : 이벤트를 여러 개 걸 수 있음
removeEventListener() 이벤트 제거
addEventListner() 함수는 이벤트 루프가 실행한다
이벤트 루프가 콜백 함수를 호출한다
lotto.html
btn.addEventListener("click", function(event) {
console.log("--------1111")
console.log("--------1111")
console.log("--------1111")
console.log("--------1111")
}, false)
이 버튼을 클릭했을 때 여러 개의 작업이 실행된다 (DOM Level 2)
파라미터의 개수가 달라도 실행이 된다
한 개의 파라미터가 이벤트 정보
이벤트라는 건 정보
clientX
clientY
무한 스크롤
휠을 밑을 내리면
화면 마지막이랑
파라미터로 이벤트 하나를 줄 수 있다
이벤트 콜백 함수는 우리가 호출하는 게 아니라 이벤트 루프가 호출한다
2교시 시작
for / while / do-while
for루프는 카운팅 루프
정해진 수만큼 루프
for (초기문; 검사식; 변환식) { }
면접에서 자주 나오는 for루프 문제
‐ 구구단
‐ for루프를 while루프로 바꾸는 거
점프
처음에는 이동할 필요 없음
원래 위치 + (곱하기한 위치)
arr[i]
i는 식
점프는 점. 꺾쇠[]
arr[0]
Math.random() : 0 부터 1 미만 사이의 난수
1부터 45 사이의 난수
const tempNum = parseInt((Math.random() * 45)) + 1
function makeLottoNum() {
const arr = [] // 당첨 번호 담는 배열
for (let i = 0; i < 6; i++) {
const tempNum = parseInt((Math.random() * 45)) + 1
arr.push(tempNum)
}
return arr
}문제점 : 중복된 숫자가 나올 수 있음
tempNum이 배열 안에 있으면 다시 뽑아야 됨
중복된 숫자가 나오면 i에서 1을 뺀다 (i--)
indexOf() 리턴값이 0 이상이면 배열 안에 있는 거니까 다시 뽑아야 됨
continue
if (arr.indexOf(tempNum) >= 0) {
}function makeLottoNum() {
const arr = []
for (let i = 0; i < 6; i++) {
const tempNum = parseInt((Math.random() * 45)) + 1
// arr 안에 tempNum이 있다면
if (arr.indexOf(tempNum) >= 0) {
console.log("중복된 숫자입니다.")
i--
continue
}
arr.push(tempNum)
}
return arr
}내가 직접 호출하지 않는 거
콜백함수
숫자 정렬하기
음수, 양수, 0만 반환해주면 됨
function makeLottoNum() {
const arr = []
for (let i = 0; i < 6; i++) {
const tempNum = parseInt((Math.random() * 45)) + 1
// arr 안에 tempNum이 있다면
if (arr.indexOf(tempNum) >= 0) {
console.log("중복된 숫자입니다.")
i--
continue
}
arr.push(tempNum)
}
arr.sort(function (a, b) {
return a - b
})
return arr
}화살표 함수 이용해도 됨 ↓
arr.sort((a, b) => a - b)브레이스가 없으면 저게 바로 리턴값
브레이스가 있으면 return문 반드시 써줘야 됨
이 코드는 별로 생산성이 좋은 코드가 아니다
worst case
DOM 처리 공식 문서는 이렇게 되어 있기는 한데
DOM tree가 변경되면
리페인팅 Repaint
서울이랑 부산이랑 계속 왔다갔다
이렇게 작업하면 성능이 너무 떨어짐
DOM 작업을 쉽게 하는 방법을 써줘야 됨
innerHTML
innerHTML은 요소의 시작 태그와 종료 태그 사이에 놓여진 모든 HTML 코드와 텍스트를 의미한다.
한꺼번에 DOM 작업을 한 번만 해주는 게 좋음
그냥 html 코드를 만들어서 한 번에 추가하는 게 좋음
document.getElementById("resultDiv").innerHTML
> document.getElementById("resultDiv").innerHTML
'<h3>4</h3><h3>7</h3><h3>17</h3><h3>19</h3><h3>29</h3><h3>32</h3>'innerHTML을 사용해서
내용물을 가지고 올 수도 있고 (read)
내용물을 변경할 수도 있고 (update)
6번이나 DOM 처리 하는 것보다
h3 태그 문자열 처리한 다음에 한 번에
그럼 한 번만 바뀜
이런 식으로 처리를 해줘야 됨
> document.getElementById("resultDiv").innerHTML='<h3>1</h3><h3>2</h3><h3>3</h3><h3>4</h3><h3>5</h3><h3>6</h3>'
'<h3>1</h3><h3>2</h3><h3>3</h3><h3>4</h3><h3>5</h3><h3>6</h3>' let str = ''
for (const num of balls) {
str += `<h3>${num}</h3>`
target.innerHTML = str
// const tag = document.createElement("h3")
// const textNode = document.createTextNode(num)
// tag.appendChild(textNode)
// target.appendChild(tag)
}CSS 적용해서 가로로 출력하기
https://studiomeal.com/archives/197
아이디 선택자(id selector) #id
#id<style>
#resultDiv {
display: flex;
}
</style>
자손, 자식, 형제 결합자
다이렉트 밑에 있느냐
손주뻘이냐
#resultDiv > h3 {
background-color: #badbcc;
border-radius: 40px;
color: white;
margin: 10px;
padding: 20px;
box-shadow: 5px 5px 2px 1px rgba(0, 0, 255, .2);
}
margin
padding
box-shadow
https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow
개발자 도구에서 수정하면서 바로 확인해 볼 수 있음
<style>
#resultDiv {
display: flex;
}
#resultDiv > h3 {
background-color: #badbcc;
border-radius: 40px;
color: white;
margin: 10px;
padding: 20px;
box-shadow: 5px 5px 2px 1px rgba(0, 0, 255, .2);
}
</style>lotto2.html
버튼을 클릭하면 금액을 얻어온다
금액 / 1000 => 횟수를 구한다
횟수 만큼 makeLottoNum()
지금은 200대, 300대 코드
bootstrap input 검색
Input group
https://getbootstrap.com/docs/5.1/forms/input-group/
Button addons
class="form-control" 이게 스타일
이거 지우면 원래의 인풋창으로 바뀜
input type="text" 문자열 입력받는 거
input type="number" 숫자 입력받는 거
인풋 태그에 들어가는 값을 value 라고 한다
<input type="number" class="form-control" placeholder="금액을 입력해주세요." value="3000">버튼을 클릭하면 인풋 태그 안에 입력한 금액을
입력 양식 찾기
DOM 핸들링
어떤 애를 찾아야 됨
과거에서는 getElementById() 사용
요즘은 css selector 사용
https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector
태그를 만드는 데 뭔가를 부여해야 돼
1. id 속성을 부여하는 방법 (비추)
고유해야 되는데 동일한 id가 여러 개 있어도 문제가 안 생김
위험한 방식
2. name 속성을 부여하는 방법 (비추)
여러 개를 사용할 수 있음
값을 1개 밖에 못 줌
3. class 속성을 이용하는 방법 (추천)
동일한 클래스 여러 개 쓸 수 있고 값도 여러 개 쓸 수 있음
<button class="btn btn-outline-secondary" type="button">Button</button>클래스는 점.으로 시작
클래스가 btn인 버튼을 클릭
querySelector는 null 아니면 하나 가져옴
<script>
const btn = document.querySelector(".btn")
btn.addEventListener("click", () => {
console.log("button clicked.................")
}, false)
</script>
makeLottoNum()만 남겨놓고 주석처리하기
btn이 여러 개였음
mybtn 클래스 추가해주기
<button class="btn btn-outline-secondary mybtn" type="button">Button</button><script>
const btn = document.querySelector(".mybtn")
btn.addEventListener("click", () => {
console.log("button clicked.................")
}, false)
</script>클릭하면 금액을 얻어온다
<input type="number" id="moneyInput" class="form-control" placeholder="금액을 입력해주세요." value="3000">document.querySelector("#moneyInput").valueconst money = document.querySelector("#moneyInput").value
console.log(money)비밀번호 버튼
form 체크
입력한 금액이 1000원 미만이면 경고창이 뜨고 종료된다
<script>
const btn = document.querySelector(".mybtn")
btn.addEventListener("click", () => {
console.log("button clicked.................")
const money = document.querySelector("#moneyInput").value
if (money < 1000) {
alert("금액이 부족합니다.")
return
}
console.log(money)
}, false)
</script>form 태그
이거 하나가 전체의 양식지
그 때는 뭐가 중요하냐면
예전에는 서버 사이드 렌더링
<form>
<input name="email"
</form>name이 중요함
웹에서는 다 문자열
value도 문자열이므로 parseInt()로 숫자로 바꿔준다
금액 / 1000 => 횟수를 구한다
const count = parseInt(money) / 1000횟수 만큼 makeLottoNum() 실행
for (let i = 0; i < count; i++) {
const balls = makeLottoNum()
console.log(balls)
} // end for
번호들을 화면에 출력한다.
데이터를 만들어내는게 어려운 게 아니라 이거 가지고 화면 구성하는 게 어려운 거
table 태그
ul 태그, li 태그
List group
https://getbootstrap.com/docs/5.1/components/list-group/
Pagination
https://getbootstrap.com/docs/5.1/components/pagination/
과거에는 table 태그를 많이 썼었음
요즘은 table 안 쓰고 div로
table은 가로길이 고정이라 모바일로 볼 때
table보다는 ul, li 사용
웹 어플리케이션
루프 한 번 돌 때 ul 태그 만들어야 됨
ul 태그 하나가 로또 한 번
str =+ "<ul></ul>" 숫자처럼 간주되었다.
let str = ''
for (let i = 0; i < count; i++) {
const balls = makeLottoNum()
// console.log(balls)
str += "<ul>"
// balls 루프 돌리기
for (let j = 0; j < balls.length; j++) {
str += `<li>${balls[j]}</li>`
}
str += "</ul>"
} // end for
복습하기
옆으로 처리하는 거 만들어보기
day6/index.html
https://startbootstrap.com/theme/freelancer
자바스크립트로 CRUD
section 태그
html5 tag 검색
시맨틱 태그(Semantic tag)
의미를 가지는 태그
개발자를 위해서 나온 게 아님
검색엔진 때문에 나옴
검색엔진 입장에서 가장 중요한 부분은 section
과거에는 다 div였음
크롤러 = 스크래퍼
검색엔진 입장에서 중요한 건 section, article 부분
나머지 부분은 쓸모 없음
검색엔진 입장에서는 전체를 다 크롤링 해야 되는 거
html이 웹페이지가 아니라 점점 순수한 데이터로서의 의미를 가지기 시작
html은 데이터다
검색엔진에 맞게 구성
href : css selector 사용. 원래는 사전 용도였음
a 태그 : 데이터와 데이터를 anchoring 하는 태그
멀티 페이지 애플리케이션
싱글 페이지 어플리케이션
예전에는 페이지 이동해도 url 주소가 안 바뀜
최근엔 쿠팡 같은 방식
products/제품번호
다나와는 리스트에서 클릭하면 아예 새 창을 띄움
리스트 페이지가 밑에 있고 상품 페이지가 위에 있음
상품 페이지만 닫으면 원래 보던 리스트 페이지를 바로 볼 수 있음
데이터를 다시 가져오지 않음
탭만 닫는 거임
아까 보던 리스트를 빠르게 볼 수 있는 거
다나와 같은 게 UI UX를 고민 많이 한 케이스
옛날에는 페이지가 다 별도로 있었음
목록 페이지
등록 페이지
조회 페이지
이게 멀티 페이지 애플리케이션 구조
얘를 클릭하면 어디로 이동하고 무슨 처리가 돼야 하고
이런 걸 그림으로 그려서 표현한 게 Wireframe 와이어프레임
요즘에는 핸드폰을 기준으로
Mobile First
Mobile Most
우선순위가 모바일
모바일 먼저 와이어 프레임
wire 전선
와이어프레임 Wireframe
mockup tool 검색
단계가 중요
처음에 뭘 해야 되고
정확하게 설계할 수 있는 사람
발사믹 유명
디자인을 다 한 상태에서 써야 되는 건데
우리는 반대로 디자인에 맞춰서 이런 와이어 프레임을 잡아주고 거기에 맞춰서 구현해야 됨
SPA(Single Page Application)
하나의 div가 하나의 페이지 같은 역할을 함
자바스크립트 가지고 CRUD 해보기
1. 연락처
2. Todo
3. 영화
영화에 대한 정보가 필요
1. 영화 목록 페이지
2. 영화 등록하는 페이지
3. 영화를 조회하는 페이지
href="#movies">Movies
href="#register">Register
id="movies"로 변경
id="register"로 변경
그 다음 작업 해야 됨
데이터를 처리하고 가공하는 거 먼저 해준다
★두 번째 단계★
데이터들의 구조 생각하기
1. 데이터들의 구조를 만들기
2. 기능 설계
3. 구현
★세 번째 단계★
화면에 적용하기 → 이벤트 처리
자바스크립트 코드를 전체에서 써먹을 수 있게 됨
이런 구조가 SPA
요즘 SPA가 유행하는 이유가 뭘까?
한 번 로딩해놓으면 다음에 로딩이 엄청 빠름
웹 페이지라는 느낌보다 앱 느낌
장점이라고 볼 수 있지만 단점으로도 볼 수 있음
처음에 로딩할 때 굉장히 많은 데이터를 가져와서 로딩을 해야 되기 때문에 더 느려진다는 단점도 있긴 함
★두 번째 단계★
데이터들의 구조 생각하기
영화 사진도 넣어보기
키오스크에 응용
영화 데이터에 뭐뭐 넣을지 정하기
영화 번호
제목
장르
포스터
배열에 객체 리터럴 넣기
다차원 구조랑 똑같은 구조다
새로운 영화 추가하면 여기에 push
영화 삭제는 영화 찾아서 지우는 거
이런 데이터들은 대부분 식별자를 가지는 경우가 많음
영화 이름 저장할 때 01, 02, 03 이런 식으로 저장하기
assets - img 에 이미지 옮겨놓기
scripts.js 파일이 스크롤 속도 조절해주고 있음
영화마다 번호를 넣을 거
영화 번호를 찾아서 빼는 것도 연습해볼 예정
CRUD 연습
이번 주에
for루프
while루프
반응형 페이지임
일단은 클로저 없이 기능들을 따로따로 뺄 거
즉시 실행 함수 (즉시 호출 함수)
자바스크립트 코드를 보면 익명 함수를 생성하고 곧바로 즉시 호출하는 패턴을 많이 볼 수 있다.
(function () { })()처음에 로딩될 때 바로 실행됨
영화 한두개 정도는 미리 넣어놓고 시작하고 싶음
// 즉시 실행 함수
(function() {
// statements
})()(function() {
const movies = []
console.log("-----------------")
})()엄격하게 따져서 실패
그냥 index.html에 script 태그 넣어서 하는 걸로.
function addMovie(movie) {
}영화 데이터 넣기
선택을 해야 됨
영화 제목, 장르, 포스터, 번호
이거를 파라미터 4개로 받을 건지
객체 리터럴로 하나로 받을 건지
{title: '이터널스', category: 'action', poster: '01.jpg'}
한 번에 받는 게 편할 거 같음
영화번호 따기
문제는 영화번호임
배열의 길이를 이용해서 영화의 번호를 딴다고 치면
나중에 영화를 지울 때 영화의 번호를 가지고 지우면
예를 들어 5개가 있었는데 하나 삭제하면 인덱스 번호가 같은 애가 생길 수 있음
순차적으로 증가시키는 번호로 하겠음
중간에 영화가 삭제 돼도
무조건 더하는 방법
계속 유지해야 되는 값은 바깥쪽에 선언
인덱스 번호는 변하는 값
번호는 1번부터 시작
let idx = 1자바스크립트 장점 : 타입이 느슨하다
영화에 바로 붙이면 됨
movie에 바로 붙이면 됨
property를 마음대로 붙였다 떼었다 할 수 있음
※ property : 키와 값으로 구성되어 있다
movie.idx = idx그 다음 영화는 2번으로 붙어야 됨
movie.idx = idx++idx++ : 로딩을 먼저하고 증가를 나중에 한다.
듄은 2번으로 붙는 걸 볼 수 있다.
지금까지의 메모리 구조를 보자
배열 안에 객체 리터럴
2번 영화까지 다 만들어짐
영화들이 준비가 됨
이제 화면에 영화 2개를 보여줘야 됨
function으로 만들어 놓으면 나중에 편함
나중에 영화 추가하고 이 function을 호출하면 목록이 갱신되도록
function 생성
function showList() {
}showList()
태그를 생성해서 영화들을 보여주는 역할
태그를 만들어서 영화를 넣을 거
이게 영화 하나 ↓
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/cabin.png" alt="..." />
</div>
</div>↑ 이 내용을 영화가 추가될 때마다 갖다 붙이는 거
Portfolio Grid Items를 찾아서 div를 append 하는 거
얘가 누군지 알아야 갖다 붙이기 좋음
가장 쉬운 방법은 id 주는 거
id="moviesDiv" 부여
<div class="row justify-content-center" id="moviesDiv">
moviesDiv에 갖다 붙이면 되는 거
이만큼 copy 해놓기
showList()는 moviesDiv에 붙일 거
document.querySelector("#moviesDiv")const targetDiv = document.querySelector("#moviesDiv")영화의 길이(개수)만큼 루프를 돌려야 됨
영화 개수만큼 div 태그를 생성
생성된 문자열을 moviesDiv의 innerHTML에 넣어주면 됨
for (let i = 0; i < arr.length; i++) {
str += `<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal${i + 1}">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/${arr[i].poster}" alt="..." />
</div>
</div>`;
}생성된 문자열을 moviesDiv의 innerHTML에 넣어주면 됨
targetDiv.innerHTML = str영화 추가하고 showList() 호출해서 화면에 영화를 보여준다
문자열 제대로 만들어졌는지 확인해보기
console.log(str)디버깅 시작
배열에 추가를 안 해줬었음
addMovie()에 arr.push(movie) 추가
function addMovie(movie){
movie.idx = idx++
console.log(movie)
arr.push(movie)
}영화 이미지로 안 나오고 기존 이미지로 나옴
영화 이미지로 바꿔줘야 됨
{arr[i].poster}
<img class="img-fluid" src="assets/img/${arr[i].poster}" alt="..." /><div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal${i+1}">조만간 음식점 키오스크 만들어야 됨
그거 하려고 하는 거
연구를 해야 되는 게 있음
Portfolio Modals
이제 다음은
실제로 영화를 추가할 수 있는 화면을 만들고
제목, 장르, 포스터 파일 이름 3가지를 넣어주면 addMovie()를 호출
영화 배열이 변경이 되면 showList()를 다시 호출해야 되지 않는가
addMovie()
영화 리스트가 변경되면 showList()를 다시 실행해야 됨
HTML이
웹 어플리케이션이 되면서 바뀌는 내용
html이 데이터고
css 스타일
자바스크립트가 동작을 해주는 형태다
지금은 자바스크립트가 메인
자바스크립트가 영화 데이터를 다 가지고 있음
자바스크립트 영화의 배열이 바뀌면 화면도 바뀌어야 됨
옛날이랑 다름. 옛날에는 HTML의 보조적인 역할을 해왔던 건데
이제는 자바스크립트가 데이터를 더 가지고 있고
오히려 HTML이 뷰어 역할로 바뀐 거
HTML이 자바스크립로 가지고 있는 데이터를 화면에 보여주는 역할
역할이 바뀐 거
주객이 전도됨
옛날에는 HTML이 주인공이었는데 자바스크립트가 주인공이 돼서
나 데이터 바뀌었잖아 화면 다시 그려
HTML 코딩해놓고 얘로 맞추는 게 아니라
자바스크립트가 메인이 되고 자바스크립트에 맞춰서 HTML이 맞춰지는 거
MVVM
나중에 리액트나 뷰js 할 때는 전부 이런 구조. 자바스크립트가 주인공
addMovie()를 할 때 데이터가 변했잖아
데이터가 바뀌었으니까 자동으로 화면도 바꿔줘야 됨
바뀐 상태에서 showList()를 호출해서 화면을 갱신해주는 게 맞음
addMovie() 하면 바로 showList() 호출하게끔
function addMovie(movie){
movie.idx = idx++
console.log(movie)
arr.push(movie)
showList()
}
이제 자바스크립트가 주인공
자바스크립트를 메인에 두고 생각하는 연습
타이머 함수
자바스크립트에는 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 타이머 함수들이 있다. 이 함수를 사용하면 시간과 관련된 처리를 할 수 있다.
setTimeout(함수, 시간) : 특정 시간 후에 함수를 한 번 호출한다.3초 뒤에 새로운 영화 추가
setTimeout(() => {
}, 3000)3초 뒤에 콜백함수가 실행됨
setTimeout(() => {
addMovie({title: '강릉', category: 'action', poster: '03.jpg'})
}, 3000)영화 제목, 카테고리, 포스터 파일 이름을 입력하고 버튼 클릭
영화 데이터를 하나 만들어서 addMovie()를 실행
addMovie()를 실행되면 화면이 갱신돼서 추가한 영화가 나타난다.
버튼을 클릭하면 영화 데이터를 하나 만들어서 addMovie()만 해주면 화면도 갱신되는 거
모달창... 찝찝
Portfolio Modal 1이 뜰 때 이미지만 바꿔주면 되지 않을까
뭔가 이벤트가 걸려있어야 되는데
뭔가 클릭하면 이벤트가 걸려있어야 되는데
걸려있을 거 같은데
다른 건 없고
data-bs-target="#portfolioModal1" 이거 같음
커스텀 데이터 속성이라고 하는 건데 이거를 하려면
그냥 나중에 하는 걸로
모달창 쓰는 방법 하려면 부트스트랩 모달 쓰는 방법 알아야 됨
https://getbootstrap.com/docs/4.0/components/modal/
모달창을 핸들링을 하려면 제이쿼리를 알고 있어야 함..
data-bs-target="#portfolioModal${i+1}
i가 0부터 시작하니까 i+1
첫 번째거 클릭하면 모달창 cabin 나오고 두 번째거 클릭하면 모달창 cake 나옴
다운로드 모양 아이콘 지우기
인풋 태그들 추가
서버 사이드 프로그래밍
자바스크립트 어플리케이션
자바스크립트가 메인
id를 부여해도 되고 클래스를 추가해도 됨
클래스에 registerBtn 추가
<a class="btn btn-xl btn-outline-light registerBtn">
document.querySelector(".registerBtn")받은 데이터로 객체 리터럴 만들어서 추가
자바스크립트는 객체 리터털 만들 때 키 없이 변수만 적어줘도 만들어짐
const movieObj = {title, category, poster}객체 리터럴 만들 때 줄여서 만드는 법
// input 태그의 내용들을 가져온다
const title = document.querySelector("#title").value
const category = document.querySelector("#category").value
const poster = document.querySelector("#poster").value
const movieObj = {title, category, poster}
console.log(movieObj)
addMovie(movieObj)
}, false) document.querySelector(".registerBtn").addEventListener("click", () => {
// input 태그의 내용들을 가져온다
const title = document.querySelector("#title").value
const category = document.querySelector("#category").value
const poster = document.querySelector("#poster").value
const movieObj = {title, category, poster}
console.log(movieObj)
addMovie(movieObj)
}, false)다음 영화 추가하려면 기존 내용 지워줘야 됨
정보를 저장해놨다가 다시 끄집어 내서
로컬 스토리지라는 개념이 있음. DB처럼
CSS
영화 프로그램 한 번 만들어보기
CSS 어려운 분들은 191 페이지 참고
