javascript (4) 썸네일형 리스트형 가상 DOM(Virtual DOM)은 무엇인가? 가상 DOM은 실제 DOM보다 빠른가? 가상 DOM(Virtual DOM)은 무엇인가? 가상 DOM은 실제 DOM보다 빠른가?DOM이란?The Document Object ModelHTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.// DOM을 조작하여 [id="test"]인 요소를 찾아 새로운 HTML 값으로 렌더링document.querySelector('#test').innerHTML = 'TEST2';Virtual DOM이란?Virtual DOM(가상 DOM)은 진짜 DOM을 추상화한 개념으로, 실제 DOM의 .. 깊은 복사와 얕은 복사와 Spread Operator(...object)에 대해 알아보자 깊은 복사와 얕은 복사와 Spread Operator(...object)에 대해 알아보자 JavaScript로 코드를 짜다보면 객체의 사용이 매우 빈번하게 발생한다. 우리가 매번 보는 DOM 구조도 Document Object Model 의 약자로 Object 형태이고, JavaScript의 Array도 까보면 객체라는걸 알 수 있다. Object 형태의 자료 구조를 계속해서 사용하다보면 얕은 복사, 깊은 복사 그리고 Spread Operator 에 대해서 듣고 사용하게 되는데 오늘 각각 말하는게 무엇인지 알아보도록 하자. 깊은 복사 깊은 복사란 말 그대로 깊게 복사하는 것이다. 무슨 말인고 하니 객체의 모든 계층을 그대로 복사해서 새로운 객체에 복사하는 것. for문을 통해 재귀적으로 모든 값들을 일일.. [javascript] for와 forEach의 차이, forEach에서 비동기 처리 하는 방법 자바스크립트를 처음 공부하다 보면 이런 난관에 빠지게 된다. 아래 코드는 비동기함수를 이용해서 arr 배열에 값을 넣는 코드이다. 비동기 함수를 사용하고 있기에 async, await를 사용해서 제대로 arr 배열에 값이 들어가도록 하고 있다. const a = new Array(10).fill(1) const arr = [] const asyncFunction = (i) => { return new Promise(resolve => { setTimeout(() => { arr.push(i) resolve() }, 100); }) } (async() => { for (let i = 0; i < a.length; i++) { await asyncFunction(i) } console.log(arr) })(.. input 태그 image를 base64 형식으로 변경하기 원하는 작업 형식 여기서 image를 base64 형식으로 변경하고 img 태그로 미리보는 과정을 찾아봤다. 완성된 코드만 볼 예정이면 맨 아래 코드만 보면 됩니다 먼저 html과 css의 구조는 이러함 body, html { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } div { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #f2f2f2; } img { min-width: 400px; max-width: 600px; min-height: 200px;.. 이전 1 다음
