f1: fullname
f2: appendAddr
f3: removeNames
3개가 각각 타도되고 안타도되는거라면 보통 처음 코딩을하면 이것을 함수하나에서 전부 짜게된다
이는 명령형으로 함수를 짜는것이다.
우리는 선언형으로 짜도록 노력해야한다.
처음짜는 사람은
const useResult (u,caller)=>{
if(caller==="fullname")...
else if (caller === "appendAddr") ....
} //이런식으로 짜게된다.
하지만 이것을 컴포즈로 짜게되면
//화살표 화살표는 커링
//배열의 reduce는 함수형 언어에서 정말 중요하다!
//reduce에서는 함수에 기본값을 주면 함수의 인자로서 넣어준다.
const compose = (...fns) => (obj) =>
fns.reduce((c, fn)=> fn(c), obj);
const data = compose(fullName, appendAddr, removeNames)(u)
이런 방식으로 짠다면 필요한 인수만 넣는것으로 끝날 수 있다.
클러스터링을 하려면 mysql 유료버전을 사야하고 replication은 무료버전으로도 가능(읽기전용)
master slave로나뉜다..
contextAPI와 useReduce같은걸 통칭해서 hook이라고 한다.
react는 2013년에 나왓다
babel은 2014년에 나왓다 왜? 2015년에 ES6가 나왓기때문에 미리준비한것
JSX는 ES6에서 표준으로 넣엇기때문에 babel을 통한다면 표준으로 바뀐다
babel을 쓸때는 터미널에서 받을때 babel.min.js 를 쓰는게 좋다
왜냐면 min이 들어가는건 최소한으로 받는다는 의미
webpack은 파일을 순서에 맞게 자바스크립트 한파일로 만들어준다.
그다음 변수이름을 다 단축화시킨다 (메모리 절약) >> minify한다 라고 한다.
그다음 개행을\r\n 2바이트도 아깝기 때문에 ;세미콜론으로 전환시킨다.
그다음 압축을 한다
이렇게하면 네트워크비용이 절감되기때문에 좋다.
sass등등을 css로 변환하는것까지 다 해준다.
react CRA를 build하면 웹팩이 도는거고 이렇게해서 떨어지는것을 bundle이라고 한다.
번들이 떨어질떄 .map파일이 생기는데 이 파일은 minify한 변수들을 원래변수랑 매핑하는 파일이다
디버깅할떄 s1이런식으로 변수가 찍히면 당황스럽기 때문.
만약 디버깅할 일이 없으면 map파일을 지우고 배포한다 (map도 내려가기때문에)
-SPA-
왜 Single Page이냐
jsx로는 하나의 페이지이지만 AJAX로 받아서 쓰는것이기떄문에 SPA라고한다.
이런거는 SEO같은데서 불리하기때문에 SSR, SSG가 나온것 (Next.js 등..)
JSX
리액트에서의 엘리먼트를 React Element라고 한다
그래서 리액트에서는 React.createElement("태그명", {attribute}) 이런식으로 줬다. (지금은 이렇게 할일이 잘없지만..)
function div(props){
React.createElement('div',props)
}
//이런식으로 tag가 함수로 구성되어있어서 태그를 랜더링하도록한다.
//props를 받는 이유는 태그내부의 값을 변경시키기 위해서이다 (재랜더링할때 이부분이 바뀌는것)React Element의 DOM은 브라우저의 이벤트리스너가 아니라 React에 등록된다
우리가 컴포넌트를 만드는것은 저 위의구조가 있기때문에 그것을 펑션으로 만들어서 리턴하는것
그러면 재 랜더링이 일어날때는 컴포넌트의 함수만 다시 props를 주어서 호출하면 그부분만 다시 랜더링되는것(react가 감시)
ReactDom의 대표적인 함수는 ReactDom.render()
querySelector로 접근하면 접근하는순간 DOM에 접근하는것이다(reactDom이 아니라)
DOM을 접근하는것은 굉장히 무겁기때문에 리액트는 이런 방식을 사용하면 좋지않다.
전체구조를 dom에서 remove하고 append하기는 ㅇ려우니까 virtual dom이 실행컨텐스트에 등록되어있고
virtual dom에 변경사항이 있으면 변경사항이 있는부분만 바꿔서 DOM에 적용시킨다.
virtual dom에서 key를 주는순간 array에서 map으로바뀌기때문에 해당 엘리먼트를 빠르게 찾게된다.
key를 안주면 리액트가 컴파일하면서 자동으로 태그에 key를 붙인다.
vue는 가볍다 (기능이 별로없기때문에)
ember는 자동화가 잘되어있다 (귀찮은게덜함, 대신 기능이많아 무거움)
그래서 react를 쓴다 덜무겁고 기능도 적당히 있고..
넷플릭스도 ember와 react를 섞어쓴다