Javascript (12) 썸네일형 리스트형 Javascript: MutaionObserver # DOM 변경 감지 input, button 등 에서 addEventListener를 통해 이벤트를 감지할 수 있는 것처럼 MutationObserver class를 사용하여HTML 내의 구성(attribute, text, childList) 등이 바뀐 경우, 이를 감지하여 이에 따른 반응 로직을 구현할 수 있다. 실제 사용 코드const searchedBlockMemberUl = document.querySelector('#searchedBlockMemberUl');const observer = new MutationObserver((mutationsList) => { const blockUserInput = document.querySelector('#blockUser'); for (const mutation.. Javascript: 클라이언트 단에서의 대용량 데이터 처리 성능 이슈 개선 # 비동기처리 # Chunk # requestAnimationFrame (rAF) 브라우저에서 request를 통해서 데이터를 받아와서 브라우저에 나타내는 과정에서데이터가 굉장히 큰 경우 병목현상이 발생했다.이 병목현상을 개선하는 예제를 정리 사용 예제 인풋창에서 텍스트를 입력하면 해당 텍스트를 포함하는 유저를 실시간 검색한다. 병목 발생 지점 1) request - SQL - response 과정에서 SQL문 자체가 오래걸림 2) javascript data handling 1)을 통해 받아온 데이터가 크다보니, javascript를 통해 UI에 데이터를 삽입하는 과정에서 병목 발생 해결방법 1) request 비동기 처리 - Ajax를 활용해서 request를 하고 있는데, request 및, response 처리 과정을 Promise를 사용하여 비동기처리로 변.. Javascript: arrow function Javascript에서 일반적으로 function으로 선언하는 대신 = () => 과 같은식으로 함수를 대체하는 방식이 있다. 함수를 표현하는 방식을 이렇게 쓰면 어떤 차이가 있을까?- 함수 인자 갯수가 하나면 () 생략 가능- 한줄 표현 가능하면 중괄호, return 생략 가능 위와 같이 생략 가능하고 간략하게 표현이 가능하다. 그런데 사실 arrow function이 갖는 의미는 생략 기능보다는함수 내에서의 this의 의미가, 기존 함수 선언 방식과 다르다는 것이다. 기존 function에서는 this가 function마다 새롭게 정의가 된다. function을 갖는 object를 가르키는 등..그런데 arrow function은, arrow function 밖에서 사용하는 this를 그대로 가져와서.. Javascript: Animation 백그라운드 동작 중지 # requestAnimationFrame Javascript로 무한슬라이드를 구현하는 과정에서 setInterval()을 사용했습니다 브라우저를 켜놓고 보면 아주 작동이 잘합니다. 그런데 다른 브라우저 탭을 열어놓고 다시 들어가보니 다음과 같은 상황이 발생... setInterval()함수를 통해 불려진 콜백이 계속 쌓여있다가 브라우저로 다시 돌아오는 순간 한번에 실행된다. 굳이 이런 상황을 원하는게 아니기에 이를 해결하기 위해 찾아본 결과, requestAnimationFrame API를 이용하면 해결이 가능하다. 자세한 내용과 장점 등은 아래의 블로그 주인분께서 정말 자세히 설명. https://inpa.tistory.com/entry/%F0%9F%8C%90-requestAnimationFrame-%EA%B0%80%EC%9D%B4%EB%93.. Javascript: slide # 무한 슬라이드 Javascript를 이용해서 무한 슬라이드를 구현해보자 HTML CSS .rank-banner { position: relative; overflow: hidden; } .slide-content { position: absolute; } Javascript const slideContainer = document.querySelector(".slide-content"); // slide 틀을 잡아줄 container const containerLength = slideContainer.children.length; const slideItemWidth = slideContainer.children[0].offsetWidth; let slideCount = 0; function slideBanner().. Javascript: Parsing HTML #select #checkbox #radio Select HTML 영수증 1 영수증 2 영수증 3 Javascript * id 값으로 가져오기 let receipt_type = document.querySelector('select#receipt option:checked').value; * name 값으로 가져오기 let receipt_type = document.querySelector('select[name="receipt"] option:checked').value; Radio HTML Javascript let pay_method = document.querySelector('input[type="radio"][name="payment"]:checked').value; Checkbox HTML Part Time Full Time Javas.. Javascript: new Date # 날짜 1) 원하는 형태로 조정 const now = new Date(); // create a new Date object with the current date and time const year = now.getFullYear(); const month = (now.getMonth() + 1).toString().padStart(2, '0'); // add 1 to the month (since getMonth() returns a zero-based index) and pad with leading zero if necessary const day = now.getDate().toString().padStart(2, '0'); // pad with leading zero if necessary const.. javascript: event.target vs event.currentTarget html에 onclick에 event 변수를 넣어서 함수를 달아주고, event.target으로 클릭한 태그를 집어내는게 용이합니다. 그런데 경우에 따라서 onclick 에 함수를 달아준 하위 태그를 클릭하더라도 onclick을 달아준 함수를 event의 target으로 해야할 경우가 있는데 event.target은 event 함수가 달린 태그와 하위 태그에 대해서 클릭한 곳을 정확하게 집어냅니다. 정확히 클릭한 곳을 원하는게 아니라 event 함수를 달아놓은 태그를 target으로 하고 싶을 때 event.currentTarget 을 사용하면 됩니다. 아래 예제를 살펴보겠습니다.(보기 편하게 style attr은 지워줬습니다.) HTML (도로명)도로1 (지번)지번1 Javascript function.. 이전 1 2 다음
