1.2.1 Virtual DOM 리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것이다. 1.2.1.1 DOM이란? DOM은 Document Object Model의 약어로 객체로 문서 구조를 표현하는 방법이다. 주로 XML이나 HTML로 작성한다. 웹 브라우저는 이 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다. DOM은 트리 형태이기 때문에 CRUD가 가능하다. DOM은 과연 느릴까? DOM은 동적 UI에 최적화되어 있지 않다. HTML은 정적이며, 자바스크립트로 동적으로 만들 수 있다. 규모가 큰 웹앱에서 DOM에 직접 접근하여 변화를 주면 성능 이슈가 발생한다. 이를 두고 "요즘 자바스크립트 엔진은 매우 빠른 반면, DOM은 느리다"라고 한다. 하지만 실제로 DOM 자체는..

자바스크립트 관련 프레임워크들(Backbone.js, Derby.js, Ember.js, Ext.js, Knockback.js, Sammy.js, PureMVC, Vue.js)은 주로 MVC(Model-View-Controller) 아키텍쳐, MVVM(Model-View-View Model) 아키텍쳐를 사용하며, AngularJS는 MVW(Model-View-Whatever) 아키텍처로 애플리케이션을 구조화한다. MVC, MVVM, MVW 등과 같은 여러 구조가 지닌 공통점은 모델(Model)과 뷰(View)가 있다는 것이다. 모델은 애플리케이션에서 사용하는 데이터를 관리하는 영역, 뷰는 사용자에게 보이는 부분, 컨트롤러는 프로그램이 사용자에게서 어떤 작업을 받으면 모델 데이터를 조회하거나 수정하고, 변..

1. 변수 선언 방식 var name = 'byein' console.log(name) // byein var name = 'var' console.log(name) // var 변수를 한 번 더 선언했지만 에러가 아니라 정상적으로 코드가 실행된다. var 는 변수 선언이 유연하여 편리할 수 있지만 코드량이 많아지면 변수가 어디에서 어떻게 사용될 지 파악하기 어려우며 값이 쉽게 바뀔 위험이 존재한다. 이를 보완하기 위해 ES6 이후로 let 과 const 가 추가되었다. let name = 'byein' console.log(name) // byein let name = 'var' console.log(name) // Uncaught SyntaxError: Identifier 'name' has alre..