지식루프

innerHTML를 사용하면 왜 위험할까요? 사용자로부터 입력값을 받아서 그 값을 innerHTML로 처리하면, 입력값에 악의적인 코드가 포함되어 있을 경우 사이트의 내부 코드나 동작이 바뀌거나 손상될 수 있기 때문입니다. 좀 더 구체적으로 풀어서 설명해볼게요.상황 설명사용자 입력값: 예를 들어, 웹사이트에 댓글 기능이 있다고 가정해봅시다. 사용자가 댓글 입력란에 텍스트를 작성하고 제출하면, 서버를 거쳐 클라이언트(브라우저)에 그 내용이 표시됩니다.innerHTML 사용: 그 댓글을 화면에 띄우기 위해 같은 요소에 innerHTML로 삽입한다고 해보면:const userInput = document.getElementById("user-comment").value; *// 사용자 입력값* documen..

❌ arguments는 배열이 아니므로, 일반적인 배열 메서드(map, forEach, filter 등)를 직접 사용할 수 없다.✅ 하지만 배열로 변환하면 사용할 수 있다. 1️⃣ arguments는 배열이 아닌 유사 배열 객체 (Array-like Object) 📌 즉, arguments는 length 속성이 있고, 인덱스를 통해 접근 가능하지만, 배열(Array)이 아니다!  2️⃣ 배열 메서드 사용 불가능한 예시  📌 에러 발생! → arguments.map is not a function이유: arguments는 배열이 아니라서 map()을 직접 사용할 수 없음. 3️⃣ arguments를 배열로 변환하는 방법 (배열 메서드 사용 가능하게 만들기)✅ arguments를 배열로 변환하면 map,..

이벤트 핸들러를 등록하는 2가지 방법 자바스크립트로 해당 DOM 객체의 onclick 프로퍼티에 등록하기 HTML 태그의 onclick 속성에 바로 표시하기

자바스크립트에서 DOM(Document Object Model)을 조작할 때 자주 사용하는 메서드인 document.querySelector와 document.getElementById를 설명하고, 두 메서드의 차이점을 정리해볼게요.document.querySelector란?document.querySelector는 CSS 선택자(selector)를 사용해서 DOM에서 요소를 선택하는 메서드예요. 선택자에 맞는 첫 번째 요소를 반환합니다.사용법 const element = document.querySelector('선택자');선택자: CSS에서 사용하는 선택자 문자열 (예: '#id', '.class', 'tag', 'div > p' 등).반환값: 선택자에 맞는 첫 번째 요소(Element 객체)를 반환..

자바스크립트 자료형 정리 1. 기본형 (Primitive Type)문자열(String): let str = "Hello";숫자(Number): let num = 42; (정수, 실수 구분 없음, NaN, Infinity 포함)불리언(Boolean): let isTrue = true; (true / false)null: let empty = null; (의도적 비어있는 값)undefined: let notDefined; (값이 할당되지 않음)심볼(Symbol): let unique = Symbol('id'); (유일한 값 생성)BigInt: let bigNum = 123n; (정수 한계를 초과하는 큰 수)2. 객체형 (Object Type)객체(Object): { key: value } 형태 let obj..