분류 전체보기414 DOM / Virtual DOM / 파이버(Fiber) 최종 수정 : 2024-06-01DOM가상 DOM을 이해하기 위해서는 DOM에 대한 이해가 필요하다. DOM(Document Object Model)은 객체로, 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다. 이 문서 구조는 XML이나 HTML로 작성돼 있다. 웹 브라우저는 DOM을 활용하여 객체에 JS와 CSS를 적용한다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다. 그러나 DOM은 동적 UI에 최적화되어 있지 않다는 치명적인 단점이 있다. 예를 들어, 스크롤을 내릴 때마다 새로 생기는 웹 페이지나 버튼을 클릭했을 때 나타나는 이미지나 글자 등, 이처럼 규모가 큰 웹 애플리케이션에서 DOM에 .. 2024. 4. 14. JS Quiz 33-36. call, bind / 즉시실행함수 / falsy-truthy 값 / typeof 연산자 33. What's the output? const person = { name: 'Lydia' }; function sayHi(age) { return `${this.name} is ${age}`; } console.log(sayHi.call(person, 21)); console.log(sayHi.bind(person, 21)); 정답 D // call. bind 2024-04.12 공부 필요 다시 해석 달기! 34. What's the output? function sayHi() { return (() => 0)(); } console.log(typeof sayHi()); 정답 B // 즉시 실행함수와 typeof 연산자에 대한 문제 함수 sayHi는 즉시실행함수로 선언됐다. 값을 0을 반환하므로,.. 2024. 4. 13. 리액트 디자인 적용 프론트엔드 개발자에게는 개발 기능 못지 않게 디자인은 중요하다. 특히 CSS 스타일링과 이미지 처리가 중요하다. 이는 UX와 직접적으로 연결되어 있기 때문에 잘 관리하는 것은 필수적이라 말할 수 있다. 방법 1. 이미지 불러오기 import 구문을 통해 이미지 파일을 불어온 뒤, 주소를 src 속성으로 사용 import profileImg from '해당 경로'; function Profile() { return ; } export default Profile; 방법 2. 클래스네임을 통해 CSS 파일 불러오기 import 구문을 통해 CSS 파일을 불러올 수 있다. CSS 파일에 정의된 클래스를 사용하려면 className prop에 문자열로 놓오주면 된다. 재사용성을 위해서는 부모 컴포넌트에서 받는 .. 2024. 4. 11. JS 스터디 모집 글 모임명 : JS Q.R 자바스크립트를 질문(Question)으로 재구조화(Rebuilding)하다. 2024. 4. 11. JS Quiz 29-32. 객체 / 동기-비동기 / event.target / capturing-bubbling 29. What's the output? const a = {}; const b = { key: 'b' }; const c = { key: 'c' }; a[b] = 123; a[c] = 456; console.log(a[b]); 정답 B // 다시 공부 필요 24-04-10 어떻게 정답이 나오는지 모르겠다. 아...직도 객체는... 어렵구나. 객... 체 하겠네 30. What's the output? const foo = () => console.log('First'); const bar = () => setTimeout(() => console.log('Second')); const baz = () => console.log('Third'); bar(); foo(); baz(); 정답 B // 동기 .. 2024. 4. 10. 이전 1 ··· 39 40 41 42 43 44 45 ··· 83 다음
