당분간 중점을 두고 공부할 내용
1. 바닐라자바스크립트
2. 브라우저 관련 내용
3. Webstrom, IDE 사용
추가로 +
Markup 에대해 얼마나 잘 아는가?
Css 전처리기, 효율적인 방법?
아토믹 css 를 위해서는?- 발표자료보기
크로스브라우징
기기별 디버깅방법
클래스, 함수형 컴포넌트 차이
Use effect lifecycle
클래스 컴포넌트 공부
리덕스 및 업뎃 과정
리액트없이도 바닐라 js로 만들 수 있는가? - 바닐라js를 열심히 공부하자!
이슈트래커 - 지라
Html 렌더 과정 더 자세히 - 어느 포인트에서 성능개선할 지 잘 알기 위해
기록할 것
- Css import 네트워크요청 크리티컬패스 - 지양
- 헤드태그에서 스타일태그 넣어줘서 바디태그에서 어떤구조로 렌더할지 미리 알게하는 것
- 리덕스 사용에서 마지막 단계에 Props 강제로 변경을 하면 안됨 생태계가 망가짐
공부한 것
브라우저는 렌더링을 수행하는 엔진을 가지고 있고
크롬은 블링크(Blink), 사파리는 웹킷(Webkit) 그리고 파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용한다.
DOM 생성
1. 변환
렌더링과정에서, 처음 브라우저는 html 원시 바이트를 읽어오고
html에 정의된 인코딩 (예: utf-8)에 따라 개별 문자로 변환
2. 토큰화
브라우저가 문자열을 w3c 표준에 지정된 고유 토큰으로 변환
3. 렉싱
방출된 토큰은 속성 및 규칙을 정의하는 객체로 변환
4. dom 생성
마크업에 정의된 여러 태그 간의 관계 해석해서 구조로 연결됨
CSSOM 생성
외부 참조된 css 파일이 있다면 위와 같은 과정으로 cssom 트리 생성. 브라우저가 이해하고 처리할 수 있는 형식으로 변환
dom과 cssom을 합쳐서 렌더링에 필요한 노드만 포함한 render tree를 생성한다.
Layout 단계
뷰포트 내에서 각 요소의 정확한 위치와 크리를 캡처하는 박스모델 출력. 모든 상대값은 절대 값(픽셀)로 변환
