[TIL/React] 2023/01/25

머리글

오늘은, 어제 공부한 'JavaScript로 DOM을 조작하는 방법'을 TIL을 통해 복습했다. 강의를 더 들으려고 했지만, 복습하는 중에 이해가 되지 않는 부분이 있어서 고민의 시간을 가졌다.

자바스크립트 기초(1)

1) documnet로 DOM에 접근하기

1-a) 클래스 명으로 DOM 요소에 접근하기

앞서 display에 flex를 적용하기 위해 div 태그에 선언한 'wrap'이라는 클래스 명을 통해 div(=DOM 요소)에 접근했다. 기본적으로 document로 접근을 시작하고, 'getElementsByClassName'이라는 코드를 사용하여 클래스 명으로 DOM에 접근할 것임을 알려주었다.

콘솔에 로그를 찍어보면 우측 하단에 보이는 바와 같이, wrap이라는 클래스 명을 가진 div 태그에 올바르게 접근했음을 확인할 수 있다.

1-b) id로 DOM 요소에 접근하기

id로 DOM 요소에 접근하는 방식은 class 명으로 접근하는 방식과 크게 다르지 않다. document로 접근을 시작하고 'getElements'까지는 동일한데, class 대신 id를 입력했을 뿐이다. 콘솔로 확인해봤다.

가장 큰 제목에만 id를 적용했었고, 정상적으로 가장 큰 제목인 '오늘 할 일'에만 접근하는 것에 성공했다.

1-c) 태그 명으로 DOM 요소에 접근하기

button이라는 특정 태그 명으로 DOM 요소에 접근했다. 방식은 class명, id를 사용했을 때와 동일하다.

단순히 접근하는 것을 넘어서 클릭했을 때, 'hello'라고 콘솔에 인사를 해주는 이벤트를 발생시켜봤다.

이벤트가 발생하기 위해서는 '발생할 이벤트 자체'를 먼저 규정해야 한다. sayHello함수는 말 그대로 콘솔에 'hello'를 입력해주는 함수이다.

그 다음에 for문을 돌렸다. 코드가 작동하는 매커니즘을 self-lecture 해봤는데 어디에선가 막혔다. 캡쳐해놓고 스스로 납득할 때까지 볼 생각이다.

추가적으로, 첫 번째 카드에서 완료 버튼을 눌렀을 때 카드가 회색으로 바뀌는 상태를 만들어봤다.

코드를 따라치는 것은 쉬운데 말로 설명하려니 잘 안된다. 이건 100% 나의 지식이 아니다. 후...

2) document에 DOM 요소 추가하기

앞에서는 이미 있는 DOM 요소에 접근하고 활용하는 정도에 그쳤다면, DOM 요소를 추가하는 작업도 진행했다.

역시나 처음은 document로 접근하고, 이후에 'creatElement'라는 내장함수를 사용했다.

새로운 DOM 요소가 생겼다. 하지만 깡통 div는 그 어디에서도 찾아볼 수 없었다. 정확히 어느 위치에 넣어줄지를 지정하지 않았기 때문이다.

body 내부에 자식요소로 div를 넣어주겠다는 코드이다.

script 태그 하단에 깡통 div가 생성되었다. 직관적으로 확인하기 위해서 깡통 div의 contents 높이와 넓이를 100px로 설정하고 color는 green으로 지정했다.

회고

'기존 DOM에 JS로 접근&활용', '새로운 DOM 추가' 두 가지가 오늘 정리한 학습 내용인데, 기존 DOM에 접근한 후 '활용'하는 부분이 대체로 이해가 잘 안됐다. 머릿속에서 작동하지 않는 코드는 '내가 이해한 코드'라고 할 수 없다. 스스로에게 코드를 거듭 설명해 봐야겠다. 화이팅...!