게시 됨 업데이트 됨web1분안에 읽기 (약 122 단어)

innerText vs textContent

  • textContext는 script, style 요소를 포함
  • innerText는 사람이 읽을 수 있는 요소만

innerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생합니다. (리플로우 계산은 비싸므로 가능하면 피해야 합니다)

  • 라고한다. 아직 무슨 느낌인지 잘 모르겠다.

참고

 게시 됨 업데이트 됨web몇 초안에 읽기 (약 107 단어)

IntersectionObserver 화면에 특정 엘리먼트가 보이면?!

  • 뷰포트에 들어오는 것을 감지할 수 있다
example.ts
1
2
3
4
5
6
7
8
// 검색창 인풋 오토포커스

const observer = new IntersectionObserver((entries) => {
  if (!entries[0].intersectionRatio) return;
  document.querySelector('input.searchbox-input').focus();
});

observer.observe(document.querySelector('input.searchbox-input'));
  • 위 코드는 검색창을 켜면 인풋에 오토포커스 되도록하는 코드이다

참고

 게시 됨 업데이트 됨web1분안에 읽기 (약 124 단어)

encodeuricomponent vs encodeuri

mdn example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var set1 = ';,/?:@&=+$'; // Reserved Characters
var set2 = "-_.!~*'()"; // Unescaped Characters
var set3 = '#'; // Number Sign
var set4 = 'ABC abc 123'; // Alphanumeric Characters + Space

console.log(encodeURI(set1)); // ;,/?:@&=+$
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123 (the space gets encoded as %20)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (the space gets encoded as %20)
  • 새롭게 url을 생성하는 과정에서는 encodeURIComponent를 쓰면될 것 같다

참고

카테고리

아카이브

광고

×