TIL - 21.07.06 👨‍💻

좌표

자바스크립트에서 좌표는 두개의 기준을 가지고 있다.
창 기준 좌표와 문서 기준 좌표가 그것이다.

• 창 기준 좌표(상대 위치)
  스크롤에 따라 움직이는 가변적인 좌표이다.
  창 기준 좌표는 clientX, clientY로 표기한다.
  position:fixed 속성을 사용할때와 같이 창(window) 기준으로 왼쪽 위 모서리를 기준으로 좌표를 계산하며 position:fixed와 함께 사용할 때 시너지가 좋다.

• 문서 기준 좌표(절대 위치)
  스크롤 하더라도 변하지 않는, 문서 기준의 좌표이다.
  문서 기준 좌표의 경우는 좌표를 pageX, pageY로 표기한다.
  position:absolute와 유사하게 문서 최상단(root)에서 문서 맨 위 왼쪽 모서리를 기준으로 좌표를 계산한다.

스크롤 할때 pageY는 변하지 않지만 clientY는 창 상단과의 거리가 달라지기에 값이 변한다.

고로 page 값과 client값의 관계는 다음과 같이 표현할 수 있다.

pageX = clientX + 세로 스크롤한 거리
pageY = clientY + 가로 스크롤한 거리

---

element.getBoundingClientRect()

getBoundingClientRect 메소드는 요소를 감싸는 가장 작은 네모의 창 기준 좌표를 객체 형태로 반환한다.
즉, 상대위치를 구하는 메소드이다.

반환되는 값의 프로퍼티 키로는 x, y, width, height, left, right, top, bottom이 있다.

width와 height는 키 값에서도 알 수 있듯, 컨텐츠(요소)의 높이와 너비를 뜻한다.

x와 y는 요소의 좌측 모서리 윗쪽 끝이 각각 창의 왼쪽과 윗쪽 면부터 얼마만큼 떨어져 있는지를 의미한다.

그리고 left, right와 top, bottom은 파생 프로퍼티인데 이는 width와 heigth가 음수가 되는 몇몇 상황에서 유용하게 사용된다.

left = x ; 창의 좌측에서 컨텐츠(요소) 좌측까지
right = x + width ; 창의 좌측에서 컨텐츠 우측까지
top = y ; 창의 윗 모서리에서 컨텐츠 윗 부분까지
bottom = y + height ; 창의 윗 모서리에서 컨텐츠 아랫 부분까지

---

element.offset API

offset API는 요소의 상위 요소에 position: relative 속성이 적용된 요소가 없을때 요소의 절대 좌표를 숫자열로 반환하는 메소드이다.

offset API는 element.offsetTop, element.offsetLeft, element.offsetWidth, element.offsetHeight 가 있다.

position: relative 속성이 없어야한다고 했는데 만약 상위 노드에 해당 속성이 적용된 노드A가 있다면 그 노드 A 기준으로 상대적인 좌표가 반환되기 때문이다.

오늘 공부하며 짚은 포인트

textContent vs innerHTML(innerText)

이 두 메소드를 비교하며 innerHTML이 공격에 취약하다고만 적어놓고 왜 취약한지는 모호하게 적어놨었다. 나도 명확하게 몰랐거든
오늘 공부하며 찾아보니 textContent와 innerHTML은 요소 내부 텍스트에 접근할 수 있는건 같지만 innerHTML을 사용하면 HTML 태그도 인식시킬 수 있기에 <script> 태그로 공격 받을 여지가 있는 취약점이 생기는거 였다.

innerText의 경우 보안 취약점은 없지만 태그를 읽을 수 있는 점은 같고 이로 인해 파싱 속도가 느려서 IE 환경이 아니고서야 사용하기 적합하지 않다.

다만 스타일이 적용된 텍스트를 읽어와야 할땐 유용하다.

닷 노테이션으로 이벤트 실행 vs addEventListener 메소드 사용하기

사실 객체 실행에서도 그렇고 닷 노테이션으로 실행하면 보기 편하고 쓰기 쉬운 것 말고 장점은 없는 듯 하다.

addEventListener 같은 경우는 여러 개의 핸들러를 다룰 수 있는 장점이 있고 캡쳐 페이스 실행여부를 선택할 수 있다.

캡쳐 페이즈는 요기서 확인 할 수 있다.

GOOD 😉

오늘은 좌표, 돔 이벤트, 정규 표현식을 익혔다.
오늘 OiMW 많이 썼다.

BAD 😥

고차함수 예습을 전혀 못했다.

TO DO 🔥

• 고차함수
• react
• node.js

Retrospect 🧐

오늘 너무 정신없이 시간을 보내서 시간 가는줄도 모르고 몰두했다.

포스팅도 기세가 붙으니 재밌어서 폭주해서 포스팅하는 내 모습을 볼 수 있었다.

뭐 좋은게 좋은거 아닌가
예습할 시간 없어진건 안좋음

Reference 🙇

https://mommoo.tistory.com/85
https://poiemaweb.com/
https://ko.javascript.info/