220730 TIL

TIL 2022. 7. 31. 13:40

오늘 할 일

주특기 심화 주차 2일차. 개인적으로 정말 몹시 공부와 연관없이 화가 많이 나는 일이 나서 멘탈이 깨졌다. 공부에 지장이 간다. 생각할수록 빡이차올라서 집중이 안된다. 근데 어차피 핑계다. 지금 이순간 제일 중요한건 걍 생각없이 코딩하는 거니까. 근데 그래도 더럽게 열받긴한다. 후우.... 덕분에 한 반나절 날아간거 같은데...여튼 ㅂㄷㅂㄷ할 시간에 손가락이나 놀려야겠다. 진짜 감당이 안될만큼 주체가 안되면 그시간에 풀업이나 조지자. 그래도 분이 안가시면 스쿼트 조지자. 몸의 혈액순환이 잘되야 공부도 잘된다 어차피. .....아씨발 풀업조지고 온다.
운동이 답이었다. 집중 개 잘됨.

오늘 한 것 & 더 봐야할 키워드

UI Backend는 OS별로 브라우저를 관리하고 처리하는 부분? 엄청 중요하다고 함

JavaScript Interpreter는 자바스크립트를 해석해주는 역할.

Data Persistence는 브라우저에서 저장해야되는 상황은 전부 이쪽으로 포함되어 있다.

쿠키 세션 토큰 등등.

렌더링 엔진의 동작

파싱 - 렌더트리 생성 - 레이아웃 - 페인트

레이아웃은 리플아웃? 이라고도 한다

파싱단계 : DOM 트리와 CSSOM 트리를 만든다.

렌더링 엔진의 파싱은 각각의 돔 요소를 잘게잘게 쪼갠다?? 하나씩 쪼개서 파스 트리를 만들어둔다??

레이아웃단계에선 노드들을 어떻게 위에있고 어떻게 나와야하는지 계산하는 단계를 레이아웃단계라고 한다. 이;런걸 전부 좌표로 나타낸다.

리플로우라고도 함.

페인트 단계

계산한대로 배치를 하는 단계. 말그대로 페인트. 그리는 단계이다.

렌더트리를 찾아서 페인트 메소드라는게 있는데 그걸 호출해서 화면에 그려준다.

더티비트 시스템

화면의 일부가 바뀌면 모두 처음부터 다시 그릴까?

아니다. 바꿔야할 부분(dirty)만 체크하여 바꿔준다. 리소스를 줄이기 위해서?

렌더 트리 에서 바꿔야할 부분만 체크한다. 이걸 더티체킹이라한다.

그래서 일부만 나오겠끔한다? 가상돔이랑은 또 다른개념이란다 씨이팔ㅋㅋㅋㅋㅋ

화면을 그리는 연산을 줄이는게 골자이고 핵심.

리액트에선 html이 한개만 존재하기때문에 가상돔이 필요. 왜필요? 최적화하여 빠르게 반영하기위해서.
가상돔을 사용하면 무조건 빨라진다? ㄴㄴ

코드를 어떻게 짜느냐에 따라 실제돔을 건드리는게 더 나을수도 있다.

무조건 렌더링을 최대한으로 줄이는게 핵심이다.

...브라우저 렌더링과정은 재공부와 정리가 필요할 것같다. 아직은 확 와닿지가 않는다.

React Hook
useRef() - 대충 useState()는 값이 업데이트 될 때 마다 화면을 렌더링 시켜준다. 그러할 때 ref를 써주면 값을 배열에 ,,,,,,,,,아오 까먹었네 다시 봐야겠다. 예제코드 붙여서 정리해야겠다.
useEffect() - 이것도 렌더링 관련.
useMemo() - 이것도네? 훅은 렌더링을 덜 해주는 최적화 라이브러리인가? 여튼 이건 초기값을 저장해서 렌더링이 될때마다 함수를 불러서 초기화시키지 않게 하는 것 + 최적화, 다만 따로 메모리를 캐시처럼 저장해서 필요할 때마다 쓰는 개념이기 때문에 남발한다면 오히려 최적화에 악영향을 끼칠 수도 있다.
여기서 원시타입과 객체타입에 대한 개념이 추가로 필요하다.
원시타입은 같은 값을 준 변수를 비교해보면 true값이 나오는데 객체타입은 false값이 나온다. 객체타입은 주어진 값이 똑같더라도 다른 주소값을 가진 값이기 때문에 그런데... 이부분도 다시 한번 봐주면 좋을 것같다.
이펙트는 원시타입에만 적용이 된다. 객체타입에선 밸류값을 줘도 함수가 새로 렌더링 되고 마는데 이럴땐 메모를 활용하여 작성해준다. (이거 다 예제 추가해서 다시 포스팅 할꺼니까 일단 대충 개념 이해된거 까먹기전에 후다닥 작성)

여튼 리액트 훅은 간단한 예제코드 추가해서 다시 정리 해야겠다.

D-80.

그냥하자 그냥하자