안녕하세요~ 제로초님 다름이 아니라, DOM에서 event를 선택하는 문제에 관해 질문이 있어서 글을 남기게 됐습니다.   click이나 scroll, submit 같이 명확한 이벤트가 아니라면, 특정한 기능을 구현하기 위해 어떤 이벤트를 사용하는게 좋은지 모를 때가 많은데요.   예를 들어, input 태그의 input 이벤트를 사용하면, 유저가 타입하는 값의 변화를 매번 감지할 수 있는데, input 이벤트의 존재를 몰라서, keypress, keyup, keydown 이벤트를 사용해서 꾸역꾸역 그 기능을 구현한 경험이 있습니다. 그러다가 input 이벤트로 너무나 쉽게 원하는 기능이 구현되는 걸 보고 많이 허탈했는데요... 이 일을 계기로 궁금점이 하나 생겼습니다.   ------------------------- Q. 어떤 기능들은 여러 이벤트들을 조합해야만 구현할 수 있고, 어떤 기능은 특정 이벤트 하나만으로 모든 문제를 해결할 수있다보니 특정 기능을 구현할 때, 거기에 알맞는 최적의 이벤트를 알아내는 방법이 궁금합니다. 제가 모든 이벤트들을 잘 알고 있다면, 이런 고민을 할 필요가 없겠지만, 이벤트의 종류도 많고, 제가 존재하는 지도 몰랐던 이벤트가 알고보니, 그 이벤트를 사용하면, 일이 너무나 쉽게 해결되는 경우가 있다보니... 제로초님은 이 문제를 어떻게 접근하시는지 궁금합니다.   혼자 어떻게든, 제 고민에 대한 해답을 찾아보려고 했는데, 잘 나오지 않아서,  제로초님께 좋은 가르침 부탁드립니다. 감사합니다.        

중고급 과정을 듣고 나서 다시 한 번 정리하였습니다. const test = ["<ul>"]; for(var i = 1; i <= 10; i++) { test.push(`<li id=id${i}>id${i}</li>`); } test.push("</ul>"); document.body.innerHTML = test.join(""); 우선 코딩시간에 나와있는 배열 사용의 예제풀이 입니다.  텍스트로 덧붙이는 형태라 DOM 구조를 이해하는게 아닌 듯한 느낌이 들었습니다.  따라서 Tag요소부터 만들어 나가는 형태로 반복문을 진행해보았습니다.   const newUl = document.createElement('ul'); document.body.append(newUl); const Ul = document.querySelector('ul'); for(var i = 0; i < 10; i++) { const newLi = document.createElement('li'); Ul.append(newLi); const Li = document.querySelectorAll('li')[i]; Li.id = `id${i+1}`; Li.textContent = `id${i+1}`; } 보완할 요소가 더 있을 거 같은데 도통 떠오르질 않네요. 배열 구조로 한꺼번에 추가하는 형식으로 트리를 만들어가는 건 어려울 거 같아 질문드려요.  

1. dom 과 reflected 의 차이가 웹서버 응답값에서의 악성스크립트 유무 차이로 이해를 했습니다. 웹서버가 요청값을 받고 응답을 해줄 때 자바 스크립트로 작성된 dom api를 사용한 url일 경우 악성스크립트가 반영되지 않는게 맞나요? 2. reflected 공격시 url에서도 document.cookie 처럼 dom을 사용한거 아닌가요? 3. dom api를 사용한다는게 dom.php 처럼 자바스크립트만으로 작성된것을 이용한다는건 가요? 4. 3번이 맞다면 자바스크립트로만 작성된 php면 dom-based 기법을 사용할 수 있는 건가요?