거니의 velog

* 이제 리액트를 본격적으로 공부해 보자. 이 절에서는 리액트 프로젝트를 생성하는 사전 준비 작업을 수행하고 나서 첫 리액트 프로젝트를 만들어 볼 것이다. (1) Node.js와 npm * 리액트 프로젝트를 만들 때는 Node.js를 반드시 먼저 설치해야 한다. Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임이다. 이것으로 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있다. 2009년 Node.js를 출시한 이후 자바스크립트는 웹 브라우저 영역 외에 웹 서버는 물론, 모바일 애플리케이션, 데스크톱 애플리케이션 영역에서도 엄청나게 활약할 수 있게 되었다. * 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, ..

(1) Virtual DOM * 리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것이다. [1] DOM이란? * Virtual DOM을 알아보기 전에, 먼저 DOM이 무엇인지부터 제대로 짚고 넘어가야 한다. DOM은 Document Object Model의 약어이다. 즉, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다. * 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다. * 요즘 DOM API를 수많은 플랫폼과 웹 브라우저에서 사용하는데, 이 DOM에는 치명적인 한 가지 문제점이 있다. 바로 동적 UI에 최적화되어 있지 ..

* 최근 몇 년간 전 세계 개발자는 자바스크립트에 뜨겁게 열광하고 있다. 한때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했지만, 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 한다. 더 나아가 영역을 확장하여 서버사이드는 물론 모바일, 데스크톱 애플리케이션에서도 엄청나게 활약하고 있다. * 예를 들어 슬랙(Slack), 아톰(Atom), VS Code 등 유명한 데스크톱 애플리케이션을 일렉트론(Electron)(자바스크립트로 데스크톱 애플리케이션을 만들 수 있는 프레임워크)으로 개발했다. 모바일 애플리케이션도 마찬가지이다. 자바스크립트로 크로스 플랫폼 애플리케이션을 개발할 수 있는 여러 프레임워크(Ionic, Titanium, NativeScr..