게시 됨 업데이트 됨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를 쓰면될 것 같다

참고

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

first-child vs first-of-type

The pseudo class “:first-child” is potentially unsafe when doing server-side rendering. Try changing it to “:first-of-type”.
The pseudo class “:nth-child” is potentially unsafe when doing server-side rendering. Try changing it to “:nth-of-type”.

  • first-child를 사용하면 콘솔에 에러가 찍힌다
  • 그러면서 first-of-type을 사용하라고 알린다
  • 이참에 둘의 차이를 알아보았다
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
  h1:first-child {
    color: red;
  }
  h4:first-of-type {
    color: green;
  }
</style>
<body>
  <div>
    <h1>first-child로 빨간색이 된다</h1>
    <h4>first-of-type으로 인해 초록색이 된다</h4>
  </div>
  <hr />
  <div>
    <h4>first-of-type으로 인해 초록색이 된다</h4>
    <h1>효과를 안 받는다</h1>
  </div>
</body>

참고

카테고리

아카이브

광고

×