til38 부하 테스트, 스트레스 테스트 몽글 라이트 프로젝트에 대한 피드백을 받았다! 부하테스트를 했을 때, 일정 글자? 일정 갯수? 이상 입력하면 터진다고 말씀해주셔서 깜짝놀랐다. (이런게 바로 테스트의 필요성인가!) 생각해보면 정해진 맵을 달리라고 만들어둔 카트라이더에서도 역주행 하는 사람도 있고 맵을 뛰어넘는 사람도 있고 사각지대를 찾아서 숨바꼭질을 하는 사람도 있고... 창의적인 방법으로 서비스를 이용하는 사람들이 많은데, 이는 웹 또한 마찬가지라는 생각이 들었다. 나의 짧은 견식으로는 아직 커버하지 못한 케이스가 많다는 것을 다시 느꼈다......... 그래서 부하테스트, 스트레스테스트가 뭔지 알아보는 시간! 🤔 부하테스트?? 어느정도 성능이 완성이 되면, 해당 서비스가 얼마나 많은 동시 사용자를 견디는지 테스트 하는 것. 이 서비스.. 2021. 10. 5. [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. [JavaScript] 이벤트 캡쳐링(Event Capturing) 📃 이어지는 글 이벤트 플로우(Event Flow) 이벤트 버블링(Event Bubbling) + e.stopPropagation() 이벤트 캡쳐링(Event Capturing) ← Now ! 이벤트 위임(Event delegation) 🤔 캡쳐링이란? 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식 상위요소 → 하위요소 이벤트 전달이 진행 됨 (propagate down) 클릭 const html = document.documentElement; const body = document.body; const div = document.querySelector("div"); div.addEventListener("click", function () { console.log("div"); }); b.. 2021. 9. 23. [JavaScript] 이벤트 버블링(Event Bubbling) + e.stopPropagation() 📃 이어지는 글 이벤트 플로우(Event Flow) 이벤트 버블링(Event Bubbling) + e.stopPropagation() ← Now ! 이벤트 캡쳐링(Event Capturing) 이벤트 위임(Event delegation) 🤔 버블링이란? 특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성 (propagate up) 클릭 const html = document.documentElement; const body = document.body; const div = document.querySelector("div"); div.addEventListener("click", function () { console.log("div"); }); body.a.. 2021. 9. 17. 이전 1 2 3 4 5 6 ··· 8 다음
