https://www.hanbit.co.kr/store/books/look.php?p_code=B6607327754
모던 자바스크립트로 배우는 리액트 입문
온라인 동영상 학습 플랫폼 유데미에서 강의하고 최고 평가를 받은 리액트 강사가 직접 전하는 리액트 입문서. 리액트를 익히는 데 필요한 자바스크립트 기초부터 실무에 유용한 타입스크립트
www.hanbit.co.kr
등장인물
- 사키오카 : 6년 차 프런트엔드 개발자, 학습 의욕 높음, 에이스
- 누시다 : 새로운 팀원, VB 사용 경험 전부
재밌어 보인다 헤헤.....
모던 자바스크립트
- 리액트, 뷰, 앵귤러 등 가상 DOM을 이용하는 라이브러리/프레임워크를 사용(스벨트는 가상 DOM을 이용하지 않는 기술)
- npm, yarn 등 패키지 관리자 사용
- 주로 ES2015(ES6) 이후의 표기법 사용
- 웹팩 등 모듈 핸들러 사용
- 바벨 등 트랜스파일러 사용
- SPA로 작성
DOM, 가상 DOM
DOM은 HTML을 해석해서 트리 구조로 나타낸 것, Document Object Model의 약어
기존 자바스크립트에서는 화면 요소를 변경할 때 DOM을 직접 지정해서 바꿔 쓰는 처리함.
//id=nushida를 가진 요소 아래에 "Hello, World!!"라고 설정한 p 태그 삽입
//자바스크립트
let textElement = document.createElement("p");
textElemnt.textContent = "Hello, World!!";
document.getElementById("nushida").appendChild(textElement);
//제이쿼리
var textElement = $("<p>").text("Hello, World!!");
$("#nushida").append(textElement);
DOM이 변경되고 업데이트가 된다는 것은 결국 브라우저의 렌더링 엔진 또한 리플로우(Reflow) 한다는 것을 의미
단점 발생
- 랜더링 비용(화면 표시 속도) 문제 발생
- 코드가 비대해져 쉽게 파악하기 어려움
이런 문제를 해결하기 위해 만들어진 것이 "가상 DOM".
가상 DOM
가상 DOM은 자바스크립트 객체로 만들어진 가상의 DOM.
실제 DOM과의 차이를 비교하고 변경된 부분만을 실제 DOM에 반영함으로써 DOM 조작을 최소한으로 줄인다.
가상 DOM과 변경된 새로운 가상 DOM을 비교하여 변경이 필요한 부분만 실제 DOM에 반영하여 업데이트한다.
이를 재조정(Reconciliation) 이라고 한다.
참조 사이트 : https://velog.io/@rsuubinn/React-%EA%B0%80%EC%83%81-%EB%8F%94Virtual-Dom
[React] 가상 돔(Virtual Dom)
Virtual DOM은 Real DOM의 가벼운 사본과 같다.Real DOM은 Browser에서 생성되는 Document Object Model을 가리키는 용어이며, Virtual DOM과 구분하기 위해 이 용어를 사용한다.DOM은 Document Object Mode
velog.io
패키지 관리자
예전에는 자바스크립트로 개발할 때 모든 처리를 파일 하나로 기술, 그래서 복잡한 시스템에서는 코드가 수천 행 이상이 되어 혼란스럽고 그 코드들을 재사용할 수 없었다.
이후에는 js 파일에서 다른 js 파일을 로딩해 사용할 수 있도록 개선되었으나 로딩 순서를 지키지 않으면 에러가 발생하거나(의존 관계), 로딩한 상수나 변수를 사용하는 경우 무엇이 어디에서 로딩괸 것인지 매우 알기 어려운 문제 등이 존재
이를 개선하기 위해 "패키기 관리자"를 사용함
어떤 프로그래밍 언어를 사용하더라도 외부에 공개된 다양한 패키지를 이용하게 됨.
처음부터 개발하는 것은 비효율적 임.
다만, 패키지를 설치할 때 버전이 다 달라 동일한 재현하기가 매우 어려움, 그래서 패키지 관리, 설치, 업그레이드 등을 전담하는 패키지 관리자를 사용하게 됨.
대표적인 패키지 관리자
- npm - javascript
- gem - ruby
- composer - php
React 스터디 1주차 React 설치와 기본 개념
react 설치방법과 react 를 배우기 앞서 기본적으로 알아야 할 개념들에 대해 알아보는 포스트이다.
velog.io
https://www.youtube.com/watch?v=txX3bL22esU
ECMAScript
자바스크립트는 브라우저에서 동작하는 언어, 자바스크립트 표준 사양이 ECMAScript 이다.
근대 자바스크립트의 전환기는 ES2015(ES6) 이다.
- 화살표 함수, Class 구문, 분할 대입, 템플릿 문자열, 스프레드 구문, Promise 등
모듈 핸들러, 트랜스파일러
개발할 때 나눈 파일을 하나로 모으기 위해 모듈 핸들러 사용, 의존 관계를 해결해주는 역할도 함. 주로 웹팩 사용
자바스크립트 표기법을 브라우저에서 실행할 수 있는 형태로 변환해주는 역할은 트랜스파일러, 주로 바벨 사용
SPA
SPA는 단일 페이지 애플리케이션(Single Page Application)으로 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식을 의미
https://www.elancer.co.kr/blog/detail/214