JavaScript

2강 — class, 비동기, DOM

2024 DTC

슬라이드 보는 법

→ / Space다음으로
←이전으로
↓ / ↑같은 주제 안에서 단계 이동
O전체 슬라이드 한눈에 보기
F전체화면

아래쪽 화살표가 보이면 그 주제는 단계별로 이어집니다

오늘 끝나면 할 수 있는 것

  • 비슷한 객체를 찍어내는 틀을 만든다 — class
  • 시간을 두고 실행되는 코드를 다룬다
  • 비동기 결과를 기다렸다가 처리한다
  • JavaScript로 화면을 바꾼다 — DOM
  • 사용자의 클릭에 반응한다 — 이벤트

1강 복습

const / let값에 이름 붙이기
{ }객체 — 이름으로 꺼낸다
function / =>묶어서 재사용하기

오늘은 여기서 이어집니다

오늘 배울 것

  • 12. class
  • 13. Timeout & Interval
  • 14. Promise
  • 15. async & await
  • 16. DOM 조작
  • 17. 이벤트

12. class

비슷한 객체를 여러 개 만들려면

12. class

          
            const rabbit = {
              height: "100cm",
              weight: "5kg"
            };

12. class 문제

            
              const r1 = { height: "100cm", weight: "5kg" };
              const r2 = { height: "80cm", weight: "4kg" };
              const r3 = { height: "95cm", weight: "6kg" };
              // ...
같은 모양을 계속 반복해서 쓰게 된다

토끼가 백 마리면 어떻게 할까요?

12. class 틀 만들기

          
            class Rabbit {
              constructor({ height, weight }) {
                this.height = height;
                this.weight = weight;
              }
            }

            const rabbit = new Rabbit({
              height: "100cm",
              weight: "5kg"
            });

12. class 꺼내기

            
              const rabbit = new Rabbit({
                height: "100cm",
                weight: "5kg"
              });

              rabbit.height;
rabbit.height"100cm"

12. class 메서드

            
              class Rabbit {
                constructor({ height, weight }) {
                  this.height = height;
                  this.weight = weight;
                }

                jump() {
                  console.log("점프함");
                }
              }

              const rabbit = new Rabbit({ height: "100cm" });
              rabbit.jump();
점프함

12. 정리

  • class — 객체를 찍어내는 틀
  • constructor — new로 만들 때 한 번 실행
  • this — 지금 만들어지는 그 객체
  • 안에 정의한 함수를 메서드라고 한다

13. Timeout & Interval

지금이 아니라 나중에 실행하려면

13. Timeout & Interval

          
            setTimeout(() => {
              // 실행할 코드
            }, ms);

            setInterval(() => {
              // 실행할 코드
            }, ms);

13. Timeout & Interval setTimeout

          
            setTimeout(() => {
              console.log(1);
            }, 1000);

            console.log(2);

여기서 1과 2 중 뭐가 먼저 나올까요?

13. Timeout & Interval setTimeout

            
              setTimeout(() => {
                console.log(1);
              }, 1000);

              console.log(2);
2
1 ← 1초 뒤

13. Timeout & Interval setInterval

            
              setInterval(() => {
                console.log(1);
              }, 1000);

              console.log(2);
2
1
1
1
1
…

13. Timeout & Interval 멈추기

            
              const timer = setInterval(() => {
                console.log(1);
              }, 1000);

              setTimeout(() => {
                clearInterval(timer);
              }, 5500);
1
1
1
1
1

13. 정리

setTimeout

한 번만 실행

clearTimeout으로 취소
setInterval

간격을 두고 계속

clearInterval로 정지

14. Promise

언젠가 끝날 작업을 다루려면

14. Promise

서버에서 자료를 받아오는 데
1초가 걸린다면?

그동안 화면이 멈춰 있으면 안 된다

14. Promise 상태

  • pending — 대기. 아직 안 끝남
  • fulfilled — 이행. 성공으로 끝남
  • rejected — 거부. 실패로 끝남

Promise가 가지는 세 가지 상태

14. Promise 만들기

          
            const promise = new Promise((resolve, reject) => {
              let success = true;
              if (success) {
                resolve("이행됨");
              } else {
                reject("거부됨");
              }
            });

14. Promise 받기

            
              promise
                .then((message) => {
                  console.log(message);
                })
                .catch((message) => {
                  console.error(message);
                });
이행됨

14. Promise 실패

            
              // success = false 로 바꾸면

              promise
                .then((message) => {
                  console.log(message);
                })
                .catch((message) => {
                  console.error(message);
                });
거부됨

14. 정리

  • 비동기 작업의 성공/실패를 담는 그릇
  • then — 성공했을 때
  • catch — 실패했을 때

15. async & await

Promise를 읽기 쉽게 쓰려면

15. async & await 문제

            
              fetch(url)
                .then((response) => response.json())
                .then((data) => {
                  console.log(data);
                })
                .catch((error) => {
                  console.error(error);
                });
then이 길어질수록 읽기 어려워진다

15. async & await 같은 코드

          
            async function fetchData() {
              try {
                const response = await fetch(url);
                const data = await response.json();
                console.log(data);
              } catch (error) {
                console.error("Error:", error);
              }
            }

            fetchData();

15. async & await 규칙

  • async 함수는 항상 Promise를 반환한다
  • await는 Promise가 끝날 때까지 기다렸다 결과를 꺼낸다
  • await는 async 함수 안에서만 쓸 수 있다

15. async & await 반환값

            
              async function hello() {
                return "안녕";
              }

              hello();
              hello().then((v) => console.log(v));
hello()Promise { "안녕" }
then 안의 v"안녕"

15. 정리

then / catch

이어 붙이는 방식

길어지면 읽기 어렵다
async / await

위에서 아래로

try/catch로 오류 처리

16. DOM 조작

JavaScript로 화면을 바꾸려면

16. DOM 조작

DOM
= Document Object Model

16. DOM 조작

HTML 문서를
JavaScript가 다룰 수 있는 객체로 만든 것

그래서 document. 으로 시작한다

16. DOM 조작 찾기

          
            document.getElementById()
            document.getElementsByTagName()
            document.getElementsByClassName()
            document.querySelector()
            document.querySelectorAll()

16. DOM 조작 태그로

            
              // 대상 HTML
              // <p>첫 번째</p>
              // <p>두 번째</p>

              let obj = document.getElementsByTagName("p");

              obj[0];
              obj[1];
obj[0]<p>첫 번째</p>
obj[1]<p>두 번째</p>

16. DOM 조작 querySelector

            
              // CSS 선택자를 그대로 쓴다

              document.querySelector("#title");
              document.querySelector(".msg");
              document.querySelectorAll(".msg");
#titleh1 하나
.msg첫 번째 p 하나
querySelectorAllp 전부

16. DOM 조작 글자 바꾸기

            
              const title = document.querySelector("#title");

              title.textContent = "반갑습니다";

반갑습니다

첫 번째 문단

두 번째 문단

16. DOM 조작 스타일 바꾸기

            
              const title = document.querySelector("#title");

              title.style.color = "tomato";
              title.style.fontSize = "3rem";

안녕하세요

첫 번째 문단

두 번째 문단

16. DOM 조작 내용 갈아끼우기

            
              const box = document.querySelector("#list");

              box.innerHTML = "<p>새로 넣은 문단</p>";

새로 넣은 문단

16. 정리

querySelectorCSS 선택자로 하나 찾기
querySelectorAll조건에 맞는 것 전부 찾기
textContent글자만 바꾸기
innerHTMLHTML째로 바꾸기
style.속성스타일 바꾸기 (fontSize처럼)

17. 이벤트

사용자의 동작에 반응하려면

17. 이벤트

지금까지는 코드를 내가 실행했습니다

이제는 사용자가 버튼을 눌렀을 때 실행되게 만듭니다

17. 이벤트 기본형

          
            대상.addEventListener("이벤트이름", () => {
              // 그때 실행할 코드
            });

17. 이벤트 click

            
              const btn = document.querySelector("#btn");

              btn.addEventListener("click", () => {
                console.log("눌렸다");
              });
눌렸다
눌렸다

17. 이벤트 카운터

            
              let count = 0;
              const btn = document.querySelector("#btn");
              const out = document.querySelector("#out");

              btn.addEventListener("click", () => {
                count++;
                out.textContent = `${count}번 눌렀습니다`;
              });

3번 눌렀습니다

17. 자주 쓰는 이벤트

click클릭했을 때
input입력창에 글자를 칠 때
submit폼을 제출할 때
keydown키를 눌렀을 때
load페이지가 다 불러와졌을 때

17. 정리

  • addEventListener로 미리 등록해둔다
  • 그 일이 일어나면 등록해둔 함수가 실행된다
  • DOM으로 찾고, 이벤트로 반응하고, DOM으로 바꾼다

정리

오늘 배운 것

한눈에

class객체를 찍어내는 틀. constructor, this, 메서드
setTimeout한 번 나중에
setInterval간격을 두고 계속. clearInterval로 정지
Promisepending → fulfilled / rejected
then / catch성공 / 실패 처리
async / await같은 일을 위아래로 읽히게
querySelector화면에서 요소 찾기
textContent / style찾은 요소 바꾸기
addEventListener사용자 동작에 반응하기

실습

직접 만들어봅시다

실습 과제

  1. 버튼을 누르면 숫자가 1씩 올라가는 카운터
  2. 1초마다 남은 시간이 줄어드는 타이머 (0에서 정지)
  3. 입력창에 이름을 치면 아래에 인사말이 바로 바뀌는 페이지

1강의 HTML/CSS 실습 페이지에 얹어보면 좋습니다

더 볼 것

끝

수고하셨습니다