this & 화살표 함수
·
Frontend/JS
2025.03.12 - [Frontend/JS] - 화살표 함수 & 비동기 처리 에서 간략하게 화살표 함수를 설명했다.화살표 함수에서 `this` 키워드를 사용하는 방법을 작성하려 한다.JS의 this화살표 함수와 전통적인 함수는 서로 다른  `this` 값이 바인딩될 수 있다.JS에서의 this는 메서드, 함수가 호출될 때마다 현재 호출중인 메서드를 보유한 객체가 this로 연결됨만일, 현재 호출 중인 메서드를 보유한 객체가 없다면, 전역 객체 (Global Obj, window)가 연결된다.let obj = { result: 0 };obj.add = function (x, y) { this.result = x + y;};obj.add(3, 4);console.log(obj); // { result:..
DOM (1)
·
Frontend/JS
문서 객체 모델(DOM, Document Object Model)?웹 페이지 (HTML, XML)의 콘텐츠, 구조 그리고 스타일 요소를 구조화 시켜 표현하여프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 `인터페이스`문서 객체: HTML 태그를 JS에서 사용할 수 있는 `객체`로 만든 것DOM은 어떻게 생성되고 어떻게 보여지는가DOM은 HTML 문서를 계층적 구조 & 정보로 표현하며, 이를 제어할 수 있는 트리 자료구조임∴  HTML DOM 혹은 HTML DOM Tree로 칭함트리 자료구조는 노드들의 `계층 구조`로 이루어짐따라서 부모-자식 & 형제 관계를 표현하는 비선형적 자료구조를 나타냄 hello world! 노드 종류설명Document NodeDOM의..
[HTML] Attribute vs Property
·
Dev Trivia
Attribute(HTML 속성)정적 값: HTML 속성은 문서의 초기 상태에서 정의된 값을 의미HTML 태그에 정의된 값: HTML에서 요소가 정의될 때, 태그 내에서 설정된 값을 `attribute`라고 함DOM에 반영되기 전의 상태: HTML 속성은 웹 페이지가 로드될 때 초기값으로 설정됨`value`는 `input` 요소의 속성, value="John Doe"는 페이지가 처음으로 로드될 때 설정된 속성 값이다.Property (DOM 속성)동적 값: DOM 속성은 JS 코드에서 변경할 수 있는 값을 의미, JS 코드에 의해 변경될 수 있음DOM 객체에 반영된 값: HTML 문서에서 설정된 초기 값을 DOM 객체로 가져와서 JS로 제어const input = document.getElementByI..