🦁_21.12.10 TIL

Bori·2021년 12월 10일

멋쟁이사자처럼_프론트엔드 스쿨 1기

목록 보기

39/60

21년 12월 10일

📝 Javascript

📎 DOM_2(Document Object Model, 문서 객체 모델)

DOM 제어 명령어

요소 제어 : DOM API를 이용하면 요소를 새롭게 생성하고, 위치하고, 제거할 수 있다.

<!-- 예제 1 -->
<ul></ul>
<button>Make me MORE!</button>

const myBtn = document.querySelector(“button”);
const myUl = document.querySelector(“ul”);

myBtn.addEventListener(‘click’, function(){
  // li 요소를 생성
  const myLi = document.createElement(‘li’);
  // 생성된 li를 ul에 추가
  myUl.appendChild(myLi);
})

// document.createElement(target); target 요소를 생성
// document.createTextNode(target); target 텍스트를 생성
// element.appendChild(target);    target 요소를 element의 자식으로 위치
// element.removeChild(target);    element의 target 자식 요소를 제거

<!-- 예제 2 -->
<div id="parentElement">
  <span id="childElement">hello guys~</span>
</div>

let span = document.createElement("span");
let sibling = document.getElementById("childElement");
let parentDiv = document.getElementById("parentElement");

// parentElement.insertBefore(target, location); 
// target요소를 element의 자식인 location 위치로 이동합니다.
parentDiv.insertBefore(span, sibling);

JavaScript 문자열을 사용해 element, text 노드를 생성, 추가하기

<p></p>
<input type="text">
<button>Write Something!</button>

const myBtn = document.querySelector("button");
const myP = document.querySelector("p");
const myInput = document.querySelector("input");

myBtn.addEventListener('click', function(){
	myP.textContent = myInput.value;
});

// input 요소에 'input' 이벤트를 연결하면 실시간으로 값이 반영되게 만들 수도 있습니다.
myInput.addEventListener('input', ()=>{
  myP.textContent = myInput.value;
});

myP.innerHTML = "<strong>I'm Strong!!</strong>";
myP.outerHTML = "<div></div>";

// innerHTML 은 요소 내에 포함 된 HTML 마크업을 가져오거나 설정
// innerText 속성은 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다. 
// (innerText는 "사람이 읽을 수 있는" 요소만 처리)
// textContent 속성은 노드의 텍스트 콘텐츠를 표현

innerHTML 사용시 주의 사항

사이트의 공격 경로가 되어 잠재적인 보안 위험이 발생할 수 있다.
const name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// ...

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case
참고
Element.innerHTML - MDN

innerText 와 textContent의 차이

innerText

텍스트의 렌더링된 모양을 인식

노드에 포함된 보이는 텍스트(visible text)를 반환

innerText의 성능이 훨씬 더 무겁고, 레이아웃 정보를 반환하려면 레이아웃의 정보가 필요하다.

HTMLElement 객체에 대해서만 정의
=> innerText는 css가 렌더링 됨
=> 공백을 인식하지 못함(visible text만 처리)

textContent

텍스트의 렌더링된 모양을 인식하지 않는다.

전체 텍스트를 반환

모든 Node 객체에 대해 정의된다.
=> 공백, 줄 바꿈과 같은 서식을 인식하여 마크업만 제처하여 반환
=> 브라우저 호환성이 좋고, 텍스트 컨텐츠의 row 값을 보여줘 파싱이 빠름
<div class="cont-txt">
  <span>Hello <span style="display: none">World</span></span>
</div>
const txt = document.querySelector(".cont-txt");
console.log(txt.innerText); // Hello
console.log(txt.textContent); // Hello World
참고

Difference between textContent vs innerText

HTMLElement.innerText

더 정밀하게 배치하기

<strong class="sayHi"> 반갑습니다. </strong>

const sayHi = document.querySelector(".sayHi");
// sayHi 요소가 시작하기 전에 요소 배치
sayHi.insertAdjacentHTML("beforebegin", "<span>안녕하세요 저는</span>");
// sayHi 요소가 시작한 후
sayHi.insertAdjacentHTML("afterbegin", "<span>재현입니다</span>");
// sayHi 요소가 끝나기 전
sayHi.insertAdjacentHTML("beforeend", "<span>면접오시면</span>");
// sayHi 요소가 끝난 후
sayHi.insertAdjacentHTML("afterend", "<span>치킨사드릴게요</span>");

// 안녕하세요 저는재현입니다 반갑습니다. 면접오시면치킨사드릴게요

DOM 안에서 노드 탐색하기
- parentNode : 부모 노드 탐색
- firstChild, lastChild : 자식 노드 탐색
- hasChildNodes() : 자식 노드가 있는지 확인하고 Boolean값 반환
- childNodes : 자식 노드의 컬렉션 반환. 텍스트 요소를 포함한 모든 자식 요소를 반환
  => Return: NodeList(non-live)
- children : 자식 노드의 컬렉션을 반환. 자식 요소 중에서 Element type 요소만 반환
  => Return: HTMLCollection(live)
- previousSibling, nextSibling : 형제 노드를 탐색. text node를 포함한 모든 형제 노드를 탐색
- previousElementSibling, nextElementSibling : 형제 노드를 탐색. 형제 노드 중에서 Element type 요소만을 탐색

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>Document</title>
  </head>
  <body>
    <!-- 주석입니다 주석. -->
    <article class="cont">
      <h1>안녕하세요 저는 이런 사람입니다.</h1>
      <p>지금부터 자기소개 올리겠습니다</p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt incidunt
      voluptates laudantium fugit, omnis dolore itaque esse exercitationem quam
      culpa praesentium, quisquam repudiandae aut. Molestias qui quas ea iure
      officiis.
      <strong>감사합니다!</strong>
    </article>

    <script>
      const cont = document.querySelector(".cont");
      // 첫번째 자식을 찾습니다.
      console.log(cont.firstElementChild); // <h1>안녕하세요 저는 이런 사람입니다.</h1>

      // 마지막 자식을 찾습니다.
      console.log(cont.lastElementChild); // strong>감사합니다!</strong>

      // 다음 형제요소를 찾습니다.
      console.log(cont.nextElementSibling); // script

      // 이전 형제요소를 찾습니다.
      console.log(cont.previousSibling); // #text

      // 모든 직계자식을 찾습니다.
      console.log(cont.children); // HTMLCollection(3)

      // 부모 요소를 찾습니다.
      console.log(cont.parentElement); // body
    </script>
  </body>
</html>

📎 이벤트 흐름

브라우저 화면에서 이벤트 발생
=> 브라우저의 이벤트 대상 찾기 시작
이벤트 대상을 찾아갈 때 가장 상위의 window 객체부터 DOM 트리를 따라 내려간다.
=> 이때 브라우저는 중간에 만나는 모든 캡처링 이벤트 리스너를 실행
=> 캡처링(capturing) 단계
이벤트 대상을 찾고 캡처링이 끝나면 다시 DOM 트리를 따라 올라간다.
=> 올라가면서 만나는 모든 버블링 이벤트 리스터를 실행
=> 버블링(bubbling) 단계

=> 이러한 과정에서 이벤트 리스터가 차례로 실행되는 것
= 이벤트 전파(event propagation)

표준 DOM 이벤트에서 정의한 이벤트 흐름의 3단계

캡처링 단계(Capture Phase) : 이벤트가 하위 요소로 전파되는 단계

타킷 단계(Target Phase) : 이벤트가 실제 타깃 요소에 전달되는 단계

버블링 단계(Bubbling Phase) : 이벤트가 상위 요소로 전파되는 단계

참고
버블링과 캡처링

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <article class="parent">
      <button class="btn" type="button">버튼</button>
    </article>

    <script>
      const parent = document.querySelector(".parent");
      const btnFirst = document.querySelector(".btn");
      btnFirst.addEventListener("click", (event) => {
          console.log("btn capture!");
        }, true);

      window.addEventListener("click", () => {
          console.log("window capture!");
        }, true); // true : 캡처링 단계의 이벤트가 발생하도록 합니다.

      document.addEventListener("click", () => {
          console.log("document capture!");
        }, true);

      parent.addEventListener("click", () => {
          console.log("parent capture!");
        }, true);

      btnFirst.addEventListener("click", (event) => {
        console.log("btn bubble!");
      }); // true 값이 없으므로 버블링 이벤트가 일어난다

      parent.addEventListener("click", () => {
        console.log("parent bubble!");
      });

      document.addEventListener("click", () => {
        console.log("document bubble!");
      });

      window.addEventListener("click", () => {
        console.log("window bubble!");
      });
    </script>
  </body>
</html>

Event 객체

이벤트 객체는 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 유용한 정보를 제공
=> 이벤트가 발생하면 이벤트 객체는 동적으로 생성
=> 이벤트를 처리할 수 있는 이벤트 핸들러를 인자로 전달

이벤트 target, currentTarget

event.target : 이벤트가 발생한 가장 안쪽의 요소
=>이벤트가 발생한 진원지의 정보가 담겨있다.
=> 이 속성을 통해 이벤트 리스너가 없는 요소의 이벤트가 발생했을 때도 해당 요소에 접근 가능
event.currentTarget : 이벤트를 핸들링하는 현재 요소(핸들러가 실제 할당된 요소)
=> 이벤트 리스너가 연결된 요소가 참조되어 있다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="here">
      <span>target</span>
    </button>

    <script>
      const here = document.querySelector(".here");
        here.addEventListener("click", function (e) {
        console.log(e.target);
        console.log(e.currentTarget);
      });
    </script>
  </body>
</html>

참고
event target과 currentTarget의 차이점
버블링과 캡처링 - 모던 자바스크립트 튜토리얼

📎 이벤트 위임(Event Delegation)

캡처링과 버블링을 활용하여 이벤트 위임을 구현할 수 있다.
이벤트 위임은 비슷한 방식으로 여러 요소를 다뤄야할 때 사용
=> 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다.
이벤트 위임을 사용하려면 이벤트가 반드시 버블링 되어야 한다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>이벤트 위임</title>
    <style></style>
  </head>
  <body>
    <article class="parent">
      <ol>
        <li><button class="btn-first" type="button">버튼1</button></li>
        <li><button type="button">버튼2</button></li>
        <li><button type="button">버튼3</button></li>
      </ol>
    </article>

    <script>
      // 이벤트 리스너는 부모에 달아놨지만
      // 자식에게도 이벤트가 실행될 수 있게 함
      const parent = document.querySelector(".parent");
      parent.addEventListener("click", function (event) {
        console.log(event.target);
        if (event.target.nodeName === "BUTTON") {
          event.target.innerText = "버튼4";
        }
      });
    </script>
  </body>
</html>

이벤트의 `this`

이벤트 리스너 함수 내부에서의 this 값은 이벤트가 연결된 노드를 참조한다.
=> 이벤트가 연결된 요소를 바라본다.
=> event.currentTarget 속성의 참조 값과 유사하다.
만약 이벤트 리스너 함수를 화살표 함수로 쓴다면 this가 가리키는 대상이 달라진다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <article class="parent">
      <ol>
        <li><button class="btn-first" type="button">버튼1</button></li>
        <li><button type="button">버튼2</button></li>
        <li><button type="button">버튼3</button></li>
      </ol>
    </article>

    <script>
      const parent = document.querySelector(".parent");
      parent.addEventListener("click", function (event) {
        console.log(this);
        console.log(event);
        // console.log(event)로 currentTarget 확인 시 null 값이지만
        // console.log(event.currentTarget)를 확인해보면 잘 나온다
        console.log(event.currentTarget);
      });

      // 화살표 함수는 해당 스코프의 상위 스코프를 가리킨다.
      parent.addEventListener("click", () => {
        console.log(this); // window
      });
    </script>
  </body>
</html>

📎 TDD(Test Driven Development)

테스트 주도 개발
=> 테스트를 통한 기능의 구현
=> 이번 시간에 Unit Test(단위 테스트) 학습!

Unit Test(단위 테스트)

특정 조건에서 함수(Unit)가 어떻게 작동해야하는지 정의하고, 정의대로 함수가 잘 작동하는지 확인하는 방법론

Jasmine

TDD 라이브러리

Jasmine - 최신버전 다운받기

환경 구성은 standalone 방식을 이용

standalone 방식 : 모든 자스민 코드를 브라우저에 올려서 실행하는 방법
=> 실행 결과를 간단하게 확인할 수 있다
=> 실무에서는 거의 사용하지 않는다.

karma 라이브러리와 함게 설치하는 방식(자동화) : 실무에서 주로 사용하는 방식

간단한 함수 테스트 해보기

객체지향적 코드를 구현하여 TDD

TDD의 단계

TDD에서는 코딩할 때 기능을 바로 개발하지 않고 테스트 코드를 먼저 작성
=> 테스트 코드는 다음과 같은 단계를 거친다.
- 적색(red) 단계 : 성공하기 위해 테스트에 실패하는 단계
- 녹색(green) 단계 : 테스트에 성공하는 단계
- 리팩터(refactor) 단계 : 테스트에 성공한 코드를 기반으로 코드의 품질을 높이는 단계
  => 리팩토링

=> 이 세가지 단계의 끊임없는 반복

마무리

수업 중간에 고구마 먹다가 들켰다 헤헤
TDD에 대해 몰랐는데 간단하게 만들어서 그런지 신기하고 재미있었다아
내 생각엔 멋사 프론트엔드 스쿨 1기 분들은 다들 드립력이 대단하다
=> 줌 켜놓고 책상 땅땅치면서 웃어재꼈는데 말이죠. 허허

Bori

이전 포스트

🦁_21.12.09 TIL

다음 포스트

🦁_21.12.11 / 21.12.12

1개의 댓글

dana

2021년 12월 17일

우와 TDD 란 이런거였군여!!

답글 달기

🦁_21.12.10 TIL

멋쟁이사자처럼_프론트엔드 스쿨 1기

21년 12월 10일

📝 Javascript

📎 DOM_2(Document Object Model, 문서 객체 모델)

DOM 제어 명령어

`innerHTML` 사용시 주의 사항

`innerText` 와 `textContent`의 차이

📎 이벤트 흐름

표준 DOM 이벤트에서 정의한 이벤트 흐름의 3단계

Event 객체

이벤트 target, currentTarget

📎 이벤트 위임(Event Delegation)

이벤트의 `this`

📎 TDD(Test Driven Development)

Unit Test(단위 테스트)

Jasmine

TDD의 단계

마무리

🦁_21.12.09 TIL

🦁_21.12.11 / 21.12.12

1개의 댓글

🦁_21.12.10 TIL

멋쟁이사자처럼_프론트엔드 스쿨 1기

21년 12월 10일

📝 Javascript

📎 DOM_2(Document Object Model, 문서 객체 모델)

DOM 제어 명령어

innerHTML 사용시 주의 사항

innerText 와 textContent의 차이

📎 이벤트 흐름

표준 DOM 이벤트에서 정의한 이벤트 흐름의 3단계

Event 객체

이벤트 target, currentTarget

📎 이벤트 위임(Event Delegation)

이벤트의 this

📎 TDD(Test Driven Development)

Unit Test(단위 테스트)

Jasmine

TDD의 단계

마무리

🦁_21.12.09 TIL

🦁_21.12.11 / 21.12.12

1개의 댓글

`innerHTML` 사용시 주의 사항

`innerText` 와 `textContent`의 차이

이벤트의 `this`