2022년 06월 03일 숙련 주차 진입

• 리액트 숙련 주차가 시작되었다. 시간이 정말 정말 빠르게 흐른다. 이번 주까지는 자바스크립트 기본을 다져놓으려 한다. 리액트만 주구장창 보자니 자바스크립트랑 소원해진 느낌이 들어서 빠르게 드림코딩의 브라우저101강의를 훑어보고있다. 웹 애플리케이션에 대한 전반적인 내용을 훑어주는 강의라 지금 같을 때 꼭 나에게 필요한 강의이다. 브라우저가 어떻게 HTML파일을 읽어오는지, DOM, CSSOM, Render tree에 대해서  배웠다. 옛날엔 너무나 혼란스러웠던 내용들이 이젠 '아~ 이래서 이걸 쓰는구나' 하며 짐짓 이해를 하는 내 모습이 대견하게 느껴졌다. 성장을 하고 있긴한가보다.
• 예쁜 분홍색깔 찾음:  #E0529D

배운 것

 

Javascript

Compiler vs interpreter

• Compiler : 한번에 해석, 준비가 길다. 실행 빠름. 잘못친 코드 확인 중간에 발견이 어려움.
• interpreter: 코드 한줄한줄 해석. 준비가 빠르다. 실행 느림 대신 오류, 실수 발견 용이. (inter = between)

 

DOM 큰 그림 이해하기

: 브라우저가 웹 페이지를 파싱할 떄 글로벌 오브젝트로 window라는 객체가 들어온다.

모든 오브젝트는 window를 상속한다.

이 window객체는 document를 노드 트리 형태로 가지는 DOM과

브라우저의 추가 기능을 쓸 수 있게 해주는 BOM,

Javascript 기능들을 담은 객체를 담고있다.

 

Html 파일을 읽어올 떄 어떻게 DOM요소로 변환할까?

DOM은 html tag를 한줄한줄 해석해서 그에 상응하는 javascript node로 만들어 낸다.

하나하나의 노드들이 상속에 상속을 거쳐 위로 올라가면 결국 event target에 닿는다.

모든 노드는 event target 이다.

이것이 모든 노드들이 event 속성을 사용할 수 있는 이유이다. 

• 모든 노드가 event target에 상속되는 과정 

*DOM: html태그를 javascript node로 변환시켜줌

*BOM: 브라우저에서 사용할 수 있는 추가 기능을 주는 객체들(navigator, location, fetch 등...)

*CSSOM: DOM + CSS(cascading 방식으로 브라우저 기본css, inline css, 외부 css 등을 종합).

*Render tree: DOM과 CSSOM을 추합해서 유저에게 보여지는 부분만 선별한 트리 구조. (head태그, display:none 이런 애들은 안 올라감 그런데 opacity:0, visibility:hidden 이런 애들은 보이진 않아도 실제로는 있는 애들이기 떄문에 추가됌)

 

웹 브라우저의 Rendering engine 동작

(Constructor)

HTML 받아옴 ---- DOM, CSSOM 트리 생성 ---- 렌더 트리 생성(DOM + CSSOM 합쳐 최종 결과물)

(Operation)

---- layout  ---- paint ---- compostion

layout을 잡아주고(layout) 세부적으로 layout을 묶어보고(paint) 실제로 구성하는 애를 뿌려준다(compostion).

 

*operation에서 성능 개선이 가능하다. 

고쳐지는 부분이 layout < paint < composition 순일 때  성능 개선이 일어난다.

React

Web pack: budler 연관성있는 모듈들을 하나로 묶어준다.

Babel : js(ES6 or latest version of JS), jsx를 쓸 수 없는 브라우저 환경에서 쓸 수 있게 해주는 컴파일러

 

Usestate 상태관리

리액트 엘리먼트는 기본적으로 불변객체이다.

불변 객체는 한번 할당이 되면 맨입으론(직접) 변경 시킬 수 없는 객체를 말한다.

이 불변객체의 무언가를 변경 시키려면 어떤 값이 변했으니 업데이트 시켜달라고 해주어야 하는데, 이때 어떤 값이 state이다.

이 어떤 값이 변했다는걸 알리려면 임의로 데이터를 할당하여 변경하면 안되고(직접 변경) 새로운 객체를 만들어 적용해주어야한다.

*리액트 엘리먼트

: 컴포넌트에서 return 메서드의 값으로 넘어오는 태그, jsx들. 리액트에서 가장 작은 단위의 요소.

 

컴포넌트 추상화

불필요한 정보 제거하고 문제해결에 필요한 정보, 코드들만 남기는 작업.

 AddressListItem을 ListItem으로 변경하면서 ListItem 컴포넌트는 자연스럽게 레이아웃이라는 하나의 문제에 집중했다.

그 외의 것들은 제거하고 외부에 위임했다. 

 

useCallBack()

어디 넣어놨다가 필요할 때만 함수를 쓰겠다.(메모리 낭비 줄임)

useEffect와 쓰는 법은 같다.

근데 강의에선 의존성 배열에 빈 배열 넣으니 원할 떄 함수가 써진다??? (빈 배열 넣으면 첫 렌더링 때만 실행인데?? -> 이해 안감

 

아쉬운 것

점심먹고 집중력이 흐트러진다. 그럴 땐 사람들이랑 같이 어울려서 하자.