시작

요즘은 TIL 쓰는거도 상당히 피곤하다고 느낀다. 자습을 하고 쓰려고 하니 더 피곤함을 느끼는 것 같기도 하고. 어제 밤 늦게 런닝을 다녀와서 그런지 조금은 피곤함을 느끼는 하루였다. 교육을 시작하고 DOM을 접하니 피곤함이 가시기는 훼이크고 더 피곤했다. (피곤해서 제목도 TIL을 까먹고 안썼다가 월요일에 확인했다.)

🔥피로 회복에는 페어

오전엔 피로 때문에 뿌연 느낌으로 받아드렸다. 용어가 잔뜩 나와서 뭔 소린지.. 거의 반쯤 기절한 상태로 꾸역꾸역 머릿속에 넣었다.
오후가 되고 페어로 진행했는데 이 분은 나보다 더 모르시는 분이셨다. 심지어 오전에 진행했던 이론부분조차 실습 환경 문제로 진행을 못하셨다. 😭 그러면서 하나도 모르겠다고 하시며 조금 힘든 기색을 보이셨는데 그러자 내 정신이 돌아오는 느낌이 들었다. 내가 누군가를 이끌어야겠다고 생각이 드는 순간 피로감으로 떨어졌던 컨디션이 회복된건가? 서버 엔지니어 시절 중요한 서비스가 복구가 안돼서 절망에 찬 담당자의 목소리를 들을 때, 위기때마다 발휘하던 엄청난 집중력과 판단력이 돌아왔다. 한 번 해봅시다!

스프린트 전에 우선 개념부터 잡았다. 2시간을 투자해서 오전에 진행한 부분을 같이 진행하면서 개념을 잡아드렸다. 실습 환경을 해결하고 이론 부분을 한줄씩 차분하게 읽으면서 개념을 잡기 시작하자 나머지 부분도 빠르게 익히셨다. 나도 정확한 용어를 쓰면서 구조부터 자세히 설명하다보니 애매하던 개념이 또렷해짐을 느꼈다.

DOM은 Document 객체에게 할당받은 엘리먼트들이 객체인지, 속성인지, 메소드인지 구별하자 일사천리로 익히기 시작했다. 눈에 익고 익숙해지면 해결될 문제였던 것이다. 구조에 대한 개념을 잡자 스프린트는 싱겁게 끝났다. DOM 다루는 구조를 익히니까 나머지는 면발이 딸려서 올라가듯이 후루룩 들어온다.
DOM의 모든걸 익힌건 아니지만 충분히 익숙해졌고 상세한 부분은 주말을 이용해서 마저 매꾸면 되겠지.

스프린트는 오늘 그냥 다 해버렸다. 추가 목표로 정규표현식 사용했는데 오랜만에 보니 반가웠다. 미리 만들어둔 정규표현식 함수를 조금 수정해서 맨 첫자리는 무조건 알파벳이 오는지 확인하는 함수를 만들었다. 그 과정에서 기본적인 DOM 개념은 확실하게 잡혔다. 좋았어! 😆

DOM 이해하기

• DOM의 개념을 이해할 수 있다.
• DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다.
• HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다.
• <script> 태그가 적용되는 위치에 따라서 실행 결과가 달라질 수 있음을 이해할 수 있다.

DOM으로 HTML 조작하기

• DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.
  • createElement - CREATE
  • querySelector, querySelectorAll - READ
  • textContent, id, classList, setAttribute - UPDATE
  • remove, removeChild, innerHTML = "" , textContent = "" - DELETE
  • appendChild - APPEND
  • innerHTML과 textContent의 차이

DOM 추가 목표

• createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다.
• HTML5 template tag 사용법을 이해할 수 있다.
• element와 node의 차이를 이해할 수 있다.
• children과 childNodes의 차이를 이해할 수 있다.
• remove와 removeChild의 차이를 이해할 수 있다.
• 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까?
• 좌표 정보 조회를 할 수 있다. - offsetTop...
• 크기 정보 조회를 할 수 있다. - offsetWidth...