1. 웹 프로그래밍 기초 - #1. 웹 개발의 이해, FE/BE (3)

본 게시물의 내용은 edwith 부스트코스 - 웹 프로그래밍 강의를 수강한 내용을 바탕으로 한다. 들은 내용을 정리하고, 복습에 용이하도록 정리해놓은 게시물이다.

이번 차시의 강의는 다음과 같다. 배경색이 들어간 부분이 이번 게시글에서 다룰 내용이다.

1. 웹 프로그래밍 기초 - #1. 웹 개발의 이해, FE/BE

1). 웹 프로그래밍을 위한 프로그램 언어들

2). 웹의 동작(HTTP 프로토콜 이해)

3). 웹 FE와 웹 BE

4). Browser의 동작

5). Browser에서의 웹 개발

6). 웹 서버

7). WAS(Web Application Server)

4). Browser의 동작

Intro

Browser란, 우리가 흔히 웹서핑을 할 때 사용하는 크롬이나 인터넷 익스플로러, 사파리 등의 소프트웨어를 말한다. 이러한 종류의 소프트웨어는 웹 상에서, 각자 하나의 클라이언트가 되어 원하는 웹 서버에 정보를 요청하고, 받은 정보를 사용자에게 보여준다.

원래 웹 개발을 할 때 Browser 내부를 들여다 볼 필요는 없었으나, 어느 정도 이해를 하고 웹 개발을 하게 되면 수월한 개발이 가능하다고 한다. 따라서, 브라우저가 어떤 기능을 어떤 흐름으로 수행하는지 정도에 대해 너무 깊게는 말고 간단하게 알아보도록 하겠다.

Browser의 구성과 기능

브라우저의 구성은 크롬이나 사파리 등 브라우저마다 다르지만, 강의에서 본 예시는 다음과 같다

UI
Browser Engine
Rendering Engine
Networking Module
Javascript Interpreter Module
UI-Backend

이러한 요소들을 가진 채, 브라우저가 웹 서버에게 웹 서비스를 요청하고 나서 받아온 웹 페이지를 보여주게 된다. 웹 페이지를 구성하는 코드의 종류는 보통 HTML, CSS, Javascript 이 3가지이다. 이 페이지를 개발자의 구현 목적에 맞게 사용자에게 보여주기 위해서 브라우저는 다음의 과정을 따른다.

HTML 코드를 파싱해서 DOM(Document Object Tree)의 형태로 만든다.
CSS 코드를 파싱해서 마찬가지로 Tree의 형태로 만든다.
Render Tree를 생성한다(HTML 코드와 CSS 코드를 합친다).
생성한 Render Tree를 화면에 그린다.

이 과정을 그림으로 나타낸 것이 다음 그림이다.

사파리 브라우저에서 처리되는 webkit렌더링엔진의 처리 과정https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

DOM, CSSOM과 둘을 합친 Render Tree, 출처: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/images/render-tree-construction.png?hl=ko

5). 브라우저에서의 웹 개발

Intro

웹 사이트가 어떤 코드로 구성되어있는지 알아보자. 윈도우는 Ctrl + shift + i, 맥은 Option + command + i 를 누르면 다음과 같은 화면을 볼 수 있다.

네이버 홈 화면에서 ctrl + shift + i 를 누르면 나오는 화면

이 화면의 우측에 나타난 탭에서, 보고 있는 웹 사이트가 어떤 요소들로 구성되어있는지 알 수 있다. PNG, script 등 여러 요소로 구성되어있다.

HTML

웹 개발을 하려면, 웹 페이지의 구조를 표현한 HTML언어의 특징을 알아야 한다. HTML 언어는 다음과 같은 특징을 가진다.

<html>태그로 시작해서, </html>태그로 끝난다.
<head>태그에는 문서에 대한 정보를 담는다.
<body> 내부에는 화면에 포함되어야 하는 <div>등을 포함한다.
HTML은 계층적 언어이다.
tag를 사용해서 표헌한다. 예를 들면, <tag calss = "title"> 안녕하세요 </tag>
* <script>는 웹 페이지 안에서 입력한 코드를 동적으로 실행하는 부분이다. <script>코드는 렌더링(HTML과 CSS를 합쳐 화면에 띄우는 것)을 방해할 수 있으므로, <body>가 끝나기 직전이나 끝난 후에 입력하도록 한다.

여기까지 브라우저의 구성, 기능, 역할 등에 대해 알아보고, 웹 페이지를 구성하고 있는 HTML언어에 대해 간단히 알아보았다. 알아보았다고는 하지만, 직접 해본게 없으니 아직 모르겠다. 전에 안드로이드 스튜디오로 어플을 구현한 적이 있는데, xml형식으로 UI화면을 만들었던 것과 유사해보인다. 그럼 다음 게시물에선, 웹 서버와 WAS에 대해 알아보겠다.

'공부 > 웹 프로그래밍' 카테고리의 다른 글

1 . 웹 프로그래밍 기초 - #2. HTML - FE (4)	2020.01.07
1. 웹 프로그래밍 기초 - #1. 웹 개발의 이해, FE/BE (4) (0)	2020.01.03
1. 웹 프로그래밍 기초 - #1. 웹 개발의 이해, FE/BE (2) (2)	2020.01.03
1. 웹 프로그래밍 기초 - #1. 웹 개발의 이해, FE/BE (1) (0)	2020.01.03
edwith 부스트코스 - 웹 프로그래밍 강의 수강 시작 (2)	2020.01.03

섹시한 개발자의 기록

1. 웹 프로그래밍 기초 - #1. 웹 개발의 이해, FE/BE (3)