티스토리 뷰
서버 개발자를 진로로 생각중인데 그렇다고해서 한 우물만 판다기 보다는
서버 + 프론트엔드, CentOS와 같은 리눅스, 머신러닝 or 딥러닝와 같은 추가적인 지식을 갖고 있으면
프로젝트나 실무에 투입되어 협업할때 더 도움이 될 수도 있고 단순히 그러한 지식이 있다는 것만으로도 나의 경쟁력을 키워준다고 생각한다. 이러한 이유도 있고 프론트와 자바스크립트에 대해 호기심도 생겨서 이번에 서버 사이드 개발을 다시 공부하면서 FE도 함께 해보는 중이다.
웹 브라우저(Web Browser)의 기본 구조
위와 같은 구조로 이루어져 있다.
- Browswer Engine - 브라우저와 관련된 소프트웨어를 동작하는 엔진.
- Rendering Engine - 웹 페이지에 대한 컨텐츠 및 데이터를 위해 동작하는 엔진. 렌더링 역할을 하는 엔진이 브라우저마다 다르기 때문에 같은 페이지가 다르게 보이는 경우가 있다. 출처: https://mygumi.tistory.com/173
- Networkging - http 프로토콜을 통해 서버와 네트워크 통신
- JS Interpreter - 자바스크립트를 해석
- UI Backend - 클라이언트의 요청을 서버로 전달
- Data - 웹 페이지와 관련된 데이터를 저장
Main flow
주요한 구성은 다음 과 같다.
1. html을 parsing 해서 DOM Tree 생성
2. css를 parsing 해서 Style Rulus 생성
3. 1과 2번을 합쳐 Render Tree 생성
4. 실제 User가 볼수있도록 Painting(블록들을 배치, 색칠 등..)하고 Display
위 그림을 기억해두고 웹 페이지 개발을 하다가 헷갈리거나 막힌다면 저 그림을 떠올려 보라고 한다.
DOM Tree
|
1
2
3
4
5
6
7
8
|
<html>
<body>
<p>
Hello World
</p>
<div> <img src="example.png"/></div>
</body>
</html>
|
cs |
이런한 html 코드의 태그와 텍스트, 이미지와 같은 각 항목을
이와 같은 트리(계층)형태로 표현한것을 DOM(Document Object Model) Tree라고한다.
출처 : https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
'Web' 카테고리의 다른 글
| JPA, ORM, Hibernate, JPQL (0) | 2021.09.09 |
|---|---|
| Apache Tomcat과 Apache (0) | 2021.08.14 |
| URL과 URI의 차이 (0) | 2021.07.26 |
| HTTP 프로토콜 (0) | 2021.07.21 |
| [Django] MVC 패턴과 MTV 패턴 (0) | 2021.07.14 |
Comments
Related Articles
more
