웹 기술의 진화 웹은 1993년 HTML 기반의 정적 페이지에서부터 시작되었다. 이 때 모든 웹사이트의 주요 기능은 단순히 링크가 전부였다. 사람들이 정적 웹사이트에 지루함을 느끼기 시작할 때, 누군가가 "정적인 페이지를 동적으로 만들자"라고 외쳤고, 그렇게 자바스크림트(Javascript)가 탄생했다. 그로부터 몇 년 후, 존 레식은 여러 브라우저에서 정상적으로 작동하는 자바스크립트 코드를 개발자들이 쉽게 작성할 수 있도록 jQuery를 만들었다. 이후 2010년 구글에선 강력한 단일 페이지 웹 애플리케이션(single-page web application)을 구축할 수 잇는 Angular JS를 소개해, 큰 인기를 끌었다. 그리고 2013년에는 페이스북의 소프트웨어 엔지니어인 Jordan Walke가..

Material-UI는 리액트 UI Framework이다. Material-UI 홈페이지 : https://material-ui.com/ Material-UI 블로그 : https://medium.com/material-ui MUI Core: Ready to use components, free forever Get a growing list of React components, ready-to-use, free forever and with accessibility always in mind. mui.com MUI Blog – Medium MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design..

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

리액트 이해 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다. 구조가 MVC, MVW 등인 프레임워크와 달리 오직 V(View)만 신경쓰는 라이브러리이다. 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트(component)라고 한다. 컴포넌트는 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념이다.템플릿은 보통 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데, 이와 달리 컴포넌트는 좀 더 복합적인 개념이다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에 해당 컴포넌트의 생김새와 작동 방식을 정의한다. 사용자 홤녀에 뷰를 보여 주는것을 렌더링이라고 한다. 리액트 라..