웹의 동작 (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

브라우저는 어떻게 동작하는가?

https://d2.naver.com/helloworld/59361

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을 짤 것이기 때문에 기본적으로 마크업 형태로 이루어져 있는데

 마크업의 구조

css도 룰이 있고 벨류가 있고 key와 valu의 구조로 되어있는데.

그리기 순서

CSS 2는 그리기 과정의 순서를 정의했다. 이것은 실제로 요소가 stacking contexts에 쌓이는 순서다. 스택은 뒤에서 앞으로 그려지기 때문에 이 순서는 그리기에 영향을 미친다. 블록 렌더러가 쌓이는 순서는 다음과 같다.

1. 배경 색 
2. 배경 이미지 
3. 테두리 
4. 자식 
5. 아웃라인

browser에서의 웹 개발-1

HTML 문서 구조

뜯어보자 웹사이트!

1. 먼저 크롬 브라우저가 없다면 설치하기
2. 크롬 브라우저를 열고 크롬 개발자 도구 열기
3. 윈도우 (Ctrl + Shift + I)
   맥(Option + Command + i)
4. 접속 : 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

서비를 제공한다고 해서 서버라고 한다.

웹서버는 상대적으로 was보다 간단한 구조로 만들어져 있다.

사람들이 많이 접속하는 대형 웹 애플리케이션은 서버가 여러 대일 수 있어서

was에서 동작하도록 개발자가 만든 프로그램이 오작동이 발생해서

was자체에 문제가 발생할 수 있고, 이때 was를 재시작할 수 있는데

문제가 있는 was를 재시작할 때 앞단의 웹 서버에서 해당 was를 사용하지 못하게 하고

was를 재시작한다면 해당 웹 앱을 사용하는 사람은 장애를 인지하지 못할 것이다.

이러한 처리를 장애 극복 기능이라고 한다.

 

 

 

 

이번 부스트캠프를 공부하며 느낀 점이 있습니다

 그것은 IT를 공부한다는 것은 힘을 들여서 공부한다기보다는  

어쩌면 재미있게 공부하며 광범위한 영역을 탐구하고 여행하는 듯한 느낌이 듭니다. 

이 IT분야에서 얼마나 살아가게 될지 어디까지 공부하게 될지 정하지는 않았습니다만,

제가 아는 건 삶에서는 선택과 집중이 필요하고, 선택과 집중에는 반드시 포기라는 대가가 필요하다고 생각합니다.

훗날 저를 뒤돌아봐도 10년 뒤의 저한테 물어봐도 이 선택이 잘한 선택이라고 말할 수 있는 길을 가고 있었으면 좋겠습니다.

 

그리고 그것을 위해선 상당히 여러 가지의 요구사항을 필요로 할 것 입니다.

금전적 대가뿐만 아니라 문화적인 부분과, 정서적인 부분까지 충족할 수 있는 방향.

 

조금 더 재미있게, 신이 나게, 빠르다 느리다에 구애받지 않으며, 느리더라도 좀 더 같이 하는 길.

혹은 결국 모든 것에는 절대 시간이 필요하다는 것은 바뀌지 않으며

조금은 즐길 줄 아는 사람이 되고 싶다는 바램이 생기는 것 같습니다.

아무리 빨리 간다고 할지라도, 결국엔 혼자서 많은 것들을 할 수 없다고 생각합니다.

 

결국 기술이란 사용되고 활용되어야 합니다.

기술의 발전에 탑승하여 우리는 어디로 가고 있는 것일지에 대한 의문과

그 거대한 파도 속에서 나는 어떤 배역을 맡게 될 것인지에 대해서

두근거림과 한편으로 느껴지는 허전함 중에서 정답을 찾고 싶습니다.

웹 프로그래밍 코스란?

이 과정은 웹 개발의 전반적인 과정을 알 수 있다.

백엔드는 웹이 어떻게 동작하는지 살펴보고 서버, 프로토콜이 무엇인지 살펴볼 것이다.

백엔드는 자바를 기반으로 진행하여 서브릿 jsp의 동작방법과 사용법에 대해서 알게된다.

이런 기술들을 스프링을 이용해서 진행하게 될 것이다. 낯선 용어가 나오는데 차차 나오게 될 것이다.

끝까지 따라오신다면 낯설다고 생각한 용어들을 잘 하는 자신들이 있을 것이다

프론트 엔드에서는 어떤 것을 배우게 되는지 확인하자 

html, css, javascript를 배우게 된다.

네이버와 같은 포털에서 볼 수 있는 화면 슬라이딩을 개발하며 익힐 수 있다.

이 코스는 어떻게 배우게 될까? 6개의 파트로 나눠져 있다. 각각 배워야 할 지식이 있고

파트별로 프로젝트가 있어서 프로젝트도 6개를 해야한다.

프로젝트 시간동안 개발하면 배운 지식을 본인의 것으로 만들 수 있을 것이다.

코드리뷰를 받을 수 있는데 유료 프로그램이다.

제시된 요구사항에 맞게 잘 작성되었는지 확인할 것이고 요구사항 뿐 아니라 코드의 리뷰도 진행이 되고

잘못된 부분이 있거나 더 효율적인 방법으로 구현할 수 있다면 해당 부분에 대한 리뷰를 통해서 더 좋은 코드를 구현할 수 있다.

이 과정 이후에 수강생이 무엇을 할 수 있을까? 간단한 웹 서비스를 직접 만들 수 있을 것이다.

게시판이나 블로그를 만들고 싶다면 배운 지식을 활용해서 도전해볼 수 있을 것이다.

2. 프론트 엔드

프론트엔드는 css에 익숙해지고 사용자에게 더 좋은 ux를 제공하기 위하는 프로그래밍과 성능도 고려해야 한다.

그리고 무엇보다 자바스크립트가 중요하고 html css를 통해 구조화와 스타일을 구성하는 법을 배워야 한다.

3.백 엔드 

기술이 발달하고 있고, 새로운 것을  거부감 없이 받아들이는 열린 마음이 필요하다

그리고 특히 웹은 혼자서 개발보다는 여러명이 개발하는 경우가 많아서 커뮤니케이션 능력이 중요하다는 생각이 들고 있다.

혼자보다는 가능한 여러명이 스터디하는 것을 추천한다. 처음 공부할 때는 다른 사람이 만든 것을 사용하는 경우가 많고, 

이 구현체를 만든 사람이 왜 이렇게 만들었을까를 분석하고

좋은 구현체를 만들려면 어떻게 해야할까를 생각하는 것이 중요한 역량이라고 생각한다.

백엔드 개발자가 되려면 하나의 언어를 능숙하게 만드는 것이 중요하고

웹 개발자는 웹에 관련된 것들을 이해하고 웹의 역사도 아는 것이 좋을 것 같다.

그리고 직접 만들고 싶은 주제를 가지고 만들어갈 때 성장할 수 있는 것 같다.

여러가지의 프로그램을 만들면 만들수록 프로그래머로써 완성될 것이다.