“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
/
리액트 입문서
intro
대상
- 리액트 입문자
- 자바스크립트도 리액트도 어려운 프론트앤드 개발 입문자
index
1- 3장 : 리액트 전 알아야 할 자바스크립트 기초
4장- 끝 : 리액트기본, 리액트에서 CSS다루기, 재랜더링,글로벌State관리, 리액트 개발에 타입스크립트 사용하기 등
참고 예제 다운로드
https:github.com/moseskim/book-react-code
/
1장. 모던자바스크립트 기초
1-1. 모던자바스크립트 개요
모던자바스크립트의 특징
- 리액트, 뷰 앵귤러 등 가상 DOM을 이용하는 라이브러리/ 프레임워크를 사용
(최근에는 스벨트 처럼 가상 DOM을 이용하지 않는 기술도 등장)
- npm, yarn 등 패키지 관리자 사용
- 주로 ES6이후의 표기법 사용
- 웹팩 등 모듈 핸들러 사용
- 바벨 등 트랜스파일러 사용
- SPA(single page appliction)로 작성
1-2. DOM, 가상DOM
DOM Document Object Model의 약어
- HTML을 해석해서 트리구조(부모 자식 간의 계층구조)로 나타낸 것
순수한 자바스크립트나 제이쿼리 코드는 순차적이라 이해가 쉽지만
렌더링 비용(화면표시속도)에 문제가 발생하기 쉽고,
프로그램 코드가 비대해져서 어디서 무엇을 하고 있는지 쉽게 파악하기 어려움
이 문제를 해결하기 위해 가상DOM 을 만듬
가상DOM
가상DOM은 자바스크립트 객체로 만들어진 가상의 DOM.
이를 이용해 실제 DOM과 차이를 비교하여 변경된 부분만 실제 DOM에 반영
리액트, 뷰 등 모던 자바스크립트 프레임워크나 라이브러리에서는 가상 DOM을 제공
- 페이지 이동은 자바스크립트의 화면 치환으로 구현하고, 렌더링 비용을 최소화해 쾌적한 웹시스템 제공
1-3. 패키지 관리자
패키지 관리자 : 패키지관리, 설치, 업그레이드 등을 전담
- 자바스크립트의 npm
- 루비의 gem
- PHP의 cpmposer
npm/ yarn의 장점
- 의존관계를 의식하지 않아도 자동으로 해결해준다.
- 팀 안에서 패키지를 공유하고 버전을 통일하기가 쉽다.
- 전 세계에 공개된 패키지를 하나의 명령어로 이용할 수 있다.
- 어디에서 로딩한 것인지 알기 쉽다
패키지 사용자 실행하기
npm
npm install [패키지명]
yarn
yarn add [패키지명]
명령어 실행 시 로컬파일 package.json변경 - 패키지 정보 추가
package-lock.json 파일생성[패키지 내부에서 사용하는 다른 패키지 버전정보나 이존정보 기록]
: 두개의 파일에 설치 정보가 기록되어있어 다른 곳에 동일한 환경을 설치할 수 있음
1-4. ECMAScript
자바스크립트 : 브라우저에서 동작하는 언어
ECMAScript(European Computer Manufacturers Association, 유럽 컴퓨터제조연합)
: 자바스크립트의 표준 사양
: 1년에 한 번씩 ECMAScript를 업데이트
: 양력 연도 사용하여 ES6 (ES2015)
: 2015년에 가장 크게 개정되었음
ES6(ES2016) 개정사항
- let, const를 사용한 변수 선언
- 화살표함수
- class구문
- 분할 대입
- 템플릿 문자열
- 템플릿 문자열
- 스프레드 구문
- Promise
- 기타
1-5. 모듈핸들러, 트랜스 파일러
모던 자바스크립트 개발의 필수 구조
사용 목적 : 높은 효율로 개발하고 실행시 적절하게 변환하는 것
모듈핸들러
: 나누어서 개발한 js파일이나 css파일들을 빌드할 때 한데 합치는 기능
: 웹팩이 대세
트랜스파일러
: 빌드 된 파일을 브라우저가 인식 할 수 있는 형태로 변환
: 바벨이 주류
1-6. SPA와 기존 웹 시스템의 차이
- SPA (Single Page Application)
HTML은 하나만 사용하고 자바스크립트를 이용해 화면을 전환하는 형태
장점 : 속도 향상, 컴포넌트 분리가 쉬워 개발효율향상