전체 글76 [JavaScript] window.requestAnimationFrame() 세상은 넓고 아직 갈길이 멀~~~~~~다는 것을^^,, #하지만 #가보자고 🤔 requestAnimationFrame? 자바스크립트의 webAPI에 있는 비동기 함수 브라우저에게 수행하기를 원하는 애니메이션을 알리고, 다음 리페인트가 진행되기 전 해당 애니메이션을 업데이트하는 함수를 호출하게 함. 리페인트 이전에 실행할 콜백을 인자로 받음. 리턴값은 콜백 리스트의 항목을 정의하는 고유한 요청 id인 long 정수 값. (MDN 참고) 이걸 왜 쓰는거지? 애니메이션을 위해 만들어진 ""비동기""함수 성능 최적화 (백그라운드 동작 및 비활성화 시 중지) 최대 1ms로 제한되며, 1초에 60번 동작 다수의 애니메이션도 각각 타이머값을 생성 및 참조하지 않고, 내부의 동일한 타이머를 참조함 requesetAni.. 2021. 10. 7. 부하 테스트, 스트레스 테스트 몽글 라이트 프로젝트에 대한 피드백을 받았다! 부하테스트를 했을 때, 일정 글자? 일정 갯수? 이상 입력하면 터진다고 말씀해주셔서 깜짝놀랐다. (이런게 바로 테스트의 필요성인가!) 생각해보면 정해진 맵을 달리라고 만들어둔 카트라이더에서도 역주행 하는 사람도 있고 맵을 뛰어넘는 사람도 있고 사각지대를 찾아서 숨바꼭질을 하는 사람도 있고... 창의적인 방법으로 서비스를 이용하는 사람들이 많은데, 이는 웹 또한 마찬가지라는 생각이 들었다. 나의 짧은 견식으로는 아직 커버하지 못한 케이스가 많다는 것을 다시 느꼈다......... 그래서 부하테스트, 스트레스테스트가 뭔지 알아보는 시간! 🤔 부하테스트?? 어느정도 성능이 완성이 되면, 해당 서비스가 얼마나 많은 동시 사용자를 견디는지 테스트 하는 것. 이 서비스.. 2021. 10. 5. [백준] 1647번 : 도시 분할 계획 https://www.acmicpc.net/problem/1647 1647번: 도시 분할 계획 첫째 줄에 집의 개수 N, 길의 개수 M이 주어진다. N은 2이상 100,000이하인 정수이고, M은 1이상 1,000,000이하인 정수이다. 그 다음 줄부터 M줄에 걸쳐 길의 정보가 A B C 세 개의 정수로 주어지는데 A번 www.acmicpc.net 전체 그래프를 2개로 나누는데 그 나눠진 그래프 안에서는 서로 다 연결이 돼 있어야 한다는 얘기..... (근데 대체 원숭이🙊 얘기는 왜 나온거지???) 📖접근 방법 크루스칼 알고리즘을 이용해서 최소신장 트리를 하나 만듬 그 중에서 가장 비싼 간선을 하나 없앤다 (그래야 최소 비용이 되니까!) 그러면 자연스럽게 그래프가 2개로 분리된다! 그리고! import .. 2021. 9. 25. [JavaScript] Babel 🤔 Babel?? 바벨 = 자바스크립트 컴파일러 (바벨 공홈에 그렇게 써있다!) ES6+ 이상의 최신 ECMAScript문법을 이전 문법(~ES5)으로 변환 🤔 그래서 그걸 왜 쓰는데? 우리의 영원한 친구(^^) IE와... IE 말고도 최신 문법을 지원하지않는 브라우저가 있을 수 있기 때문에! 모든 실행환경에서 js가 돌아가도록 하는 느낌이다. // Babel Input: ES2015 arrow function [1, 2, 3].map(n => n + 1); // Babel Output: ES5 equivalent [1, 2, 3].map(function(n) { return n + 1; }); 😎 바벨을 써보자 yarn add -D @babel/core @babel/cli \ @babel/regist.. 2021. 9. 25. [JavaScript] 이벤트 위임(Event delegation) 📃 이어지는 글 이벤트 플로우(Event Flow) 이벤트 버블링(Event Bubbling) + e.stopPropagation() 이벤트 캡쳐링(Event Capturing) 이벤트 위임(Event delegation )← Now ! 🤔 이벤트 위임이란? 하위 요소에 각각 이벤트를 붙이지 않고, 상위요소에서 하위 요소의 이벤트를 컨트롤 하는 방식 컨테이너에 (아래 예시에서는 ul) 하나의 핸들러를 할당함 핸들러의 e.target 을 사용해서 이벤트가 발생한 요소가 어디인지 알아냄 원하는 요소에서 이벤트가 발생한 것이 확인되면 이벤트를 핸들링함 (아래 예시에서는 tagName으로 확인함) li 1 li 2 li 3 const ul = document.querySelector("ul"); ul.addEv.. 2021. 9. 23. 이전 1 2 3 4 5 6 ··· 16 다음
