[Front-end🦁] #31 DOM Event (target, 위임 +), TDD

1. DOM

1. createElement

<input type="text">
<div id="parentElement">
  <p id="childElement">ㅁㄴㅇㄹ</p>
</div>
<script>
    var input = document.querySelector("input");
    var span = document.createElement("span");
    // input으로 주면 실시간으로 입력 받아옴.
    input.addEventListener('input, () => {
        span.textContent = input.value;
    });
    var sibling = document.getElementById("childElement");
    var parentDiv = document.getElementById("parentElement");
    parentDiv.insertBefore(span, sibling);
</script>

• outerHTML :
• innerHTML : 요소에 포함된 HTML 마크업 -> XSS 공격 가능. 그래서 Node.textContent 같은 걸로 입력값 처리 필요.
• innerText : 요소 + 자손의 렌더링된 텍스트 콘텐츠 (사람이 읽을 수 있는 요소만 처리.) CSS 렌더링 됨. 공백 인식X
• textContent : 노드의 텍스트 콘텐츠. 공백 문자 인식. tag 빼고 text 다 들어감. 텍스트만 처리할 때는 이걸로 하는 것이 성능상 유리하다.

2. insertAdjacentHTML

<strong class="sayHi">
    반갑습니다.
</strong>
<script>
    const sayHi = document.querySelector('.sayHi');
// 원래 요소의 자식 앞뒤로 요소를 넣을 수 있다.
    sayHi.insertAdjacentHTML('beforebegin', '<span>1</span>');
    sayHi.insertAdjacentHTML('afterbegin', '<span>2</span>');
    sayHi.insertAdjacentHTML('beforeend', '<span>3</span>');
    sayHi.insertAdjacentHTML('afterend', '<span>4</span>');
</script>

3. 노드 탐색

노드 : 각 요소, 속성, 콘텐츠를 표현하는 단위를 모두 노드라고 한다. 주석, Text값, 줄바꿈 ...

const cont = document.querySelector(".cont");
console.log(cont.firstElementChild);  // 첫번째 자식
console.log(cont.lastElementChild);   // 마지막 자식
console.log(cont.nextElementSibling); // 다음 형제요소
console.log(cont.previousSibling);    // 이전 형제노드 - Element가 없으면.
console.log(cont.children);           // 모든 직계자식
console.log(cont.parentElement);      // 부모 요소

4. 이벤트 객체, 흐름

• 이벤트 객체 : 이벤트에서 호출되는 함수에는 이벤트와 관련된 정보를 가지고 있는 인자가 전송된다. 잡아서 쓸 수 있다.
• 이벤트 흐름 : 이벤트가 발생하면 브라우저는 DOM tree를 타고 이벤트 대상을 찾아감. (캡처링 단계) 대상을 찾고 캡처링이 끝나면 DOM tree를 타고 올라가면서 모든 버블링 이벤트 리스너를 실행 (이벤트버블링 단계) 이벤트 리스너가 차례로 실행되는 것을 이벤트 전파(event propagation)라고 한다.

window.addEventListener('click', () => {
    console.log("window capture!");
}, true); // true : 캡처링 단계의 이벤트가 발생하도록. 안쓰면 버블링 이벤트 default

5. event target, current target, 이벤트 위임

<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); // 이벤트를 일으킨 녀석. 부모에 이벤트가 붙어있으면 자식에서 이벤트가 일어나도 실행되기 때문에!
        console.log(event.currentTarget); // 원래 이벤트가 붙어있는 녀석.
      //
      // 이벤트 위임 : target으로 이벤트를 일으킨 녀석을 잡고 그것에 대한 처리도 가능!
      if (event.target.classList.contains("btn")) {
        event.target.innerText = "버튼~~";
    })
</script>

• 이벤트 위임 : 이벤트 리스너가 없어도 마치 있는 것처럼 사용.

5. 이벤트에서 this

const parent = document.querySelector('.parent');
parent.addEventListener('click', function (event) {
  //currentTarget === this
  console.log(this);
})
parent.addEventListener('click', (evt) => {
  // 화살표 함수 안의 this는 상위 스코프의 this를 참조. -> 헷갈리니까 웬만하면 this 대신 evt.target 이렇게 써주자.
  console.log(this);
})

6. select box 실습

#20 에서 js 코드는 선생님이 주시고 CSS는 직접 작성했었던, 셀렉트 박스를 이번에는 js 코드를 직접 작성해보았다.

// 1. ul에 li 동적 추가
const memberList = document.body.querySelector(".list-member");
const contents = ["Python", "Java", "JavaScript", "C#", "C/C++"];

for (x of contents) {
    const li = document.createElement('li');
    const button = document.createElement('button');
    button.type = "button";
    button.innerText = x;
    li.appendChild(button);
    memberList.appendChild(li);
  // list.appendChild(li).appendChild(btn); //chaining 가능!!
}
// 2. addEventListener 붙이기.
const selectButton = document.querySelector('.btn-select');
const memberButtons = document.querySelectorAll('.list-member li button');
// 박스 누르면 option 나오게
selectButton.addEventListener('click', (event) => {
    selectButton.classList.toggle('on');
});
// option 선택하면 눌리면서 option list 닫히게.
// forEach 는 배열을 순환하는 것인데.. 
// querySelectorAll 로 뽑아온건 nodeList(유사 배열 객체)
// Array.prototype.forEach, NodeList.prototype.forEach() 가 둘 다 있어서 작동이 되는 것.
// 근데 NodeList forEach는 IE 지원이 안됨..............
memberButtons.forEach(x => x.addEventListener('click', (event) => {
    selectButton.textContent = event.target.innerText;
    selectButton.classList.remove('on');
}));

// keyboard 접근성을 고려한 코드.
const listAll = ul.querySelectorAll('button'); // option list
const firstOption = ul.querySelector('button'); //option first button
const lastOption = listAll[listAll.length - 1]; //option last button
//focus 이동
const handleTabFoucus = function (e) {
    if (!e.shiftKey && e.keyCode === 9) {
        e.preventDefault();
        window.setTimeout(function () {
            firstOption.focus();
        }, 100);
    }
};
//shift+tab
const handlShiftTabFoucus = function (e) {
    if (e.shiftKey && e.keyCode === 9) {
        e.preventDefault();
        window.setTimeout(function () {
            lastOption.focus();
        }, 100);
    }
};
//ESC키 
const hadleEsc = function (e) {
    if (e.keyCode === 27) {
        btn.classList.remove('on');
        ul.classList.remove('on');
        window.setTimeout(function () {
            btn.focus();
        }, 100);
    }
}
selectButton.addEventListener('keydown', hadleEsc);
memberList.addEventListener('keydown', hadleEsc);
lastOption.addEventListener('keydown', handleTabFoucus);
firstOption.addEventListener('keydown', handlShiftTabFoucus);

// jQuery 처럼 쓰는 테크닉 -> 쓰지 말자.
const $ = (selector => document.querySelector(selector);
$('.list-member')

2. TDD

Test Driven Development - 우리는 jasmin을 이용한다.

• test 코드를 먼저 적고, 그 후에 기능을 개발.
• 3가지 단계를 통해 진행됨.

1. RED : 테스트를 실패하는 단계
2. GREEN : 테스트에 성공한 단계
3. REFACTOR : 테스트에 성공한 코드를 기반으로 코드의 품질을 높이는 단계

실습

1. jasmine 파일을 다운받아서 프로젝트에 넣고,
2. html 에 링크를 건다. jasmine link
3. spec 폴더에 테스트 코드를
4. src 에 진짜 js 코드를 넣고
5. SpecRunner.html 에 연결 후 실행시켜서 테스트 결과가 잘 나오는지 확인해본다.
   

// 원래 코드
function plusOne(num) {
    return num + 1;
}
// test code
// 테스트 유닛들의 모음
describe('쟈스민 테스트 입니다.', () => {
    // it : 테스트 유닛 1 (덧셈 함수)
    it('덧셈을 하는 함수입니다.', () => {
        let num = 10;
        // expect : 실행할 함수의 결과값을 인수로 전달한다.
        // toBe : 내가 기대한 결과를 넣으면 일치하는지 판단해줌.
        expect(plusOne(num)).toBe(num+1); 
    });
});

근데 간단한 코드라서 이렇게 바로 짠거지.. 만약 더 복잡하다면...? 정말 힘들 것 같다. 그래서 테스트가 가능한 코드를 짜려면

• 코드를 UI 에서 완전히 분리
• 자바스크립트를 JS 파일로 분리
• 모든 기능은 함수로 구현
  하는 것이 중요하다.
  + 테스트 코드도 결국 사람이 짜는 것이기 때문에 언제든지 예외사항이 발생할 수 있다.

작은 회고

• Xcode 에서 프로젝트 만들때 테스트가 뭔데.. 테스트 코드가 뭔데.. 내가 짠 코드를 테스트 해주는 거겠지 근데 그래서 어떻게 하는데... 기업 공고에서는 짜본 사람 우대인데... 라는 생각을 했는데 이제야 테스트가 뭔지 알게 되었다.
• 나중을 대비해서 이벤트 캡쳐링, 버블링, target, this 를 잘 알아두는 것이 좋을듯!!!!