# DOM

835개의 포스트

[Web] 가상돔 (Virtual DOM) 작성해보기 (1)

💡 가상돔(Virtual DOM) 한줄 정리! 가상돔은 HTML 뷰에 변화가 있을 때, 이전의 가상돔과 새로운 가상돔을 비교해 변경된 내용만 감지해 DOM에 적용하는 것을 말한다. 가상돔이 왜 필요할까? DOM의 변화가 심하게 많이 발생하면,

약 3시간 전
·
0개의 댓글
·
post-thumbnail

DOM은 도대체 뭘까?

우리가 만드는 '웹 서비스'는 크롬, 사파이와 같은 브라우저를 바탕으로 실행되기 때문에, 웹 개발은 브라우저와 밀접한 관련이 있다. 이러한 브라우저와 관련이 있는 객체 집합이 바로 브라우저 객체 모델(BOM)이다.

2일 전
·
0개의 댓글
·

JavaScript) DOM _ 1

브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다.HTML 요소는 HTML 문

2일 전
·
0개의 댓글
·
post-thumbnail

innerHTML, innerText와 textContent의 차이점

개념 차이 1. Element.innerHTML element 내에 포함된 HTML 및 XML 마크업을 반환합니다. 2. Element.innerText element 내 화면에 표시되는 텍스트 콘텐츠를 반환합니다. 3. Node.textContent element 내 모든 element의 텍스트 콘텐츠를 반환합니다. 그래서 와 내의 텍스트 콘텐츠도 ...

5일 전
·
0개의 댓글
·
post-thumbnail

[React] 기본_DOM,JSX,WEBPACK

리액트는 Controller, Mode, View 3가지를 기본적인 구조로 작동한다 Controller는 model을 view로 보여주는 역할view의 사용자가 요청하는 사항들을 model이 보여줄 수 있도록 전달하는 역할을 한다.리액트에서 html문법과 비슷하게 사용

6일 전
·
0개의 댓글
·
post-thumbnail

[리액트] 1. 리액트 시작

1. 리액트 시작 1-1. 왜 리액트인가 한때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했다. 하지만 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 합니다. 더 나아가서 서버 사이드는 물론 모바일, 데스크톱

6일 전
·
0개의 댓글
·
post-thumbnail

똑똑한 HTML 분석기 - BeautifulSoup4 : 2-1. 웹 브라우저가 HTML을 다루는 방법

브라우저는 어떻게 이 문서를 오른쪽과 같은 예쁜 페이지로 만들 수 있을까?브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱을 진행이를 DOM (Document Object Model) 이라고 한다.브라우저는 DOM을 왜 만들어 내는 걸까?DOM은 실제로는 이렇게 복

2022년 9월 27일
·
0개의 댓글
·
post-thumbnail

[javascript] DOM

안녕하세요! 이번 포스팅에서는 DOM, Node, Element의 개념과 특징에 대해 알아보는 시간을 가져볼까 합니다. DOM DOM 이란 무엇일까요? > 문서 객체 모델(Document Object Model) : 문서의 구조화된 표현(structured repre

2022년 9월 25일
·
0개의 댓글
·
post-thumbnail

[개발기초] DOM - 2주차 (1)

DOM과 고차함수에 대해서 기록을 남겨본다.🌲DOM(Document Object Mode)이라고 거창하게 말하지만 그냥 HTML이 인식하는 Tree구조 인것이다.그림으로 보면 다음과 같다.이러한 HTML의 구조는 HTML에서 자바스크립트를 불러와 조작할 수 있다. 즉

2022년 9월 25일
·
0개의 댓글
·
post-thumbnail

[ 자바스크립트 ] DOM

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다.이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.Document 객체는 웹 페이지 그 자체를 의미

2022년 9월 23일
·
0개의 댓글
·

렌더링이란?

리액트 강의를 듣다보니 렌더링이라는 단어가 자주 등장한다. 렌더링의 개념을 제대로 파악하지 못한 것을 문득 깨닫고 정리해보기로 했음.렌더링(rendering)은 컴퓨터 프로그램을 사용하여 모델 또는 이들을 모아놓은 장면인 씬 파일(scene file)로부터 영상을 만들

2022년 9월 20일
·
0개의 댓글
·
post-thumbnail

BEB 07 2-1

HTML 요소들을 객체화 하여 조작하기 편리하게 만든 모델document 하위 DOM 객체에 대해서도 querySelector 적용 가능하다.유연한 querySelector 예시배열처럼 동작하지만 배열의 인터페이스를 모두 제공하진 않는다.성능이나 가독성을 위해 임시로

2022년 9월 19일
·
0개의 댓글
·
post-thumbnail

임의로 추가해서 쓸 수 있는 `data-*`

html-data-attributes 내가 이해하기 쉽게 조금 풀어서 작성했다

2022년 9월 16일
·
0개의 댓글
·
post-thumbnail

코드스테이츠_4주차_목, 금

목, 금은 Git을 배우고 솔로프로젝트로 나만의 아고라 스테이츠를 만들어 배포해보는 시간을 가져본다!

2022년 9월 15일
·
0개의 댓글
·
post-thumbnail

React가 사랑 받는 이유 (feat. React 없이 Javascript로 React 핵심기능 구현해보기)

(드래그한 영역도 민트색인 진정한 민초단(?) 우형 기술블로그..ㅎ)어제 자바스크립트 공부 방향에 대해서 고민하다가 우연히 발견한 우아한형제들의 기술블로그 포스트 제목이 너무너무 나한테 필요한 주제라서 안읽고 베길 수 없었다. (이게 표현이 맞나)아무튼 그래서 이번 포

2022년 9월 14일
·
0개의 댓글
·
post-thumbnail

S1U11 정리

S1U11 정리

2022년 9월 14일
·
0개의 댓글
·

Unit 11 회고

DOM기초 DOM(Document Object Model): HTML 요소를 Object 처럼 조작할 수 있는 Model, HTML의 작은 부분까지 접근할 수 있는 구조 console.dir: DOM을 객체의 모습으로 출력 children: 자식 요소를

2022년 9월 14일
·
0개의 댓글
·
post-thumbnail

Day16,17 S1U11 DOM

DOM, 이벤트 객체

2022년 9월 14일
·
0개의 댓글
·

[회고] DOM 이해하기

명절 후유증인지.. 코로나인지..일요일 새벽부터 오늘 아침까지 거의 30시간은 잔거 같다..꾸역꾸역 학습 시간 전에 일어나서 DOM 학습을 하는데,,진짜 까만건 글씨고 하얀건 브라우저,,ㅠㅠㅠㅠ여차저차 페어분이랑 만나서 오늘 페어 "과제 유효성 검사"를 했다..튜토리얼

2022년 9월 13일
·
0개의 댓글
·

Unit11 - [JS/브라우저] DOM

🔥 DOM 기초 DOM(Document Object Model) : HTML, XML 문서의 프로그래밍 인터페이스이다. 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수

2022년 9월 13일
·
0개의 댓글
·