transpiling : 호환성 이슈
arrow function을 function으로 : babel 작동 방식과 유사, 컴파일(소스코드 읽어서 해석한 후 파싱, 토크나이저하기)
fetch api 가 없다면?
fetch는 브라우저 스펙임. window.어쩌구 해서 접근
트랜스파일링 불가. 대체 함수를 따로 만들어야함. polyfill.
polyfill
브라우저가 지원하지 않는 자바스크립트 코드를 지원 가능하도록 변환한 코드.
webpack은 번들러
최적화 배포하려면 용량 줄이기,
Development mode VS Production mode
react 코드를 브라우저가 이해를 못함. 그래서 트랜스파일링을 해줘야함.
source map을 이용.
Production mode
Tree shaking : 불필요한 코드 제거해서 빌드하는 것.
Split chunk : 라이브러리와 서비스코드의 분할로 캐시 조건 최적화.
//node module제외하고 js나 jsx 확장자를 만나면 transpiling 해라.
module:{
rules: [
{
test: /\.(js|jsx)
exclude : node_modules
use: 어쩌구
}lazy loading : 지연로딩. 많이 쓰임. 더보기(로딩) 하는 부분. 돔에다가 이미지 같은 거 삽입하는 형식.
import 를 함수 내에서 사용 가능함.
dynamic import
이 개념은 알자!
디바운스
: Debounce 는 입력 주기가 끝나면, 출력한다. ex. 입력이 끝난후 api 값을 가져오는 것
throttling
: 입력 주기를 방해하지 않고, 일정 시간 동안의 입력을 모와서, 한번씩 출력을 제한한다. ex. 200ms 마다 api 값을 가져오는 것
CSE