세션
브라우저 동작방식
우리는 웹브라우저를 만드는 사람이기 때문에
브라우저의 동작방식을 이해하는건 매우매우 중요하다
브라우저란?
웹콘텐츠를 보여준다.
자바스크립트가 돌아가는 플랫폼
이환경을 '호스트; 라고 한다.
브라우저의 윈도우 객체에서 BOM에서 자바스크립트가
가져옴 이를 호스트 환경이라고 함.
브라우저의 기능 :
사용자가 요청한 주소에 따라 정보를 보여줌
서버로부터 데이터를 전송받고, (비트쪼가리)
전송받는 데이터를 변호나.
사용자가 볼 수 있게 표시
브라우저의 구성
사용자인터페이스
브라우저 엔진(사용자와 렌더링사이를 조율.)
렌더링엔진: 화면을 창에 보여주는 역할
네트워크엔진 : HTTP통신프로토콜을 사용하여 외부의 정보를 가져온다.
UIBACKEND : alert창이 운영체제마다 다르다. os별로 기본 장치가 다르다
다른 차이점을 처리. 모바일 앱을 만들게 되면 아주 많이 이용된다.
중요
javascript interpreter : 자바스크립트 코드를 해석
datapersistence :
렌더링 엔진 동작방식(html과 css를 해석 자바스크립트는 자바스크립트 인터프리터가 해석 )
파싱 -> 렌더트리생성 -> 레이아웃 -> 페인트
파싱 : 돔트리와 cssom트리를 만든다. 토큰화된 코드를 구조화하는 것 . 파싱을 해주는 부분을 파서. (언어를 해석 )
렌더트리단계: 돔과 cssom을 묶어서 렌더트리를 만듭니다. 돔트리+ cssom
-->얘가 화면에 나오는 단계를 결정. 너 p태그 너 bold 너 16px (명세)
--결정만 해줌
레이아웃단계: 모양을 계산해서 좌표지정까지
페인트단계 : 배치. 그리기만함 렌더트리를 찾아서 페인트메서드 호출
더티비트시스템
화면의 일부가 바뀌면 처음부터 다시그릴까?
바뀌어야 하는 부분만 찾아바꾼다.
왜? 리소스를 줄이기 위해
맨위에 루트부터 스캔. 바뀐애 찾아서 스캔. 찾아서 작업스케줄러에
넣어놓고 한번에 바꿔버림
더티비트시스템으로 최적화를 해도 순차적으로 이뤄짐
한방에 안됨. 왜 ? 스케줄러가 너무 빨라서.
더티비트시스템
가상돔
리페인팅시 브라우저가 힘들어서
화면에 그려지는 연산들을 줄이고 싶다.
돔을 복사해서 메모리에 넣어노ㅓㅏㅅ다가
한번에 반영
but 가상돔이 무조건 빠르다는 건 반만 맞는말
항상
어떻게 하면 렌더링을 최소화할건지 고민하기
무조건 렌더링 횟수는 줄이세요
리렌더링을 줄이는 방법
컴포넌트가 리렌더링 되는 대표적인 순간
4가지 순간을 잘 컨트롤 해야한다.
스테이트 변경시 한방에
부모컴포넌트가 렌더링할때 자식도 렌더링할 필요가 없는 순간이 있다. -memo사용
context api와 리덕스는 같이 써도 좋다.
간단한 모달 관리를 쓴다면 컨텍스트 좋다.
컨텍스트는 스토어 관리에 빡세다
모듈이 많아질때 리덕스를 사용해라
기능하나하나를 많이 만들어보라.
[프론트 기능만들기]
대시보드 만들기
사용자가 인풋 넣을게 많다.
그 인풋들이 폼으로 관리한다.
그 폼관리하는게 힘들다.
대시보트 표랑 차트.
이벤트 관리
키보드 이벤트 관리
채팅 기능 만들기
달력기능 만들기
캔버스태그 어떻게 돌아가는지
공튀기기
그때그때 필요한 것부터 늘려가기
명세기능들의 차이
하나씩 알아가기
드립다 파기 엑스
v8엔진 까보기
결론 : 코딩을 많이하자
이데이터를 어떤 라이브러리를 써야 빠르게 상태관리를 할 수 있을까
각 라이브러리의 장단점을 알아야 하겠군
하고싶은거 아무거나 골라서 마음껏 해봐라
