TIL-20220728

정적 메서드(static)

클래스의 정적 메서드를 만들 때 static 키워드를 사용한다.

class ClassWithStaticMethod {
  static staticProperty = 'someValue';
  static staticMethod() {
    return 'static method has been called.';
  }
  static {
    console.log('Class static initialization block called');
  }
}

console.log(ClassWithStaticMethod.staticProperty);
// output: "someValue"
console.log(ClassWithStaticMethod.staticMethod());
// output: "static method has been called."

정적 메서드는 클래스의 인스턴스 없이 호출이 가능하며 클래스가 인스턴스화되면 호출할 수 없다. 정적 메서드는 종종 어플리케이션의 유틸리티 함수를 만드는데 사용된다.

<참조>
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/static

자바스크립트로 DOM 요소 숨기기

style.visibility 속성을 사용하여 HTML 요소 숨기기 / 표시

style.visibility 속성을 hidden으로 설정하면 대상 요소가 숨겨지지만 흐름에서 제거되지는 않는다. 따라서 대상 요소가 렌더링되지만 표시되지는 않는다.(보이지만 않고 해당 공간은 존재함. width와 height값을 주었다면 그만큼 공간은 존재하게 됨.)
속성을 다시 visible로 설정하여 대상 요소를 다시 표시 할 수 있다.

document.getElementById(id).style.visibility = "visible"; // show
document.getElementById(id).style.visibility = "hidden"; // hide

style.display 속성을 사용하여 HTML 요소 숨기기 / 표시

style.display 속성을 none으로 설정하면 페이지의 정상적인 흐름에서 대상 요소가 제거되고 나머지 요소가 해당 공간을 차지할 수 있다.(아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨.) 대상 요소는 페이지에 표시되지 않지만 DOM을 통해 여전히 상호 작용할 수 있다. 모든 하위 항목이 영향을 받으며 상위 요소처럼 표시되지 않는다. 속성을 block으로 설정하여 대상 요소를 다시 표시 할 수 있다. block은 요소에 여백을 추가하기 때문에 display를 ''로 설정하는 것이 좋다.

document.getElementById(id).style.display = 'none'; // hide
document.getElementById(id).style.display = ''; // show

<참조>
https://www.delftstack.com/ko/howto/javascript/javascript-hide-show-elements/
https://unabated.tistory.com/entry/displaynone-%EA%B3%BC-visibilityhidden-%EC%9D%98-%EC%B0%A8%EC%9D%B4