1. 😎 오늘의 잘한점
1.1. 액션
해결하지 못한 과제를 포기하지 않고 해결해 낸 것!
1.2. 칭찬
풀리지 않는 것이라고 포기한 채로 두지 않았다니 또 한 번 성장했다는 것을 느꼈다.
예전이었다면 주어진 시간 내에 풀지 못해 부족한 사람이라고 자책하고 있었을 텐데
요즘에는 내가 제어하지 못하는 것이 아닌 제어할 수 있는 것에 초점을 두는, 생각의 전환을 할 수 있는 내가 되어 간다는 점이 뿌듯했다😀
2. ✔️ 오늘의 개선점
2.1. 문제
풀 수 있는 문제였음에도 제한 시간 내에 문제를 풀지 못하였다.
2.2. 원인
문제를 파악하고 구현하는 것보다 효율적인 코드를 작성하는 것을 우선순위로 생각하면서 문제를 푸는 시야가 좁아졌다.
2.3. 액션 플랜
효율적인 코드를 작성하는 것도 물론 중요하지만 100% 완벽한 코드는 없다고 했다.
80-90% 정도의 코드를 정한 시간 내에 풀어내는 연습이 필요하다.
코드가 길어지더라도 먼저 문제를 해결해 보고 이후에 중복을 줄이고, 효율적이게 작성할 수 있는 코드는 무엇일까 고민해 보자!
3. 💡 오늘의 배운점
3.1. 배움
DOM 요소 제어
insertBefore
parentElement.insertBefore(target, location)- target 요소를 parentElement의 자식인 location 위치 앞으로 이동한다.
textContent / innerHTML / innerText
textContent노드의 텍스트 콘텐츠를 표현하며 콘텐츠를 단순히 텍스트로만 다룬다.innerHTML마크업으로 변환할 수 있는 문자열이 있다면 마크업으로 처리된다.innerText요소의 렌더링 된 텍스트 콘텐츠를 나타낸다. 텍스트 내에 문법적으로 처리가 가능한 텍스트가 있으면 처리가 끝난 결과물을 텍스트로 전달한다.
위 예제는 input에 입력된 값을 각각 p의 textContent, innerHTML, innerText로 표현한 예제이다.
innerHTML 값을 설정하면 요소의 기존 콘텐츠를 지우고 새 내용으로 변경한다.
언뜻 보기에는 textContent와 innerText가 동일하게 보이는데 두 개에는 무슨 차이가 있을까?
두 개의 결과 모두 요소의 innerHTML 값으로 설정하고 있기 때문에 마크업으로 변환할 수 있는 것은 변환되어 보인다.
하지만 textContent는 단순 텍스트로 인식하기 때문에 innerHTML 값으로 처리한다 하더라도 <style> 태그 안의 값이나 <br> 태그 등의 렌더링은 처리되지 않는다.
반면에 innerText 속성은 요소의 렌더링 된 텍스트 콘텐츠를 나타내기 때문에 텍스트 내에 문법적으로 처리 가능한 텍스트가 있다면 처리가 끝난 결과물을 텍스트로 전달한다. 따라서 <br>과 .hidden이 처리된 텍스트가 보이게 된다.
이처럼 textContent 보다 innerText가 렌더링 처리 등 작업이 더 많기 때문에 처리 속도가 조금 더 느리다.
DOM 속성 제어
style객체- style 객체를 통해 설정된 스타일은 CSS inline 스타일과 동일한 가중치를 가진다.
- 따라서 수정의 여지가 있는 스타일에는
classList를 사용하여 클래스를 제어하는 것이 좋다. target.style.color현재 스타일 정보를 가져온다.target.style.color = "red"현재 스타일 정보를 변경한다.target.style.fontWeight = "bold"현재 스타일 정보에 font-weight 속성이 없다면 추가한다.target.style.color = null현재 스타일 정보를 제거(초기화)한다.
Attribute메서드- ~Attribute 메서드를 통해 특정 속성 값에 접근하거나 수정할 수 있다.
getAttribute(attributeName)요소의 특정 속성 값에 접근하여 값을 가져온다.setAttribute(attributeName, value)요소의 특정 속성 값에 접근하여 값을 수정한다.
data-* 속성
data-*속성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성한다.- 이를 통해 HTML 요소에 추가적인 정보를 저장하여 HTML과 DOM 사이에서 임의의 데이터를 스크립트로 교환할 수 있다.
- 단, data 속성의 이름에는 콜론(
:)이나 영문 대문자가 들어가서는 안된다.
<html />
<button data-name="click-button" data-button-id="23">Beatiful Button</button>
<script>
const target = document.querySelector("button");
console.log(target.dataset); // DOMStringMap {name: 'click-button', buttonId: '23'}
console.log(target.dataset.buttonId); // 23
</script>
DOM에서 노드 탐색하기
firstElementChild첫 번째 자식을 찾는다.lastElementChlid마지막 자식을 찾는다.nextElementSibling다음 형제 요소를 찾는다.previousSibling이전 형제 노드를 찾는다.- ~Element~에서는 요소를 탐색하고, Element가 없는 ~Sibling이나 childNodes는 노드를 탐색한다.
- 노드를 탐색할 경우에는 주석, 개행 등도 포함하여 탐색된다.
- 노드를 탐색할 경우 nodeName property 값에 따라 반환 값이 다르다.
Node: nodeName property - Web APIs | MDN
The read-only nodeName property of Node returns the name of the current node as a string.
developer.mozilla.org
closest()는 주어진 CSS 선택자와 일치하는 요소를 찾을 때까지 자기 자신을 포함해 위쪽으로 DOM 트리를 순회한다. 단, 형제 요소는 찾지 않음에 주의하자.
이벤트 객체
- 이벤트 객체란 이벤트 리스너의 인자를 칭한다.
- 이벤트에서 호출되는 핸들러에 이벤트와 관련된 모든 정보를 가지고 있다.
<javascript />
// 여기서 'event'가 바로 이벤트 객체
btnFirst.addEventListener('click', (event) => {
console.log(event);
});
이벤트 흐름
브라우저가 이벤트 대상을 찾아갈 때는 가장 상위의 window 객체부터 document, body 순으로 DOM 트리를 따라 내려간다. 이를 캡처링 단계라고 한다.
이때 이벤트 대상을 찾아가는 과정에서 브라우저는 중간에 만나는 모든 캡처링 이벤트 리스너를 실행시키고, 캡처링이 끝나면 다시 DOM 트리를 따라 올라가며 만나는 모든 버블링 이벤트 리스너를 실행시킨다. 이를 버블링 단계라고 한다.
이러한 과정에서 이벤트 리스너가 차례로 실행되는 것을 이벤트 전파(event propagation)라고 한다.
이벤트 target / currentTarget
<html />
<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); // 버튼2 클릭시, <button type="button">버튼2</button>
console.log(event.currentTarget); // <article class="parent">...</article>
})
</script>
target이벤트가 발생한 대상 객체currentTarget이벤트 핸들러에 연결된 객체
이벤트 위임
이벤트의 흐름(캡처링, 버블링)을 통해 이벤트 리스너가 없는 요소의 이벤트가 발생했을 때도 해당 요소에 접근할 수 있다.
이를 이용해 이벤트 리스너가 없어도 마치 있는 것처럼 사용할 수 있는데, 이를 이벤트 위임이라 한다.
3.2. 의미
시간이 지나고 다시 DOM을 만나게 되니 한번 봤다는 경험으로 어색하지는 않았다. 이전에는 캡처링, 버블링 등 머리에서 개념이 그려지기 조차 어려웠다면, 지금은 선명하진 않지만 어느 정도 개념이 그려지고 있는 기분이 들었다. 다른 사람이 잘하는 데에는 그만큼 절대적인 시간을 투자했기 때문이라는 말이 조금은 이해가 되는 것 같다. 이전에는 이해하지 못하는 나를 자책하고, 점점 땅으로 끌어들였다면 지금은 그러지 말자고 다음에는 이해하는 순간이 반드시 올 거라고 생각할 수 있게 되었다.
깊이 들어가면 들어갈수록 어려운 DOM이지만, 이 날을 기억하고 되새기며 앞으로 나아가자🏃
'Retrospective > LikeLion' 카테고리의 다른 글
| #031. 정규 표현식 살짝 맛보기😵💫 (0) | 2023.05.15 |
|---|---|
| #027. DOM과 마주친 날, 누구셨더라...? (2) | 2023.04.12 |
| #019-026. 눈 감았다 떴더니 지나버린 6주차 (2) | 2023.04.09 |
| #018. 문법적으로 짱짱 멋진 스타일 시트 SASS와의 만남 (4) | 2023.03.27 |
| #016-017. 시멘틱 마크업에 대해 고민하기 (2) | 2023.03.23 |
