분류 전체보기

[ JS ] DOM에 대한 총 정리!

📙Window 객체 window 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체입니다. 자바스크립트 코드 어느 곳에서나 항상 접근할 수 있기 때문에 전역 객체 [ Global Object] 라고 부릅니다. 어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체 내부의 것 이기 때문에 window.을 생략하고 사용이 가능합니다! 🤷‍♂️DOM 이란? DOM 은 Document Object Model 의 약자로서 '문서 객체 모델' 이라고 부릅니다. 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것 으로 생각하면 됩니다. 이때, 각 객체를 노트 [ Node ] 라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분됩니다. 🏕️ DOM 트리 HTML의 계층 구조는 D..

[ JS ] JS의 TDZ란 무엇일까?

👨‍🎓 TDZ는 무엇일까? TDZ ( Temporal Dead Zone )는 해석하면 "일시적 사각지대" 이다. 위 아래 코드를 보면서 어떤 부분에서 에러가 일어나는지 살펴보자! 첫 번째 코드 [ 인스턴스 생성 후 클래스 선언 ] const myCat = new cat('mimi') class cat { constructor(name) { this.name = name; } } 두 번째 코드 [ 함수 호출 후 함수 선언] hello('Shin') function hello (name) { return `Hello ${name} :)` } 위 두개의 코드를 실행해보면 두 번째 코드는 정상적으로 작동 하지만 첫 번째 코드를 작동시키면 ReferenceError: Cannot ac..

[ JS ] 일반 함수와 익명 함수의 차이에 대해 알아보자!

JavaScript에서의 함수 선언 방식은 일반함수와 익명함수로 나뉜다. 🤷‍♂️일반 함수란? 일반 함수는 다른 언어에서 함수를 선언하는 방식과 동일하다. 일반 함수 또는 함수 선언식이라고 불린다. // JS 함수 구현 방법 function 함수명() { 함수로직 } # 파이썬 함수 구현 방법 def 함수명 () { 함수로직 } 위 처럼 Python의 함수선언 방식과 JavaScript에서의 함수 선언 방식이 거의 동일한 것을 볼 수 있다 :) 이때 JavaScript에서는 일반 함수가 쓰여진 위치에 상관없이 사용할 수 있다. 왜냐하면 일반 함수는 JS가 스크립트를 처음 읽을 때 해석해서 사용하기 때문인데, 이를 호이스팅 이라고 한다. 👨‍🎓 호이스팅이란? 호이스팅은 JS가 처음 스크립트를 읽을 때 모든..

[JS] value, textContent, innerHTML, innerText 는 어떻게 다를까?

❔DOMstring 안에 있는 Text 값을 바꾸려면 어떻게 해야할까? input처럼 form 요소의 값을 가져오거나 변경하려면 value를 사용하고, form요소가 아닌 다른 div, span, h1 등의 다른 요소의 Text를 가져오거나 변경하려면 textContent, innerHTML, innerText를 사용한다. ❔그럼 textContent, innerHTML, innerText는 뭐고 어떤걸 사용하는게 제일 좋을까? ✔textContent 는 마크업 태그 ex)div, span 등 를 제외한 모든 문자열을 읽고, 변경할 수 있다. This is some text! ✔innerText는 style 같이 마크업 언어가 적용된 최종 형태를 읽어온다. 즉 HTML 요소는 제거된 채 render 된 ..