웹의 동작 (HTTP 프로토콜 이해)
인터넷 != WWW
HTTP의 이해
보통 인터넷을 World wide web이라고 생각한다.
그만큼 많은 사람들이 웹 브라우저를 많이 사용한다. 그러나 www가 인터넷의 전부는 아니다
하나의 컴퓨터에는 서버가 많이 존재할 수 있고 각각의 서버는 포트라는 값으로 구분되서 동작한다.
인터넷은 한마디로 네트워크들의 네트워크라고 말할 수 있다.
TCP/IP라는 약속으로 연결되어 있다.
인터넷 중 웹에서는 서로 통신하기 위해서 http를 사용한다.
http는 서버 클라이언트 모델을 사용한다.
연결, 요청, 응답
하지만 이 방식의 서버는 요청만 받을 뿐 사용자를 구분하지 못한다.
장점은 불특정 다수를 대상으로 하는 서비스에 적합하다.
윈도우의 공유폴더는 접속자가 10명으로 한정되어 있다.
위의 이 무접점 방식은 계속 연결되어있지 않기 때문에 많은 사람에게 줄 수 있다.
하지만 그 전의 데이터는 사라질 가능성이 있다.
그래서 이런 것들을 해결하기 위해서 Cookie와 같은 기술들이 등장하게 되었다.
URL(Uniform Resouce Locator)
URL은 웹상에서 문서와 다른 자원들 이미지라든가 동영상 등의 자원들의 위치를 나타내기 위해서 사용된다.
URL은 세 부분으로 나눠지는데
첫 번째는 프로토콜의 종류를 나타내고
두 번쨰는 자원이 있는 서버의 IP 주소, 도메인 주소, 포트번호를 나타내고
세 번째는 자원의 위치를 나타낸다.
물리적인 서버를 찾기 위해서 반드시 필요한 것은 IP 주소나 도메인 주소이다.
물리적인 컴퓨터를 찾은 후에 해당 컴퓨터 안에 등장하는 소프트웨어 서버를 찾기 위해서는 포트 값이 필요하다.
하나의 컴퓨터에는 IP가 하나 존재하고 집 안의 방들을 포트라고 생각하면 되고, 각 서버는 하나의 포트를 차지해야 한다.
요청되는 데이터들은 아무렇게나 그냥 가는 게 아니라 정해진 규칙이 있다. 이것을 요청 데이터 포맷이라고 하는데
헤더 부분, 빈 줄 부분, 요청 바디 부분으로 나뉜다.
요청 메서드 : GET, PUT, POST, PUSH, OPTIONS 등의 요청 방식이 온다.
요청 URI : 요청하는 자원의 위치를 명시한다.
HTTP 프로토콜 버전 : 웹 브라우저가 사용하는 프로토콜 버전이다.
참고로 최초의 웹 서버는 GET방식만 지원해줬습니다.
GET : 정보를 요청하기 위해서 사용한다. (SELECT)
POST : 정보를 밀어 넣기 위해서 사용한다. (INSERT)
PUT : 정보를 업데이트하기 위해서 사용한다. (UPDATE)
DELETE : 정보를 삭제하기 위해서 사용한다. (DELETE)
HEAD : (HTTP) 헤더 정보만 요청한다. 해당 자원이 존재하는지 혹은 서버에 문제가 없는지를 확인하기 위해서 사용한다.
OPTIONS : 웹서버가 지원하는 메서드의 종류를 요청한다.
TRACE : 클라이언트의 요청을 그대로 반환한다. 예컨대 echo 서비스로 서버 상태를 확인하기 위한 목적으로 주로 사용한다.
바디 요소는 요청 메서드가 POST나 PUT을 사용하게 됐을 때 들어오게 된다.
웹 Front-End와 웹 Back-End-1
프런트엔드 사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)을 제공한다.
또한 사용자의 요청(요구사항)에 반응해서 동작한다.
문서를 전달한다는 것은 적절한 배치와 일관된 디자인
일관되지 않더라도 보기 좋고 아름다운 다자인을 제공하는 것이 좋다.
웹 프런트엔드의 역할
웹 콘텐츠를 잘 보여주기 위해 구조를 만들어야 합니다.(신문, 책 등과 같이) - HTML
적절한 배치와 일관된 디자인 등을 제공해야 합니다.(보기 좋게) - CSS 사용자 요청을 잘 반영해야 합니다.(소통하듯이) - Javascript
HTML 코드
원하는 문서의 구조를 프로그래밍 언어로 표현해야 합니다.
HTML이라는 것은 그 구조를 잘 표현해 줍니다.
스타일 - CSS 코드 예시
웹페이지를 꾸미기 위해서는 각각의 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
}
동작 - JavaScript 코드 예시
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>)
}
웹 Front-End와 웹 Back-End-2
백 엔드(Back-End)란?
backend는 정보를 처리하고 저장하며, 요청에 따라 정보를 내려주는 역할을 한다. 가령 쇼핑몰이라면, 상품 정보를 가지고 있고, 주문을 받아서 저장하고, 사용자가 관심 있어하는 상품을 골라주는 역할이 back-End의 역할이다
백 엔드 개발자가 알아야 할 것들
프로그래밍 언어(JAVA, Python, PHP, Javascript 등)
웹의 동작 원리
알고리즘(algorithm), 자료구조 등 프로그래밍 기반 지식
운영체제, 네트워크 등에 대한 이해
프레임워크에 대한 이해(예: Spring)
DBMS에 대한 이해와 사용방법(예: MySQL, Oracle 등)
browser의 동작-1
브라우저는 어떻게 동작하는가?
브라우저는 월드와이드 웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어입니다.
인터넷에서 특정 정보로 이동할 수 있는 주소 입력창이 있고 서버와 HTTP로 정보를 주고받을 수 있는 네트워크 모듈도 포함하고 있습니다.
그리고 서버에서 받은 문서(HTML, CSS, Javascript)를 해석하고 실행하여 화면에 표현하기 위한 해석기(Parser)들을 가지고 있습니다.
브라우저마다 서로 다른 엔진을 포함하고 있습니다.
아래 그림이 대표적인 내용입니다.
HTML을 해석해서 DOM Tree를 만들고, CSS를 해석해서 역시 CSS Tree(CSS Object Model)을 만듭니다.
이 과정에서 Parsing 과정이 필요하며 토큰 단위로 해석되는 방식은 일반적인 소스코드의 컴파일 과정이라고 보시면 됩니다.
DOM Tree와 CSS Tree, 이 두 개는 연관되어 있으므로 Render Tree로 다시 조합됩니다.
이렇게 조합된 결과는 화면에 어떻게 배치할지 크기와 위치 정보를 담고 있습니다.
이후에 이렇게 구성된 Render Tree정보를 통해서 화면에 어떤 부분에 어떻게 색칠을 할지 Painting과정을 거치게 됩니다.
브라우저 엔진: 소스코드를 화면에 실행해서 보여주는 엔진/ 브라우저 소프트웨어를 구동시키는 핵심 엔진
1.HTML을 parsing을 하게 되어 있다. 문자 단위로 해석해서 의미를 파악하는 것을 어떠한 데이터 객체로 구조화시킨다.
2.트리 구조의 형태로 html태그를 가지게 되고
3.랜더 트리를 기준으로 css랑 합치고 스타일 정보와 구조를 합쳐서 화면의 위치를 결정하고
4.그림을 그리게 된다.
렌더링 엔진: 화면에 위치를 잡고 색칠을 해 주는 픽셀 단위로 그려져서 우리가 다양한 형태를 볼 수 있다
브라우저 별로 메인 다르다.
browser의 동작-2
parsing general- 일반적인 파싱의 방법에 대해서 설명
2 + 3 - 1 을 분석하기 위해서
개개를 다 분리해서 이것들이 가진 의미 더하기면 +면 앞과 뒤를 합치고 그 결과
기호를 만나면 앞의 값과 숫자를 토큰이라고 하는데 이렇게 트리를 만들어서
트리에 따라서 값이 처리가 일어나게 된다.
파싱을 컴파일러 부분인데 토큰 단위로 잘라서 의미를 해석하고 의미에 따라서 실행
HTML 파서 부분이 있다.
HTML 문법은 태그를 쓰고 꺾쇠를 닫고 이런 코드를 다룰 수 있다.
HTML을 짤 것이기 때문에 기본적으로 마크업 형태로 이루어져 있는데
마크업의 구조
html 파싱 과정
css도 룰이 있고 벨류가 있고 key와 valu의 구조로 되어있는데.
css 파싱
그리기 순서
CSS 2는 그리기 과정의 순서를 정의했다. 이것은 실제로 요소가 stacking contexts에 쌓이는 순서다. 스택은 뒤에서 앞으로 그려지기 때문에 이 순서는 그리기에 영향을 미친다. 블록 렌더러가 쌓이는 순서는 다음과 같다.
배경 색
배경 이미지
테두리
자식
아웃라인
browser에서의 웹 개발-1
HTML 문서 구조
뜯어보자 웹사이트!
먼저 크롬 브라우저가 없다면 설치하기
크롬 브라우저를 열고 크롬 개발자 도구 열기
윈도우 (Ctrl + Shift + I)
접속 : http://www.amazon.com
알게 된 몇 가지 특징
HTML 문서는 html이라는 태그로 시작해서 html태그로 끝납니다.
head는 무엇을 하는 걸까요?
body는 무엇을 하는 걸까요?
HTML은 계층적입니다.
HTML은 tag를 사용해서 표현합니다.
<tag class ="title">안녕하세요</tag>
JavaScript와 CSS가 html 안에 여기저기 존재합니다.
JavaScript는 </body>태그 위에 위치하는 것이 권장된다.
웹서버
웹 서버란?
웹 서버는 소프트웨어(Software)를 보통 말하지만, 웹 서버 소프트웨어가 동작하는 컴퓨터를 말합니다.
웹 서버의 가장 중요한 기능은 클라이언트(Client)가 요청하는 HTML 문서나 각종 리소스(Resource)를 전달하는 것입니다.
만약 리소스가 존재하지 않거나 요청한 리소스를 전송할 때 문제가 발생한다면 에러 메시지를 전송하게 됩니다.
웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장된 정적(static)인 데이터이거나 동적인 결과가 될 수 있습니다.
정적인 데이터란 보통 이미지, HTML, CSS, JavaScript같이 컴퓨터에 저장되어 있는 파일들을 의미한다.
동적인 결과란 웹 서버에 의해서 실행되는 프로그램을 통해서 만들어진 결과물을 이야기한다.
웹 크롤러는 네이버나 구글에서 다른 웹사이트 정보를 읽을 때 사용하는 소프트웨어이다.
웹 서버 소프트웨어의 종류
가장 많이 사용하는 웹 서버는 Apache, Nginx, Microsoft IIS
Apache 웹 서버는 Apache Software Foundation에서 개발한 웹서버로 오픈소스 소프트웨어(Open-source Software)이며, 거의 대부분 운영체제에서 설치 및 사용을 할 수 있습니다.
Nginx는 차세대 웹서버로 불리며 더 적은 자원으로 더 빠르게 데이터를 서비스하는 것을 목적으로 만들어진 서버이며 Apache웹 서버와 마찬가지로 오픈소스 소프트웨어입니다.
HTTP(Hypertext Transfer Protocol)으로 인터넷상의 데이터를 주고받기 위한 프로토콜을 이야기한다.
프로토콜은 규약이라는 의미를 가지고 있다.
인터넷상의 데이터를 주고받기 위한 규약을 이야기한다.
클라이언트와 서버는 미리 정해놓은 규칙을 가지고 통신을 하고 있다.
개발자도구 네트워크 창
1. 주소에서 HTML 문서를 요청
2. 서버는 HTML 문서를 브라우저에 전달
3. 웹 브라우저는 문서를 읽고 해석 리소스들에 URL 추출하고
4. 웹 서버에 동시에 여러 개의 리소스를 요청
5. 웹 서버는 동시에 요청한 여러 개의 요청을 받아들여서 그 결과를 브라우저에게 전송한다.
6. 웹 브라우저는 아까 해석했던 HTML 문서와 그리고 읽어 들인 여러 개의 응답을
하나로 합쳐서 그 결과를 화면에 보이게 한다.
이렇게 하나로 합쳐서 보여주는 작업을 렌더링 이라고 한다.
웹 서버의 소프트웨어 종류는 여러 가지가 존재하는데
가장 많이 사용되고 있는 웹 서버는 Apache가 있고
Nginix나 마소, 구글 웹 서버들이 존재한다.
WAS
클라이언트/서버 구조
클라이언트(Client)는 서비스(Service)를 제공하는 서버(Server)에게 정보를 요청하여 응답받은 결과를 사용합니다.
서비를 제공한다고 해서 서버라고 한다.
클라이언트/서버 구조
DBMS (DataBase Management System)
다수의 사용자가 데이터베이스 내의 데이터에 접근할 수 있도록 해주는 소프트웨어입니다.
DBMS가 등장하기 이전에는 개발자들이 파일의 데이터를 저장하고 읽어 들이는 등의 기능을 모두 구현해야 했다.
DBMS의 최초의 개념은 IBM의 논문이었고 구현은 Oracled에서 시작했다.
DBMS는 보통 서버 형태로 서비스를 제공하여 이러한 프로그램이 많아졌지만
이러한 방식의 문제점은 클라이언트의 로직이 많아지고, 클라이언트 프로그램의 크기가 커진다는 문제가 있었다.
프로그램 로직이 변경되면 매번 클라이언트가 배포되어야 했었고,
대부분의 로직이 클라이언트에 포함되어 배포가 되기 때문에 보안이 나쁘다는 문제를 가지고 있었다.
DBMS (DataBase Management System)
미들웨어 (MiddleWare)
위의 문제를 해결하기 위해 등장한 것이 미들웨어라는 개념이다. 클라이언트와 DBMS사이에 그림과 같이 서버를 두는 방식이다.
클라이언트 쪽에 비즈니스 로직이 많을 경우, 클라이언트 관리로 인해 비용이 많이 발생하는 문제가 있습니다.
비즈니스 로직을 클라이언트와 DBMS사이의 미들웨어 서버에서 동작하도록 함으로써 클라이언트는 입력과 출력만 담당하도록 합니다.
미들웨어(MiddleWare)
WAS (Web Application Server)
최초의 웹이 등장했을 때는 웹 브라우저는 정적인 데이터만 보여주었다.
그러나 웹에서 데이터를 입력하고 조회하는 등의 프로그램을 요구하였고 동적인 기능은 프로그램을 통해서만 가능했다.
웹 서버에서 프로그래밍 기능이 들어가는 방식을 cgi(Common Gateway Interface) 라고 불렀다.
이러한 기능은 DBMS와 연결되어 있었고 미들웨어가 필요하게 되었고 was가 필요하게 되었다.
WAS는 일종의 미들웨어로 웹 클라이언트(보통 웹 브라우저)의 요청 중 웹 애플리케이션이 동작하도록 지원하는 목적을 가집니다.
was의 기능
1. 프로그램 실행 환경과 데이터베이스 접속 기능을 제공
2. 여러 개의 트랜잭션을 관리한다.
3. 비즈니스 로직을 수행한다.
4. 기본적인 웹 서버의 기능 ex) 톰캣(was)이 웹서버의 기능을 가지고 있기 때문에 Apache(웹서버)를 사용하지 않아도 된다.
트랜잭션: 논리적인 작업 단위
WAS (Web Application Server)
웹서버는 상대적으로 was보다 간단한 구조로 만들어져 있다.
사람들이 많이 접속하는 대형 웹 애플리케이션은 서버가 여러 대일 수 있어서
was에서 동작하도록 개발자가 만든 프로그램이 오작동이 발생해서
was자체에 문제가 발생할 수 있고, 이때 was를 재시작할 수 있는데
문제가 있는 was를 재시작할 때 앞단의 웹 서버에서 해당 was를 사용하지 못하게 하고
was를 재시작한다면 해당 웹 앱을 사용하는 사람은 장애를 인지하지 못할 것이다.
이러한 처리를 장애 극복 기능이라고 한다.
이번 부스트캠프를 공부하며 느낀 점이 있습니다
그것은 IT를 공부한다는 것은 힘을 들여서 공부한다기보다는
어쩌면 재미있게 공부하며 광범위한 영역을 탐구하고 여행하는 듯한 느낌이 듭니다.
이 IT분야에서 얼마나 살아가게 될지 어디까지 공부하게 될지 정하지는 않았습니다만,
제가 아는 건 삶에서는 선택과 집중이 필요하고, 선택과 집중에는 반드시 포기라는 대가가 필요하다고 생각합니다.
훗날 저를 뒤돌아봐도 10년 뒤의 저한테 물어봐도 이 선택이 잘한 선택이라고 말할 수 있는 길을 가고 있었으면 좋겠습니다.
그리고 그것을 위해선 상당히 여러 가지의 요구사항을 필요로 할 것 입니다.
금전적 대가뿐만 아니라 문화적인 부분과, 정서적인 부분까지 충족할 수 있는 방향.
조금 더 재미있게, 신이 나게, 빠르다 느리다에 구애받지 않으며, 느리더라도 좀 더 같이 하는 길.
혹은 결국 모든 것에는 절대 시간이 필요하다는 것은 바뀌지 않으며
조금은 즐길 줄 아는 사람이 되고 싶다는 바램이 생기는 것 같습니다.
아무리 빨리 간다고 할지라도, 결국엔 혼자서 많은 것들을 할 수 없다고 생각합니다.
결국 기술이란 사용되고 활용되어야 합니다.
기술의 발전에 탑승하여 우리는 어디로 가고 있는 것일지에 대한 의문과
그 거대한 파도 속에서 나는 어떤 배역을 맡게 될 것인지에 대해서
두근거림과 한편으로 느껴지는 허전함 중에서 정답을 찾고 싶습니다.
