웹의 이해1 (HTTP, 프론트엔드, 백엔드, 브라우저의 동작원리)

HTTP(Hypertext Transfer Protocol)

: 서버와 클라이언트가 인터넷상에서 데이터를 주고받기 위한 프로토콜(protocol)

: 작동방식

• HTTP는 서버/클라이언트 모델을 따릅니다.
• 장점
  - 불특정 다수를 대상으로 하는 서비스에는 적합하다.
  - 클라이언트와 서버가 계속 연결된 형태가 아니기 때문에 클라이언트와 서버 간의 최대 연결 수보다 훨씬 많은 요청과 응답을 처리할 수 있다.
• 단점
  - 연결을 끊어버리기 때문에, 클라이언트의 이전 상황을 알 수가 없다.
  - 이러한 특징을 무상태(Stateless)라고 말한다.
  - 이러한 특징 때문에 정보를 유지하기 위해서 Cookie와 같은 기술이 등장하게 되었다.

 

URL (Uniform Resource Locator)

: 인터넷 상의 자원의 위치, 특정 웹 서버의 특정 파일에 접근하기 위한 경로 혹은 주소

(예를 들면 ip는 우리집 주소, 포트는 우리집 각각의 방,

각 서버는 각 하나의 방만 하나씩 차지. 즉 포트 번호가 달라야 된다.)

• 요청 메서드 : GET, PUT, POST, PUSH, OPTIONS 등의 요청 방식이 온다.
• 요청 URI : 요청하는 자원의 위치를 명시한다.
• HTTP 프로토콜 버전 : 웹 브라우저가 사용하는 프로토콜 버전이다.

첫번째 줄의 요청메소드는 서버에게 요청의 종류를 알려주기 위해서 사용.

각각의 메소드 이름은 다음과 같은 의미를 가집니다.

참고로 최초의 웹 서버는 GET방식만 지원해줬습니다.

• GET : 정보를 요청하기 위해서 사용한다. (SELECT)
• POST : 정보를 밀어넣기 위해서 사용한다. (INSERT)
• PUT : 정보를 업데이트하기 위해서 사용한다. (UPDATE)
• DELETE : 정보를 삭제하기 위해서 사용한다. (DELETE)
• HEAD : (HTTP)헤더 정보만 요청한다. 해당 자원이 존재하는지 혹은 서버에 문제가 없는지를 확인하기 위해서 사용한다.
• OPTIONS : 웹서버가 지원하는 메서드의 종류를 요청한다.
• TRACE : 클라이언트의 요청을 그대로 반환한다. 예컨데 echo 서비스로 서버 상태를 확인하기 위한 목적으로 주로 사용한다.

 

 

---

웹프론트엔드의 역할

• 웹콘텐츠를 잘 보여주기 위한 구조(신문,책) - HTML

<h1> 우리집에 오신걸 환영합니다 </h1>
<section >
   <h2> 위치</h2>
    <p> 경기도 시흥시 어딘가 위치하고 있어요~</p>
   <h2> 특징</h2>
    <p>  우리집은 마루가 아주 작아요~  하지만 옹기종기 모여있기 좋은 구조에요</p>
</section>
<footer>email : crong@kdd123.com</footer>

 

• 적절한 배치와 일관된 디자인 등을 제공(보기 좋게), 각각의 HTML 태그(문서의 구조를 표현한 각 조각 단위)를 꾸미기 위한 규칙 - CSS

.window-header-icon {
left: -28px;
position: absolute;
top: 8px
}

.window-header-inline-content {
cursor: default;
display: inline-block;
margin: 4px 6px 0 0
}

• 사용자 요청을 잘 반영해서(소통) html과 css를 움직이고 변경 - Javascript

let aCardList = [];
for (var i = 0; i < cardList.length; i++) {
let str =`${cardList[i]}번째 카드`;
let id = `list-${cardList[i]}`;
aCardList.push(<li id={id} key={i} draggable='true' onDragStart={dragStart}> {str} </li>)
}

참고 사이트 ;

https://html-css-js.com/

HTML CSS JavaScript

 

 

---

백 엔드(Back-End)

backend는 정보를 처리하고 저장하며, 요청에 따라 정보를 내려주는 역할. 가령 쇼핑몰이라면, 상품 정보를 가지고 있고, 주문을 받아서 저장하고, 사용자가 관심있어 하는 상품을 골라주는 역할이 back-End의 역할임.

 

백 엔드 개발자가 알아야 할 것들

• 프로그래밍 언어(JAVA,  Python, PHP, Javascript 등)
• 웹의 동작 원리
• 알고리즘(algorithm), 자료구조 등 프로그래밍 기반 지식
• 운영체제, 네트워크 등에 대한 이해
• 프레임워크에 대한 이해(예: Spring)
• DBMS에 대한 이해와 사용방법(예: MySQL, Oracle 등)

 

 

---

브라우저의 동작 이해 

: 월드와이드웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어

인터넷에서 특정 정보로 이동할 수 있는 주소 입력창이 있고 서버와 HTTP로 정보를 주고 받을 수 있는 네트워크 모듈도 포함. 서버에서 받은 문서(HTML, CSS, Javascript)를 해석하고 실행하여 화면에 표현하기 위한 해석기(Parser)들을 가짐. 그리고 브라우저마다 서로 다른 엔진을 포함

 

++ 웹을 통해서 전달되는 데이터는 어딘가에서 해석돼야 하는데.

서버에서 전송한 데이터(HTML과 같은)가 클라이언트에 도착해야 할 곳이 바로 'Browser'.

Browser에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링엔진이 포함되어 있음.

 

위 그림을 설명하자면, HTML을 해석해서 DOM Tree를 만들고, CSS를 해석해서 역시 CSS Tree(CSS Object Model)을 만듦. 이 과정에서 Parsing 과정이 필요하며 토큰 단위로 해석되는 방식은 일반적인 소스코드의 컴파일 과정.

DOM Tree와 CSS Tree, 이 두 개는 연관되어 있으므로 Render Tree로 다시 조합. 이렇게 조합된 결과는 화면에 어떻게 배치할지 크기와 위치 정보를 담고 이후에 이렇게 구성된 Render Tree정보를 통해서 화면에 어떤 부분에 어떻게 색칠을 할지 Painting과정을 거치게 됨.(https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)

 

참고로 브라우저의 렌더링은 시스템 자원을 많이 잡아 먹기 때문에 DOM의 구조가 바뀌지 않는 스크롤이나 탐색기능을 사용할때는 다시 렌더링 하지않고, CSS style 만 변경하여 재배치 한다.

 

 

---