2021-11-12(금) 5일차 - 2

4교시 시작

Single Page Application

메뉴 클릭하면 스크롤이 아래로 내려감

Multi Page Application

프로젝트 할 때는 부트스트랩으로 할 거임

1. 부트스트랩
2. material ui

컴포넌트

css로 애니메이션 효과

script src=

외부 파일로 뺀 거
외부 파일 형식 장점
캐시화될 경우 문서 로딩 더 빠르게 할 수 있음
자바스크립트 내용물을 다시 안 받아도 되는 거
동일 js 코드를 여러 html 문서에 사용시 유용
별도의 js 파일로 빼줌

js 폴더에 lotto.js 파일 만들기
console.log("-----------lotto-------------")

lotto.html 파일 맨 밑에
<script src="js/lotto.js"></script>

js 파일로 빼는 게 좋은데
초보자들한테는 권장하지 않음

lotto.js 파일 내용 바꾸면 바로 반영이 돼야 하는데
웹스톰은 그걸 해주는데
나중에 프로젝트할 때는 톰캣이라는 서버를 쓰는데 제대로 반영이 안 되는 경우가 생김
브라우저가 캐시를 해서
js파일을 다시 안 가져와서 그럼
js파일을 수정 안전하게 쓰려면 Network탭에서 lotto.js에서 마우스 오른쪽 클릭
Clear browser cache 클릭

5교시 시작

<button class="btn btn-primary">CLICK</button>

제일 중요한 메커니즘

'js 이벤트 처리' 검색

Event Handling
이벤트 처리기
이벤트 리스너

Don't call us, we will call you.
헐리우드 원칙
callback
콜백 함수 = 이벤트 리스너 = 이벤트 처리기
콜백함수 등록
자바스크립트 특징 : 함수도 파라미터로 전달할 수 있다

이게 바로 신호
이게 바로 이벤트
이벤트도 하나의 객체

이벤트 발생

무한루프를 계속 돌아야 한다는 얘기

버튼을 클릭

사용자가 버튼을 클릭했는지 안 했는지 계속 감시해야 되는 상황

브라우저가 계속 모니터링하는 거

사용자가 버튼을 클릭했는지 안 했는지 알아내는 거

개발자들이 뭘 하겠어
이 버튼이 클릭되면 어떻게 해주라고 코드를 짜줘야 됨

그 정보(함수)를 브라우저에게 줘야 됨

자바스크립트는 파라미터로 함수를 전달할 수 있음
그게 바로 이벤트 처리

이벤트는 객체임

이벤트가 발생하는 건 브라우저에서 캐치함
브라우저가 다 감시함

개발자는
내가 원하는 이벤트가 발생하면 어떤 일을 해줘
브라우저에게 맡긴다
이런 로직을 수행해줘
이벤트 핸들러를 등록한다
이벤트 리스너를 등록한다
이벤트 처리기를 등록한다
콜백함수를 추가한다

어떤 버튼이야?
클릭이야? 마우스 오버야? (이벤트의 종류)
계속 루프를 돌리지 않아도 됨

내가 뭘 클릭했을 때

도서관 청구기호 = 식별키
데이터베이스에서의 primary key

그 버튼을 클릭하면
document에서 get으로 시작하는 메소드

Elements : 여러 개 있는 거
Element : 1개만 있는 거

id는 1개만 있어야 하는데
2개 있어도 에러는 안 남. warning만 띄워줌

모든 태그들이 id와 class 속성을 쓸 수 있다.

<button class="btn btn-primary" id="btn">CLICK</button>

class id 순서는 상관없음

lotto.js 이동

const btn = document.getElementById("btn")

변수명은 상관없음

캐시 지우고 실행

처음에 초급자들이 개발할 때는 html 안에 script 안에 작성하는 게 안전

화살표 함수
콜백 함수를 쉽게 입력할 수 있는 함수 생성 방법
화살표 함수는 function 키워드 대신 화살표=>를 사용하여 함수를 생성한다.

(매개변수) => 리턴값

클릭 이벤트

btn.addEventListener("click", () => {
    
})

btn.addEventListener("click", function () {

})

function doA() {
    
}

btn.addEventListener("click", doA)

이렇게 하면 window에 등록되니까 개인적으로는 별로라고 생각

btn.addEventListener("click", (e) => {

})

이벤트 루프라는 애가 계속 돈다
함수한테 파라미터로 하나를 전달한다 이벤트를 전달한다

btn.addEventListener("click", (event) => {

})

이거는 이벤트 루프가 실행해주는거
이게 실행이 되는지 확인해봐야됨

btn.addEventListener("click", (event) => {
    console.log(event)
})

버튼을 클릭하면 이벤트

디펜스 게임
마지막쯤에는 우르르 나와서 느려짐
게임 루프
오브젝트가 많아지면 느려짐
뒤로 갈수록 느려짐

브라우저에는 이벤트 루프라는 게 있음

Node js 루프

이벤트가 발생하면 어떻게 할 것인가

뒤에 false 라고 하나 더 주는 게 좋음

btn.addEventListener("click", (event) => {
    console.log(event)
}, false)

이게 가장 표준 방식

html에서는 데이터만 표현하자
자바스크립트
css 화면 꾸미자

BP (Best Practice)

버튼을 클릭하면 로또 번호를 생성

이 함수를 실행하면 로또 번호가 나오는 함수

function makeLottoNum() {
    const numArr = [2, 13, 21, 32, 35, 40]

    return numArr
}

문서 내에 어디에 뿌려야 되는지
번호 6개를 웹페이지 어디에 표시해줄건지
메모리 상에 객체를 만들어서 현재 document를 갱신해줘야
자바스크립트를 이용해서 DOM 구조를 바꾼다
DOM 구조를 바꿔주면 브라우저는 다시 리페인트를 해야 됨
이 작업이 반복됨
이 작업을 해서 동적으로 뭔가를 만들어내는 거임
document
태그를 만들
element
creatElement 같은 애가 있을 거임
document.createElement()

https://developer.mozilla.org/ko/docs/Web/API/Document/createElement

var newDiv = document.createElement("div");

var newContent = document.createTextNode("환영합니다!");

newDiv.appendChild(newContent);

지우고 리페인팅하고 지우고 리페인팅하고
내가 뭐 하나 바꿀 때마다 문서 전체가 바뀌니까 조금 느려질 수도
리액트는 버추얼 DOM
바뀐 부분만

document.createElement()

내가 만든 태그를 어디에 넣을 건지

DOM 처리를 한다는 건 자료구조를 핸들링하는 거

더보기

페이스북 무한스크롤

lotto.html 가서 태그 어디에 둘지 정하기
div 태그에 로또 번호 출력하는 걸로
<div id="resultDiv"></div>

const target = document.getElementById("resultDiv")

메모리 상에

balls는 배열

배열이니까 루프 돌릴 수 있음

for in 반복문
for in 반복문의 반복 변수에는 요소의 인덱스가 들어온다. 이를 활용해서 배열 요소에 접근할 수 있다.

for (const 반복 변수 in 배열 또는 객체) {
  문장
}

for (const i in array) {
    console.log(array[i]) // 인덱스로 요소에 접근한다.
}

const object = { a : 1, b : 2, c : 3 };

for (const property in object) {
    console.log(object[property]);
}
--------------------------------------
1
2
3

document.createElement() : 태그를 하나 만든다

    for (const num in balls) {
        const tag = document.createElement("h3")
    }

var newDiv = document.createElement("div");

var newContent = document.createTextNode("환영합니다!");

newDiv.appendChild(newContent);

document.createElement("h3")
메모리상에 h3태그를 만들었

lotto.html에 붙임

appendChild()
하위폴더를 만들어서 붙인다고 생각하면 됨

    for (const num in balls) {
        const tag = document.createElement("h3")
        target.appendChild(tag)
    }

다이나믹 HTML

깜박거림
얘 구조가 바뀐 거임
h3태그들이 쫙 만들어짐

text node
자료구조에서 밑에 딸려 있는 애들을 노드라고 한다

h3 태그 안에 로또 숫자 넣기
글자가 들어있는 h3

for of 반복문
for of 반복문의 반복 변수에는 요소의 값이 들어간다.

for (const 반복 변수 of 배열 또는 객체) {
  문장
}

for (const fruit of fruits) {
    console.log(fruit)
}

    for (const num of balls) {
        const tag = document.createElement("h3")
        const textNode = document.createTextNode(num)
        tag.appendChild(textNode)
        target.appendChild(tag)
    }

클릭 누르면 밑으로 계속 생성됨

월요일에는 금액을 입력
3000원 입력하면
로또번호 나오는

js element remove all child 검색

innerHTML 사용

// clear all <h3> tags
target.innerHTML = ''

계속 클릭해도 밑으로 안 붙음