Hello_coding

Attribute ? - HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공한다. - 글로벌 어트리뷰트 :id , class ,style ,title ,lang ,hidden 등 - HTML 문서가 파싱될때 , 어트리뷰트 하나당 하나의 노드가 생성된다. - attributes 프로퍼티는 NamedNodeMap 객체에 담겨 요소 노드의 attribute에 저장된다. ( NamedNodeMap 객체 : 유사배열객체 , 이터러블 ) attributes 프로퍼티의 불편한점 - getter만 존재하는 읽기 전용 접근자 프로퍼티이다. - 따라서 값을 취득하는것은 가능하지만 수정은 불가능하다. - 값을 취득할때도 유사배열 객체를 다뤄야하기 때문에 불편하다! ▷ 따라서 getAttribute , setAttri..

코딩을 하던중 아이템이 클릭 이벤트에 반응하도록 등록을 하고 싶어 for문을 이용하여 addEventListener을 등록해주었다. 하지만 이렇게 하나하나 등록하는것은 부적합한 코드인것 같아 알아보니 '이벤트 위임'을 알게되었다. (사실 이미 배웠던거지만 생각이 안났던 ㅜㅜ..) 실제로 DOM요소에 이벤트 핸들러를 많이 등록할 수록 성능저하의 원인이 된다. 그렇기에 DOM요소에 여러개의 이벤트 핸들러를 등록할 필요 없이 이벤트 위임을 통해 접근하는 방법을 알아보자. 이벤트 위임 - 이벤트 위임을 사용하면 각 요소마다 핸들러를 할당하지 않고 요소의 공통 조상에 이벤트 핸들러를 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다. - event.target을 이용해 실제 어디서 이벤트가 발생했는지 알 수 있..

Javascript를 최적화를 위한 다양한 방법들을 알아보자! [ 속도가 중요한 이유 ] https://web.dev/why-speed-matters/ 속도가 왜 중요합니까? 사용자 경험에서 속도는 중요한 역할을 합니다. 모바일 속도로 인한 지연은 실망스러울 뿐만 아니라 비즈니스 결과에도 부정적인 영향을 미칠 수 있습니다. web.dev 성능 측정의 척도 - 올바르게 동작하게 만든다 👉 메모리, 네트워크 트래픽과 같은 자원과 연관 - 빠르게 동작하게 만든다. 👉 시간과 관계 시간 시간은 크게 3가지로 분류한다. 1. 초기 구동시간 2. 계산시간 3. 반응 시간 이 시간들을 어떻게 최적화 할지 알아보자. 초기 구동시간 - 초기에 애플리케이션이 로드 되는 시간 [ 초기 구동시간을 줄이는 법 ] - 다운로드 ..

웹 페이지 렌더링 - 브라우저가 HTML파일을 화면에 그려내는 과정 1. 파싱 : HTML파일을 DOM으로 변환 (파싱) 2. 스타일 계산 : CSS를 CSSOM으로 파싱 3. 레이아웃 : CSSOM 정보를 토대로 레이아웃 트리(렌더 트리)생성 4. 페인트 : 렌더트리가 생성되면 , 이 트리를 따라 페인트 기록 생성 (페인트 기록 ? 요소를 렌더링하는 순서 저장, 레이어를 나눠 시각적인 부분 그리는 작업 진행) 5. 컴포지팅 : 각 레이어를 스크린에 픽셀로 표현, 레이어들을 합성해 페이지를 그림 page reflow & repaint - HTML 구조상의 변화, CSS의 변화가 있으면 reflow와 repaint 과정을 거치게 된다. 1. reflow - 레이아웃 (너비 ,높이)등 변경 시 영향받는 모든..

DOM 조작 - DOM조작이란 새로운 노드를 생성하여 DOM에 추가하거나, 기존 노드를 삭제 또는 교체하는것을 말한다. - 성능에 영향을 주므로 최적화를 위해 주의하여 다뤄야한다. innerHTML - 요소내에 포함된 HTML마크업을 가져오거나 설정 - 렌더링된 콘텐츠를 표현 [단점] - 그대로 innerHTML 프로퍼티에 할당하는것은 XSS에 취약하므로 위험하다. - 또한 HTML마크업 문자열을 할당하는 경우 , 요소노드의 모든 자식노드를 제거하고 할당한 HTML 마크업 문자열을 파싱한다. - 새로운 요소를 삽입할때 위치를 지정할 수 없다. insertAdjacentHTML - 요소노드를 주어진 위치에 배치 const sayHi = document.querySelector('.sayHi'); sayHi..

노드탐색 - 요소노드를 얻고, DOM트리의 노드를 옮겨다니며 탐색할 경우가 있다. - 노드탐색 프로퍼티는 모두 자체적으로 값을 갖진 않고 다른 데이터 프로퍼티 값을 읽거나 저장할 때 호출되는 프로퍼티 (== 접근자 프로퍼티)이다. - 노드 탐색 프로퍼티는 setter없이 getter만 존재한다. 공백 텍스트 노드 HTML 요소 사이 스페이스, 탭 , 줄바꿈등의 공백 문자는 텍스트 노드를 생성한다. 이를 공백 텍스트 노드라 한다. * 읽기 전! 프로퍼티를 볼땐 요소노드만 반환하는지 텍스트 노드도 반환하는지 구별하며 알아두면 좋을 것 같다! 자식 노드 탐색 프로퍼티 1) Node.prototype.childNodes : 요소노드 + 텍스트 노드 포함 2) Element.prototype.children : ..

DOM이란? - HTML 문서의 계층적 구조와 정보를 표현하며, 이를 제어할 수 있는 API (프로퍼티,메소드)를 제공하는 트리자료구조이다. - 이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 "노드 (node)" 라고 한다. 여기서 나오는 트리자료구조에 대해 잠깐 알아보자. Tree Data Structure? - 트리자료구조는 노트들의 계층구조로 이뤄진다. - 부모,자식노드로 구성되어 노드간 계층적 구조를 표현하는 비선형 자료구조이다. - 최상위 노드는 root노드라고하고, 자식노드가 없는 노드를 leaf노드라고 한다. 노드타입? 노드타입은 총 12개지만 중요한 노트 타입 4가지를 살펴보자. 1. 문서노드 - DOM 트리의 최상위에 존재하는 루트노드 -> 노드들의 진입점역할 - document 객..

JSON ? - JavaScript Object Notation의 약자 - 클라이언트와 서버간 HTTP 통신을 위한 텍스트 데이터 포맷 - JS에 종속되지 않은 언어 독립형 데이터 포맷 - 대부분 프로그래밍 언어에서 사용가능 JSON 표기 방식 - 반드시 큰따옴표로 묶어야 한다. (작은따옴표 불가능) - 값은 객체 리터럴과 같은 표기법을 사용 할 수 있다. - 문자열 역시 반드시 큰 따옴표로 묶는다. JSON의 2가지 메서드를 알아보자! (parse , stringify) JSON.stringify - 객체를 JSON 포맷의 문자열로 반환 - 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야한다. (직렬화) [예제] let student = { name: 'John', age: 30, isAdm..

책에 자주 등장하는 prototype 현재 읽고있는 Deep Dive 뿐만아니라 여기저기서 prototype이라는 단어를 정말 많이 본다. 이 포스팅을 통해 prototype을 정복해보자! prototpye의 정의 - 자바스크립트의 모든 객체는 자신의 "원형 (Prototpye)" 이 되는 객체를 갖는다 - 이를 프로토 타입이라한다. - 보이지 않는 속성인 [[ Prototype ]] 이 자신의 프로토 타입 객체를 참조한다. - __proto__ 라는 속성으로 참조할 수 있으나 비표준이고 , 구식이기에 사용하는것을 피하자. .prototype 과 [[prototype]] - 모든 객체는 은닉 속성인 [[prototype]] 을 갖는다. - 이때 특별히 함수객체는 접근할 수 있는 속성인 prototype을..

✔️ URI? URN + URL - URN? Resource Name (리소스 이름) - URL ? Resouce Locator (리소스의 위치) 벤다이어그램으로 표현하면 위의 이미지와 같다. 하지만 , URN은 거의 사용하지 않는다! - 이름만으로 실제 리소스를 찾을수 있는 방법이 보편화 되지않았기 때문 - 대부분 URL 사용 그러면 본격적으로 URI에 대해 자세히 알아보자. ✔️ URI? Uniform : 리소스를 식별하는 통일된 방식 Resource : 자원 , URI로 식별할 수 있는 모든것을 뜻함 EX ) HTML파일뿐만아니라 실시간 교통정보 등 식별할수 있는 모든것. Identifier : 다른 항목과 구분하는데 필요한 정보 ✔️ URI 전체 문법 scheme://[userinfo@]host:..