React (11) 썸네일형 리스트형 Virtual DOM Virtual DOM에 대해 알아보기 전에 DOM의 개념부터 정리해보자. DOM DOM이란 Document Object Model이다. 웹 문서 내 모든 요소와 요소의 어트리뷰트 및 텍스트를 각각의 객체로 표현하여 이 객체들의 부자 관계를 트리 구조로 표현한 모델이다. 서버에서 온 웹문서는 브라우저가 스스로 이해할 수 없으므로, 웹 페이지를 이루는 태그들이을 브라우저가 이해할 수 있게끔(메모리에 적재할 수 있게끔) 트리 구조로 만든 객체 모델이다. Virtual DOM이 등장한 이유 DOM에 변화가 생기면 브라우저는 Render Tree를 재생성하고 이에 따라 Layout 및 Painting 과정이 다시 일어난다. 복잡한 SPA에서는 잦은 DOM 조작이 발생하는데, 잦은 변화를 반영하기 위해 브라우저는 .. 명령형 프로그래밍 vs 선언형 프로그래밍 명령형 프로그래밍 무엇을 어떻게 할 것이다. 코드로 원하는 결과물을 얻기 위한 과정에 집중한다. 선언형 프로그래밍 무엇을 할 것이다. 원하는 결과물을 얻기 위한 과정 하나하나보다는 필요한 것들을 기술하는 데 중점을 둔다. level 1에서 바닐라 자바스크립트로 애플리케이션을 만들었을 때는 주로 명령형 프로그래밍을 한 것 같다. 모든 코드는 '어떤 상황에서 어떻게 작동해라!'라는 의도를 가지고 작성되었으니 말이다. 아무래도 초심자의 입장에서는 알고리즘을 하나하나 머릿속에서 떠올리며 그 과정을 코드로 작성하다 보니 명령형 코드로 작성하게 되는 것 같다. 그러다가 여러 함수나 메서드를 알게 되면서 지금까지의 코드를 선언형으로 바꿀 수 있다는 것을 알 수 있는 것 같다. 명령형 let string = 'THis.. snowpack으로 React 시작하기 이번 미션을 진행하며 Snowpack을 이용해 리액트 환경을 세팅해보았다. Snowpack이란? 스노우팩은 요즘 떠오르는 프론트엔드 빌드 툴이다. 번들러에 의존하지 않고(unbundle) 웹 어플리케이션을 빌드한다. Snowpack의 장점은? 언번들 개발을 해서 빌드 속도가 빠르다. 프로젝트 크기가 개발 속도에 영향을 주지 않는다. 번들러를 사용할 시, 작은 변경이 생길 때마다 전체 파일을 새로 번들해야한다. 그리고 이는 파일을 저장하고, 브라우저에 표시하기까지 몇 초의 지연을 발생시킨다. 하지만 snowpack은 번들을 하지 않기 때문에 파일의 일부를 변경하면 해당 파일만 새로 빌드한다. 1. snowpack 설치 (prettier까지 설치됨) npx create-snowpack-app [프로젝트 이름.. 이전 1 2 다음
