220425

☂️KEEP

• 자바스크립트(Udemy The Web Developer Bootcamp 2022)
  • 자바스크립트로 이벤트를 다루는 방법에는 세 가지 정도 있지만, HTML 요소에 직접 on~ 속성을 부여해서 사용하는 것보다 이벤트 리스너를 이용하는 쪽이 코드를 반복하기도 수월하고 여러 요소에 같은 기능을 한 번에 적용하기도 편하다. 또한 on~ 속성은 하나 이상의 이벤트를 적용할 수 없지만, 이벤트 리스너는 가능하다.
  • 이벤트 리스너의 콜백 함수 뒤에 올 수 있는 옵션을 활용해 보자. 예를 들어 { once:true }라는 옵션을 적용하면 해당 이벤트 리스너는 최초 한 번만 실행되고 그 이후에는 자동으로 제거된다.
    
  • 예제 코드를 보기 전에 직접 만든 나의 코드. 완성된 코드와 원리는 비슷하지만 전문가는 확실히 다른 게, rdNum 부분을 함수로 빼내서 이벤트 리스너 콜백 함수의 길이를 줄인다! 생각지도 못한 부분이었는데, 어떤 기능을 하는 코드가 충분히 길어지면 따로 빼서 새로운 함수를 만드는 습관을 들이면 좋을 것 같다.
  • 이벤트와 this: 같은 기능을 하는 함수를 여러 요소에 적용하고 싶을 때, 예를 들어 어떤 버튼과 h2 모두 클릭하면 배경색과 텍스트 색상이 바뀌게 만들고 싶을 때는 언제나 요소를 참조하는 this를 사용할 수 있다.

            function changeColor(){
                this.style.backgroundColor = 코드;
                this.style.color = 코드;
            }

    위와 같은 함수를 만든 뒤, 필요한 곳에 버튼과 h2에 연결시키면 this가 알아서 해당 요소를 참조하므로 코드 반복을 줄일 수 있다.
  • 이벤트 리스너에 들어가는 콜백 함수는 Event 기반 객체를 유일한 매개변수로 받고, 아무 것도 반환하지 않는다.
  • input 이벤트는 키보드를 이용한 입력뿐만 아니라 클립보드에 있는 내용을 붙여넣을 때도 반응한다.
  • 이벤트 버블링을 막고 싶을 때는 event.stopPropagation을 사용한다.
  • 이벤트 위임을 이용하면 부모 요소에 이벤트를 연결하는 것만으로 이벤트 리스너가 추가된 시점에 페이지에 없던 요소(ex. 향후 추가되는 새로운 자식 요소)까지 해당 이벤트에 반응하게 만들 수 있다.

☂️TRY

• 대시보드 수정하기
  • Data Storage의 최근 업로드 사진이었나, 아무튼 같은 코드를 반복해서 사용하는 부분에 for of문을 한 번 써보자!