230308_TIL (DOM)

썸네일은 룸메이트가 그려준 내 모습 ㅎㅎ ㅋㅋㅋ

🌱오늘 한 것

• DOM에 대해 학습했다
• 유효성 검사 과제를 끝냈다

🌱기억해야할 것

• 자바스크립트로 class를 추가(add) 또는 삭제(remove)해서 css 요소를 적용 또는 해제할 수 있다.

• getElement(s)By 보다는 querySelector 를 사용하자.

• innerHTML 보다는 textContent 를 사용하자.
  (innerHTML은 XSS Attack을 적용받을 수 있기 때문에! 위험하다!)

🌱더 알아볼 것

• DOM과 JavaScript의 차이에 대해 확실하게 설명할 수 있도록 하자
• createDocumentFragment에 대해 알아보고, 더 효율적으로 DOM을 제어하자
• HTML5 template tag 사용법
• 요소와 노드의 차이를 확실하게 알고 가자
• children과 childNodes의 차이
• remove와 removeChild의 차이
• 같은 요소를 appendChild 하면, 기존 요소를 복사할까?
• 좌표 정보 조회 방법 ➡ offsetTop...
• 크기 정보 조회 방법 ➡ offsetWidth...

🌱한 줄 감상

• 졸업 프로젝트는 맨땅에 해딩으로 바로 리액트만 조금 독학하고 시작한거라, getElementBy와 같은 메서드는 사용했지만, 그게 DOM을 다루는 건줄도 모르고 썼다. 당시에 이벤트 발생 시 다른 css 속성을 적용하고 싶어서 이것 저것 무작정 시도해서 굉장히 지저분한 코드를 짰던 기억이 있는데, JS와 DOM을 활용해서 이렇게 간단하고 깔끔하게 적용할 수 있는거였다니! 완전 유레카! 다.

• 부트캠프 약 한달 째, 앞으로 더 많은 코딩 지식을 쌓아 나갈 생각하니 기대가 되기 시작했다. 걱정도 많이 껴안은 채로 시작했던 부트캠프지만, 점점 더 많은걸 알아가고, 이미 알던 것도 더 확실히 다잡으며 꽤나(?) 성장한 내 모습을 보니 앞으로의 나날들이 더 기다려진다.
  매우 긍정적 변화! 딱 기다려라~~ 멋진 개발자가 되어주마!! ☆ﾐ(o*･ω･)ﾉ