Front-end (37) 썸네일형 리스트형 [React] 리액트의 등장배경 (총정리) 1. 브라우저의 Flow React의 등장에 대해 알아보기 전에 브라우저가 어떻게 동작하는지 먼저 알아보자✌️ 유저가 브라우저에 접속 HTML을 파싱하여 DOM tree 생성 html외부의 css파일이나 내부의 style 태그를 파싱하여 CSSOM tree 생성 DOM 트리와 CSSOM 트리를 병합하여 렌더트리를 구성. → 콘텐츠를 설명하는 DOM과 스타일 규칙을 설명하는 CSSOM을 병합하여 화면에 픽셀을 렌더링하기 위한 마지막 단계 Layout(=reflow) → 렌더 트리의 노드들이 가지고 있는 스타일 정보와 속성을 이용해서 브라우저에 어떤 콘텐츠를 어느 위치에 어떤 크기로 출력할 지 결정하는 단계 Painting → 렌더링 된 요소들에 색을 입히는 과정 Reflow → 위의 과정을 모두 거친 뒤에.. [Javascript] 참조에 의한 객체 복사 1. 참조에 의한 객체 복사 객체와 원시 티입의 근본적인 차이 중 하나는 '참조의 의해(bt referernce)' 저장되고 복사된다는 것이다. (원시값은 '값 그대로' 저장,할당되고 복사된다.) ● 객체의 동작방식 객체를 변수에 할당할 때, 변수에는 객체가그대로 저장되는 것이 아니라, 객체가 저장되어 있는 '메모리 주소'인 객체에 대한 '참조값'이 저장된다. let a = { 'id':1 }; let b = a; 위와같은 코드에서, a에 할당된 객체는 메모리 내 어딘가에 저장되고, 변수a에는 객체를 '참조'할 수 있는 값이 저장된다. 그리고 b에 a를 할당해서 객체가 할당된 변수를 복사할 땐 객체의 참조값이 복사되고 객체는 복사되지 않는다. 변수는 두개 이지만 각 변수엔 동일 객체에 대한 참조 값이 저.. [Javascript] 객체란 무엇인가? 1. 객체란? 자바스크립트엔 여덟가지 자료형이 있다. 이 중 일곱개는 오직 하나의 데이터(문자열,숫자 등)만 담을 수 있는 '원시형(primitive type)'이다. 이와 달리 key로 구분된 데이터 집합이나 복잡한 객체(entity)를 저장하는 객체는 다양한 데이터를 담을 수 있다. 객체를 만드는 방법은 '객체 생성자'문법과 '객체 리터럴'문법 두가지가 있다. 2. 리터럴과 프로퍼티 중괄호 {...}를 이용해 객체를 선언하는 것을 객체 리터럴(object literal)이라고 부른다. 객체를 선언할 땐 주로 이 방밥을 사용한다. const user = { name: "john", age: 30, }; 이런식으로 '콜론(:)'을 기준으로 왼쪽에는 key가 오른쪽엔 value가 위치한다. 프로퍼티 key.. [Javascript] querySelectorAll 에 addEventListener 적용하기 ● addEventListener는 document내의 특정 요소의 이벤트를 감지할 때 사용하는 method이다. function testEvent() { const vary = document.querySelector('.selector') vary.addEventListener('click', (e) => { //함수내용 } } 이렇게 querySelector 선택자를 이용해서 html내의 특정 요소를 선택한 뒤, 선택한 요소에 addEventListener을 이용해서 특정 이벤트를 감지한다. 하지만 선택자와 일치하는 문서 내 첫 번째 Element를 반환하는 querySelector과는 달리, querySelectorAll메서드는 지정된 selector 그룹에 일치하는 다큐먼트의 Element Li.. [React] React란 무엇인가? (feat. SPA와 Virtual DOM) 1. 리액트(React)란 무엇인가? 리액트(React)는 페이스북에서 제공하는 자바스크립트 라이브러리의 하나로서, 사용자 인터페이스를 만들기 위해 사용된다. 리액트는 컴포넌트 기반인데, 컴포넌트에 데이터를 흘려보내면 설게된 대로 UI가 조립되어 사용자에게 보여진다. 리액트는 이벤트로 인해 데이터를 관리하는 Model에 변화가 생기면Virtual DOM을 생성하고, 이것을 실제 DOM과 비교하고 변화가 발생한 부분만 업데이트 하는 방식으로 작동한다. 2. SPA 와 Virtual DOM 전통적인 웹사이트는 문서 하나에 전달되는 파일의 용량이 적었기 때문에, 한번의 이벤트에 새로운 페이지를 서버에서 전송해주는 방식도 상관이 없었다. 하지만 점치 웹사이트가 고도화됨에 따라 한 페이지에 해당하는 용랴잉 커졌고.. 이전 1 2 3 4 5 다음
