[CodeStates] Twittler(2)

Let's TECH🧐·2019년 9월 30일

Code States Pre Course JavaScript twittler web

Twittler

목록 보기

2/3

지난 게시글에 이어서 이번에는 이벤트(onclick, onkeyup 등)에 대해 살펴보도록 하겠다.

5. 이벤트(onclick, onkeyup 등)

onclick

vue image
onclick 이벤트를 이용하여 왼쪽 화면의 'Tweet!' 버튼을 눌렀을 때 콘솔 창에 'Thank you!'라는 값이 출력되게 만들 수 있다.
오른쪽 화면의 콘솔창에 보이는 것처럼 onclick 이벤트를 이용해 다음과 같은 코드를 작성했다.

$0.onclick = function() {
	console.log("Thank you!");
}

그런 후 'Tweet!' 버튼을 세 번 누르니까 콘솔 창에도 'Thank you!'가 세 번 출력되었다.

또, 아래처럼 함수를 따로 만들어서 붙여줄 수도 있다.
vue image
대신 함수를 붙여줄 때는 함수를 실행하지 않은 채로 붙여줘야한다는 것을 주의하자👍

onkeyup

vue image
onkeyup 이벤트를 이용해 Message 상자 안에서 키보드 타이핑을 할 때마다 콘솔 창에 'Wow!'가 출력되게 만들 수 있다.
내가 Message 상자 안에서 '안녕하세요'를 입력하며 키보드에서 손가락을 반복적으로 떼니까 콘솔 창에서는 손가락을 뗀 횟수만큼 'Wow!'라는 값이 출력되었다.

엘리먼트 선택

지금까지 $0를 이용해 엘리먼트를 가져오는 방법을 알아보았는데, 언제까지나 이 방법을 쓸 수는 없다.
이제부터는 Javascript를 이용해 특정 엘리먼트를 선택하고 가져오는 방법에 대해 알아보자.

태그를 이용: getElementByTagName
id를 이용: getElementById
class를 이용: getElementByClassName
selector를 이용: querySelector/ querySeletorAll

위에 보이는 것처럼 엘리먼트를 선택하는 방법에는 다양한 방법들이 있지만
querySelector를 이용하면 id나 class를 메소드 이름으로 구분하지 않고 가져올 수 있어서 편하다.
vue image
콘솔창에 보이는 것처럼 querySeletor를 이용해 namebox를 가져와보았다.

예제 1) Tweet! 버튼을 눌러 Username 칸에 입력한 값을 가져오게 하려면 어떻게 해야 할까?

vue image
onclick 이벤트와 value를 함께 사용해서 위와 같이 코드를 작성해주면
Tweet! 버튼을 누름과 동시에 Username 칸에 입력한 값이 콘솔창에 출력되는 것을 볼 수 있다.

예제 2) Username 칸에 입력한 대로 그 값을 가져오게 하려면 어떻게 해야 할까?

vue image
이 때는 onkeyup 이벤트를 이용해 namebox의 value를 가져와주면 된다.

예제 3) Username 칸에 입력한 값을 Tweet! 버튼에서 출력하게 하려면 어떻게 해야 할까?

vue image
이 때는 innerHTML을 사용해야한다!
onkeyup 이벤트를 사용한 뒤, tweetbtn.innerHTML은 namebox.value와 같다는 코드를 작성해주면 namebox에 입력한 값이 tweetbtn에도 출력된다.

DOM 조작 (innerHTML)

innerHTML 속성을 이용해 새로운 엘리멘트를 만들 수도 있다.

변경 전 HTML

<div id="target>변경 전</div>

Javascript

let target = document.querySelector('#target');
target.innerHTML = `
	<span>변경 후</span>
`;

변경 후 HTML

<div id="target>
  <span>변경 후</span>
</div>

DOM 조작 (메소드)

새로운 엘리먼트를 만들기 위해 메소드를 사용하는 방법도 있다.
메소드를 사용하는 방법은 innerHTML에 비해 조금 복잡하게 느껴질 수도 있지만, 이 방법은 엘리먼트를 생성하는 것과 동시에 이벤트 핸들러 등록이 가능하다는 장점이 있다.
vue image

document.createElement와 appendChild 메소드를 이용해 div#greeting의 새로운 자식 엘리먼트인 span 태그를 만들어주었다.

이 외에도 "vanilla javascript dom manipulation cheet sheet"를 검색하면 다양한 DOM 메소드를 찾아볼 수 있다.

DOM 조작 (template 태그)

변경 전 HTML

<template id="will-be-rendered">
  <span>변경 후</span>
</template>

<div id="target">변경 전</div>

Javascript

let target = document.querySelector('#target');
let template = document.querySelector('#will-be-rendered');

// #will-be-rendered 안쪽 내용을 자식 노드를 전부 포함하여 복사한다.
let newContent = document.importNode(template.content, true);

// target 내용을 비운다.
target.innerHTML = '';
target.appendChild(newContent);

변경 후 HTML

<div id="target">
  <span>변경 후</span>
</div>

사실 이 template 부분이 전혀 이해가 되지 않은 상태라, 이 부분은 좀 더 공부를 해보고 추가로 설명을 덧붙여야겠다.

👉 여러 레퍼런스를 통해 DOM을 공부하고 나니까 template 부분이 이제 이해가 되어서 추가로 설명을 덧붙여 보겠다.

let target = document.querySelector('#target');
let template = document.querySelector('#will-be-rendered');

위에 자바스크립트 코드를 보면 querySelector를 이용해 div#target과 #will-be-rendered 엘리먼트를 가져왔다.

// #will-be-rendered 안쪽 내용을 자식 노드를 전부 포함하여 복사한다.
let newContent = document.importNode(template.content, true);

그런 후, let newContent = document.importNode(template.content, true) 를 통해 #will-be-rendered 안쪽 내용(<span>변경 후</span>)을 자식 노드를 포함해 복사한다.
복사한 내용은 newContent라는 변수에 담아준다.

// target 내용을 비운다.
target.innerHTML = '';
target.appendChild(newContent);

이제 target 안의 내용을 비우고, #will-be-rendered 안쪽 내용(<span>변경 후</span>)이 담긴 newContent를 target의 자식 엘리먼트로 만들어준다.

결과는 다음과 같다.

<div id="target">
<span>변경 후</span>
</div>

지금 다시 보면 엄청 어려운 내용은 아닌데 그 때는 이게 왜 그렇게 이해가 안가고 어려웠는지 모르겠다. 아마 처음 공부하는 내용이라 너무 낯설게 느껴져서 그랬나보다😌

마무리

Twittler 과제는 내가 직접 이것 저것 만들어보고 원하는 대로 웹페이지를 꾸며볼 수 있어서 재미있는 과제이긴 하지만 아직 나에겐 어렵다😂 Twittler 부터 진도가 밀리고 온라인 강의 내용이 제대로 이해되지 않아서 다시 강의 내용을 복습하며 과제를 해결하고 있다.
그 전 과제들보다 복잡하고 막힐 때도 많지만 어려운 부분은 구글링하거나 다시 강의를 들어보며 차근차근 해결해나가야겠다.