babel과 polyfill의 차이
webpack
Babel
브라우저별 지원되는 상황 다르므로
============
선수지식
프레임워크
(+) 필요한 기능이 이미 만들어져서 우리가 채워넣으면 되는 것.
(-) 사용하지 않는것도 있어서 무겁다.
라이브러리
(+) 필요한 데다 갖다쓰면 됨.
================
React란?
프레임워크가 아닌 라이브러리. View를 위함.
장점
Virtual DOM
어플리케이션의 규모가 커질 경우, 일일히 해당하는 부분을 찾아서 비교하고 업데이트하는 로직이 필요해지므로 관리가 어렵다. 리액트는 버츄얼 돔에 그려주고 달라진 부분을 비교한 후, 해당 부분만 업데이트 알아서 해준다.
Garbage Collection / 메모리 관리 / 성능
서버사이드 렌더링 / 클라이언트 사이드 렌더링 (둘 다 지원)
클라이언트 사이드 렌더링의 단점
1. 초기 구동 딜레이 발생
2. SEO 검색 엔진 최적화 :
- 구글은 ajax, 자바스크립트를 알아서 실행해서 검색에 반영하므로 문제 x.
- 다음, 네이버, Bing은 아직임.
리액트는 서버사이드렌더링을 지원하므로 문제 x.
참고: 앵귤러 2는 지원
서버 사이드 렌더링의 단점
서버사이드의 사양 요구.
따라서 방문자 수가 많고, 통신 분산처리가 잘 되어 있으며, 서버컴퓨터의 기능이 좋지 않다면 서버사이드 렌더링은 피하자
인스타그램은 서버사이드 랜더링 사용. UX 영향 X.
페이스북은 서버사이드 사용X. XHP사용.
간편한 UI 수정 및 재사용
페이스북에 의해서 업데이트가 꾸준히 이루어진다.
Codeigniter의 몰락을 생각해보라.
페이스북 좋아요, 덧글등 react로 적용. 인스타그램은 모두 react
단점
View only
데이터 라우팅, Ajax 기능 없다. 다른 라이브러리 사용해서 구현 가능.
IE8 이하 지원 X : IE8을 꼭 지원해야한다면 react 14 이하 버전을 사용하고 polyfill사용.
react 15버전 미만에서는 react만 불러오면 됐다. 15 이상에서는 파일이 2개 이상으로 분리.
====
static method와 일반 method의 차이
static은 객체로 선언하기도 전에 사용 가능.
===
JSX
render함수 내에서 사용. 바벨에서 JSX loader를 사용해, html 구 js에 맞게 바꿔준다.
실질적으로 그려주는 함수.
1. Container안에 항상 포함할것
return
<div>
<div>
<div>
<div>
(OK)
return
<div>
<div>
(x)
Inline style
String 형식 사용하지 않고 key가 camelCase인 객체 사용.
2. 주석은 JSX내의 container안에서 사용
{/*...*/}
3. style은 {}안에 사용. 이 때 카멜케이스 사용하라.
let style={
backgroundColor = "red"
}
4.