배움 일기(3)
-
브라우저의 렌더링 과정
브라우저의 렌더링 과정 1. DOM Tree 생성 1.1 브라우저의 렌더링 엔진이 html 코드를 읽고 파싱한다. 2. CSSOM (CSSDOM) 생성 2.1 css파일 인라인 css 코드를 파싱한다 2.1 이 때 DOM 과 CSSOM 을 합쳐서 render Tree가 만들어진다. 3. Layout 단계 3.1 각 노드(html element) 들이 스크린에서 좌표에 따라 위치를 결정한다. 3.2 Position, size 등이 Layout 단계에서 결정 된다. 4. Paint 단계 4.1 실제로 화면에 그려지는 과정이다.
2022.06.26 -
MPA & SPA
MPA (Multi Page Application) 브라우저는 웹서버에게 경로요청을 한다. 그리고 웹서버는 브라우저에게 html 을 제공한다. 우리는 이런 방식을 Multi Page Application (MPA) 방식 이라고 한다. 이러한 MPA방식의 장점은 SEO(검색엔진)에 유리하다는 것이다. MPA는 완성된 형태의 HTML 파일을 서버에서 전달 받기에 검색엔진이 페이지를 크롤링 하기에 유리하다. 또한 첫 로딩이 매우 빠르다. 빠른 이유는 위와 같이 서버에서 이미 렌더링을 해서 가져온다는 것이다. 장점이 있으면 분명히 단점도 있다. 일단 새로운 페이지를 이동하면 깜빡 거린다. 이러한 이유는 ux관점에서 매우 좋지 않다. 위의 장점을 보면 당연하다고 생각 할 수도 있다. 매 페이지의 요청마다 리 로드..
2022.06.03 -
새롭게 배운 내용 (개발자 단체카톡)
Udemy 라는 강의 사이트에서 Winterlood 님의 React 강의를 수강하고 있다. 강의 퀄리티도 매우 뛰어나지만 가장 만족한 것은 수강생들의 단체 오픈 카톡방이 존재한다는 것이였다. 학원에서는 주로 java 를 사용해서 서버를 배운다. int a = 10; console.log(10
2022.05.26