개발 기술 블로그

이벤트 전파 이벤트 전파 (event propagation)는 이벤트가 다른 요소에게 전이되는 것을 의미합니다 캡쳐링(capturing): 이벤트가 상위요소에서 하위요소로 전파 타깃 단계(target phase): 이벤트가 타깃에 도달 버블링(bubbling): 이벤트가 하위요소에서 상위요소로 전파 이벤트 캡처링(Event Capturing) 캡처링을 사용하려면, addEventListener 함수에 세 번째 인자로 true 값을 주어야 합니다. 예를 들어: element.addEventListener('click', function(event) { // 핸들러 로직 }, true); // 캡처링 단계에서 이벤트를 처리하기 위해 true 값을 설정 이벤트 버블링(Event Bubbling) 버블링을 막으..

​ 마우스 이벤트 click – 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때(터치스크린이 있는 장치에선 탭 했을 때) 발생합니다. dblclick – 요소 위에서 마우스 왼쪽 버튼을 두번 빠르게 눌렀을 때 발생합니다. contextmenu – 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 발생합니다. mouseover와 mouseup – 마우스 커서를 요소 위로 움직였을 때, 커서가 요소 밖으로 움직였을 때 발생합니다. mouseleave과 mouseout – 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 때, 마우스 버튼을 뗄 때 발생합니다. mousemove – 마우스를 움직일 때 발생합니다 키보드 이벤트 keydown과 keyup – 사용자가 키보드 버튼을 누르거나 뗄 때 발생합니다. 폼 요소 이벤트 s..

어트리뷰트(attribute) HTML 요소는 여러 개의 속성(어트리뷰트)을 가질 수 있습니다. 문서가 파싱될 때 HTML 요소의 속성은 어트리뷰트 노드로 변환되어 요소 노드의 형제 노드로 추가됩니다. 이 때 속성 하나당 하나의 어트리뷰트 노드가 생성됩니다. 즉 위 예시의 경우 3개의 어트리뷰트 노드가 생성됩니다. 모든 어트리뷰트 노드의 참조는 유사 배열 객체인 NamedNodeMap 객체에 담겨서 요소 노드의 attributes 프로퍼티에 저장됩니다. HTML 속성 조작하기 속성 추가, 변경하기 setAttribute() 메서드는 요소노드의 속성값을 추가하거나 변경할 때 사용합니다. 첫번째 인자 name에 속성이름 (ex: src)을 넣고 두번째 인자 value에 추가하거나 변경할 속성값을 전달합니다...

텍스트, HTML 조작 태그 생성 및 추가 태그 중간 삽입하기 태그 교체 및 삭제

DOM을 이용해서 자바스크립트, css, html을 이어준다 css 선택자로 태그 가져오기. 자식 부모형제 노드 탐색 및 getElementById, querySelector

// 배열 데이터 정렬하기 const nums = [6, 11, 3, 7, 9, 10, 2, 4, 1] console.log(nums); nums.sort((a, b) => a - b); // 오름차 console.log(nums); nums.sort((a, b) => b - a); // 내림차 console.log(nums); //nums.reverse(); // 내림차 //console.log(nums); 숫자를 정렬하는 법은 비교적 문자에 비해 간단하다. 한줄로 활용하능하다. userList.sort((a, b) => { if (a.userName > b.userName) return -1; else if (a.userName < b.userName) return -1; else return 0; ..

// 4. **각 도시별로 발생한 총 거래액을 객체 형태로 매핑해주세요. // 예를 들어, `{서울: 총거래액, 부산: 총거래액}`과 같은 형태입니다.** console.log('============================='); const totalByCity = traders.reduce((totalByCity, trs) => { const city = trs.trader.city; totalByCity[city] = (totalByCity[city] || 0) + trs.value; return totalByCity; }, {}); console.log(totalByCity); traders에서 reduce를 이용해 돌려준다 돌리는과정에 trs.trader.city를 다쓰기 귀찮으니 city..

리듀스는 너무 어려웠다 지피티랑 얘기를 나누고 이해를 했다 대화내용 적는게 제일 좋은듯 네, 맞습니다. reduce 함수를 사용하여 최댓값을 찾는 방법은 정확히 그렇습니다. reduce 함수를 사용하면 주어진 배열의 모든 요소를 반복하면서 원하는 값을 누적하고 최종 결과를 반환할 수 있습니다. 여기서 사용된 로직은 다음과 같습니다: reduce 함수를 호출하면서 초기값으로 가장 큰 값을 가진 거래자 객체(max)를 설정합니다. 배열의 각 요소를 순회하면서 현재 요소(trs)의 거래액을 최댓값과 비교합니다. 만약 현재 요소의 거래액이 최댓값보다 크다면, 최댓값을 현재 요소로 업데이트합니다. 모든 요소를 순회한 후에는 가장 큰 거래액을 가진 거래자의 정보가 최종적으로 max에 저장되게 됩니다. 이렇게 하면 ..

const userList = [ { account: 'abc1234', userName: '대길이', job: '추노', address: '서울', hobbys: ['수영', '축구', '테니스'], salary: 5400000, age: 35, }, { account: 'banana', userName: '빠나나', job: '과일', address: '서울', hobbys: ['푸드파이팅', '테니스'], salary: 9700000, age: 18, }, { account: 'park1234', userName: '주차왕', job: '발렛파킹', address: '경기', hobbys: ['족구', '축구', '테니스', '영화감상'], salary: 3900000, age: 56, }, { a..

콜백이란?? 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 하고, 매개 변수를 통해 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고 한다. 콜백의 핵심 : 동작을 파라미터화한다 if문에 들어있는 조건식들만 파라미터로 전달한다면 쉽게 해결 자바스크립트의 함수는 일급 객체라서 함수에게 다른 코드를 전달하는 것이 가능. 단, 전달할 코드가 함수에 묶여있어야 한다는게 포인트 // 어떤 계산을 하는 함수 function operate(param) { console.log(`param = ${param}`); const x = param(10, 20); console.log('계산기 작동!!'); const n1 = 10, n2 =20; const result = param(n1,n2..