오늘 새로 배운 것
JS 개념 나중에 다시 공부하면서 정리할 예정. 일단 메모한 내용을 남겨놓았다.
생각보다 아래 질문들에 대해 즉각즉각 답을 하지 못하거나 놓치고 있는 부분들이 많았다.
MPA와 SPA
MPA는 페이지마다 새로 서버에서 새로 html 파일을 다운받아서 클라이언트에서 가지고있는 CSS,JS로 렌더링
SPA는 한 개의 html 파일에서 변경되는 일부만 Virtual DOM으로 변경된 부분을 감지해서 데이터 통신을 통해 부분적으로 렌더링
DOM과 가상 DOM
DOM은 자바스크립트 언어를 화면에 나타내기위한 표준. DOM은 랜더링되는 과정이 복잡하다는 한계가 있습니다. 이러한 문제점을 해결하기 위한 등장한 것이 가상 DOM입니다. 가상DOM은 DOM과 같은 객체를 메모리에 저장한 것. 이 가상 DOM과 DOM의 비교를 통해 DOM에서 변화가 있는 부분만 렌더링하는 것이 리액트의 특징입니다. 즉, 가상 DOM은 DOM을 필요에 따라 랜더링하기 위한 하나의 메모리라 정리할 수 있습니다.
dom은 웹페이지를 객체로 표현하는 것으로 직접 조작해서 브라우저에 반영하는데, 가상 dom을 활용하면 렌더링 횟수를 줄일 수 있다.
Virtual DOM은 기본개념은 실제 DOM이 DOM tree로 구성되어있는데 이것과 구조과 완전히 똑같이 복사된 DOM. 근데 DOM에 원래 있는 화면에 그리기 위한 api(getElementById 같은 거)가 Virtual DOM에는 빠져있다. react는 태그 하나하나가 JS Object 형태로 되어있다. 실제로 아래처럼 그렇진 않지만 쉬운 예를 들면,
//예)
Const ul = {
tag name:’li’,
value:{
tag name:’li’
value:’a’
}
}한번만 그리기 때문에 SPA 비교를 Virtual DOM으로 하나하나씩 비교
어떤 element가 변경됐는지 비교가 끝나면 실제 DOM으로 변경시키는데
React는 변경사항들을 다 모아서 한번만 렌더링.
React에서 state를 변경하는거는 실시간이 아니라 비동기로 변경한다.
Batch Update 일괄 작업
JS의 런타임 환경
자바스크립트의 런타임환경 2가지는 브라우저, node환경. 과거에는 브라우저에서만 자바스크립트가 실행될 수 있었지만 업데이트를 통해 node환경과 같이 브라우저밖에서도 동작할 수 있게 되었음.
불변성 무엇이고? 리액트에서 불변성이 왜 중요한가?
불변성은 데이터의 변하지 않는 속성. 리액트에서 불변성이 중요한 이유는 리액트 가상돔은 메모리의 참조값을 기준으로 비교를하기 때문. 참조값이 변하지 않는다면 리액트는 변화로 감지하지않아 랜더링에 반영하지 못함.
가변성과 불변성은 리액트에서의 리렌더링조건과 연결되므로 중요. 배열에서도 map, filter과 같이 기존의 배열을 수정하는 것이 아닌, 새로운 배열을 내뱉어주는 함수들이 불변성 함수에 해당.
리액트가 값이 변경되었는지 안 되었는지를 알려면 메모리값이 바뀌었는지를 알아야한다. 메모리 값이 바뀌어야만 바뀐 것을 인식.
면접 때 불변성 질문 나오면 map, filter 함수 같이 언급할 것.
일반 함수, 화살표 함수 차이점
일반 함수는 this를 써야 가르키는게 무엇인지 알고 화살표 함수는 없어도 됨
화살표 함수는 this 바인딩 안하고 일반함수는 this 바인딩 함.
this에 새로운 값을 할당하는 것이 this 바인딩.
this바인딩 필요없는 경우에 화살표 함수 사용한다.
Export 와 export default의 차이
export는 import 하는 함수 이름 변경 가능하냐 아니냐 export default는 js파일에서 가장 중요한 것을 내보내는 것, 한개만 가능, 그냥 export는 여러개 할 수 있다.
export default는 하나의 파일 내에 대표적인 함수 하나만 export하는 것.
그냥 export는 한 파일 내에 여러 변수, 함수 등을 export 가능
export 할 경우에는 import { 함수명 } from * 으로 사용하는데,
export default 하실 경우에는 import 함수명 from
Redux, Context API
콘텍스트 api
리덕스도 콘텍스트 기반 api
순수함수란?
어떤 함수에 동일한 인자를 줬을때 항상 같은 값을 리턴하는 함수
예시)
리액트가 바로 순수함수
CSR과 SSR의 SEO 관점에서의 비교
CSR은 빈 html에 클라이언트에서 필요한 부분을 추가하기 때문에 빈 html을 검색 엔진이 감지하기 어렵다. SSR은 서버에서 완성된 html을 주기 때문에 검색 엔진이 감지하기 유리하다. CSR은 index.html 하나뿐이라 크롤링 봇이 가져갈 게 없어서 SEO에 취약하다.
