리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것이다. 먼저 DOM에 대해 알아보자 DOM(Document Object Model) : 객체로 문서 구조를 표현하는 방법이며 XML이나 HTML로 작성된다. 트리형태로 구성되며 특정 노드를 찾거나 수정, 제거가 가능하고 원하는 곳에 추가 가능하다. 웹브라우저는 DOM을 활용하여 객체에 JavaScript와 CSS를 적용한다. 💢규모가 큰 웹 어플리케이션에서 DOM이 느린이유 - DOM 자체는 JavaScript와 비교했을 때 느리지 않다. 하지만 웹브라우저 단에서 DOM에 변화를 감지하여 브라우저가 CSS를 재연산, 레이아웃 재구성, 페이지 리페인팅 하는 과정으로 느려지는 것이다. 🔰해결법🔰 - DOM조작시 웹을 업데이트하면 성능저하가 발생..
분류 전체보기
먼저 기본적으로 알고 들어가야할 정보들을 정리해 보자 프래임워크들은 주로 MVC(Model-View-Controller), MVVM(Model-View-View-Model) 아키택처를 사용한다. 예외적으로, Angular는 MVW(Model-View-Whatever) 아키택처로 어플리케이션 구조화 한다. ※Whatever는 View와 Model을 중개하는 역활을 수행하며 Controller, View, Model 등 다양한 방식의 페턴으로적용됨 MVC 아키텍처 - 개발할때, 3가지 형태로 역활을 나누어 개발하는 방법. - 반영 과정에서 보통 뷰를 변경함 장점 - 비즈니스 처리로직과 사용자 인터페이스 요소들을 분리시켜 서로 영향없이 개발하기 수월한 장점. - 단순하고 직관적임 단점 - View와 Model..
챕터 1 타입 Type = 자바스크립트 엔진, 개발자가 모두에게 어떤 값을 다른 값과 구별할 수 있는, 고유한 내부 특성의 집합 1.1 타입의 실체를 이해하자 타입별 내재된 특성을 알고 있어야 값을 다른 타입으로 변활하는 방법을 정확히 이해가능하다. 어떤 형태로든 강제변환(coercion)이 이러나므로 인지하고 사용하는 것이 중요하다. 1.2 내장타입 ◽null ◽undefined ◽boolean ◽number ◽string ◽object🔰 ◽symbol object를 제외한 나머지 타입은 "원시타입" 이다. typeof 연산자를 이용해 반환값의 타입을 알 수 있다. ex ◽typeof undefined === "undefined" // true ◽typeof true === "boolean" // tr..
//tip 50 빌드 도구를 이용해 컴포넌트를 결합하라 //이번에는 자바스크립트 코드와 자산을 빌드 도구를 이용해 컴파일하는 방법을 배워보자 //이전에 컴포넌트 아키텍처의 이점을 살펴 보았고 컴포넌트 아키텍처의 대표적인 문제점인 브라우저의 내장 기능만으로 지원되지 않는 점을 알았다. //프로젝트의 컴파일과 실행을 위해 create-react-app이 제공하는 도구를 사용했다. 처음에는 항상 미리 설계된 빌드 도구가 가져다주는 이점을 챙기는 것이 좋다. //리액트뿐만 아니라 다른 프래임워크들도 자체 빌드 도구가 있다. 공식적인 빌드 도구가 없다면 깃허브에서 스타터팩을 찾아보는 것도 좋다. //하지만 결국에 빌드 도구를 직접 다뤄야 하는 순간이 온다. //이번에는 기본적인 빌드 프로세스를 구추해보자. //빌..
//tip 49 컴포넌트 아키텍처를 이용해 애플리케이션을 만들자 //컴포넌트 아키텍처로 흩어져있는 HTML, CSS, 자바스크립트를 모으는 방법을 알아보자 //HTML, CSS, 자바스크립트와 같은 프론트엔드 언어들은 서로 다른 //언어와 파일 형식을 만들어 지기에 파일을 구조화 하는데에 어려움이 있다. //오래동안 개발자들은 서로 다른 디렉터리에 비슷한 파일 형식 끼리 보관을 했다. //하지만 분리해둔 파일들 중 마크업에 작동하기 위해 작성되었던 파일들이 //마크업 파일들이 없어졌을때 같이 없어지지 않고 사용되지 않은채 자리만 차지할 뿐이다. //개발자 도구가 발전함에 따라 새로운 패턴이 생겼다. //바로 컴포넌트 아키택쳐라는 패턴이다. //컴포넌트는 관련있는 모든 코드를 조합해 하나의 디렉터리에 담은..
//npm으로 외부 코드를 가져오자 //몇 년 전만 해도 오픈 소스 라이브러리를 사용하려면 코드를 복사해서 내부에 붙여넣거나, 프로젝트에 라이프러리 코드를 내려받거나, //프로젝터에 라이브러리 코드를 내려받거나, 외부의 의존성을 태그를 이용해 포함시키는 방법밖에 없었다. //원하는 코드를 사용할 수 있지만 //의존성을 최신으로 유지하는 것과 프로젝트 내부에 저장하는 경우 문제가 되었다. //유지보수가 어렵고, 라이브러리 코드가 있다고 가정한 코드를 작성해야되고, 코드를 읽고 테스트를 장성하기도 어려웠다. //하지만 이제는 라이브러리 코드를 직접 프로젝트에 내려받고, 버젼을 관리하고, 익숙한 규칙에 따라 개별 파일에서 코드를 가져와 사용할 수 있다. //npm(node package manager)이라는 ..
