[부스트코스]웹 프로그래밍 - 2. 웹의 동작 & FE, BE

1.Internet 서비스

Internet은 우리가 흔히 알고 있는 WWW(월드 와이드 웹)과 같은 개념이 아니다. WWW은 Internet (네트웍 통신)을 기반으로하는 서비스 중 하나일 뿐이며, 

WWW 외에도 이메일 서비스, 파일전송서비스(FTP)등 여러 프로그램들이 인터넷을 기반으로 작동합니다.

또한 인터넷은 TCP/IP기반의 네트워크이며, 각각의 서비스는 고유의 포트를 통해 실행됩니다.

 

 

*TCP/IP란?

TCP (Transmission Control Protocol) / IP (Internet Protocol) 수많은 프로그램들이 인터넷으로 통신하는 데 있어 가장 기반이 되는 프로토콜(규약, 약속).

TCP: 네트워크 통신에서 신뢰성을 보장하기 위한 통신 규약

IP: 각 장치를 나타내는 IP 주소 

 

*port란?

TCP/IP에 의해 지정되어졌으며, 컴퓨터가 통신을 할때 동시 다발적인 통신을 가능케 하기 위하여 가상의 문인 포트를 만들어 사용하고 있다. www의 포트 번호는 80으로 80번 포트를 닫으면 www이 작동하지 않는다.(통신이 안된다.)

 

 

 

2. HTTP 프로토콜

 

-발전

CERN(유럽 입자 연구소)에서 개발한 WWW 상에서 정보를 주고받을 수 있는 프로토콜로 HTTP v0.9를 시작으로 현재 v2.0까지 발전하였습니다.

 

-작동방식

작동방식은 서버/클라이언트 모델을 따르고 있습니다. 즉, 서버에 정보를 요청하는 클라이언트와 요청한 정보에 응답하는 서버로 이루어져있습니다.

서버/클라이언트 방식의 장점은 불특정 다수를 대상으로하는 서비스에 적합하다는 것입니다. 서버와 클라이언트가 계속해서 연결된 형태가 아니기 때문에 클라이언트와 서버간의 최대 연걸 수 보다 훨씬 많은 요청과 응답을 처리할 수 있는 것입니다. 하지만 서버가 클라이언트와 연결을 끊어서 무상태(stateless)를 유지하기 때문에 정보를 유지할 수 없다는 단점이 있습니다.

 

*cookie란?

인터넷 웹사이트에 접속할 때 웹 사이트가 있는 서버에 의해 사용자의 컴퓨터에 저장되는 정보. 이를 통해 서버/클라이언트 방식을 사용하는 http 프로토콜에서 정보를 유지 할 수 있다.

 

HTTP 작동방식 - 서버 클라이언트

1 - CONNECT:  클라이언트가 서버에 접속

2 - REQUEST: 요청 메시지를 통해 서버에 정보를 요구한다. 요청 메시지는 요청 헤더 부분, 빈줄, 요청 바디 부분으로 나뉜다.

 

요청 헤더 부분- 요청메서드 + 요청 URL + HTTP 프로토콜 버전

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

*요청 메서드 종류

GET : 정보를 요청하기 위해서 사용한다. (SELECT)

POST : 정보를 밀어넣기 위해서 사용한다. (INSERT)

PUT : 정보를 업데이트하기 위해서 사용한다. (UPDATE)

DELETE : 정보를 삭제하기 위해서 사용한다. (DELETE)

HEAD : (HTTP)헤더 정보만 요청한다. 해당 자원이 존재하는지 혹은 서버에 문제가 없는지를 확인하기 위해서 사용한다.

OPTIONS : 웹서버가 지원하는 메서드의 종류를 요청한다.

TRACE : 클라이언트의 요청을 그대로 반환한다. 예컨데 echo 서비스로 서버 상태를 확인하기 위한 목적으로 주로 사용한다.

 

3 - RESPONSE: 응답 메세지를 통해 클라이언트에 정보를 제공한다. 응답 메시지는 응답 헤더 부분, 빈줄, 응답 바디 부분으로 나뉩니다.

 

응답 헤더 부분 - 프토토콜 버전 + 응답 코드 메세지 +날짜 + 등등

응답 바디: 실제 클라이언트가 원하는 정보

 

4 - CLOSE

 

3.URL

 

네트워크 상에서 자원이 어디 있는지를 알려주기 위하 규약(자원의 주소)

URL 은 아래의 형식을 가지고 있습니다.

-프로토콜://호스트명[:포트번호]/[경로][;인자][?질의문자][#]

 

 

 

 

웹이라는 서비스가 기본적으로 어떻게 작동하는지를 알아보고 웹에서 사용되고 지켜지는 HTTP 프로토콜, URL을 배웠습니다!

 

부스트코스 강좌: https://www.edwith.org/boostcourse-web/lecture/16661/

 

---

 

 

생각해보기

1. HTTP에 S가 붙은 HTTPS 는 어떤 용도로 사용되는 건가요? HTTP와 무엇이 다른가요?
   
   
   

별차이가 없는 줄 알았는데, 네이버, 다음, 구글 모두 https로 시작합니다.
네이버 :https://www.naver.com/

네이버

계속 검색해보니까 포털 사이트들 뿐만 아니라 우리가 쉽게 접속할 수 있는 사이트들은 대부분 https입니다.

어렵게 찾았습니다 ㅋㅋㅋㅋ 컬쳐랜드가 http를 사용합니다.

컬쳐랜드: http://www.cultureland.co.kr/main.do

컬쳐랜드

그리고 http로 시작하는 사이트들은 크롬에서 '안전하지 않음'이라고 뜹니다.

왜나하면, http는 앞에서 알아봤듯이 클라이언트와 서버간의 자원을 주고 받을 때 쓰는 통신 규약이고, https는 인터넷 상에서 정보를 암호화하는 프로토콜을 이용하여 클라이언트와 서버가 자원을 주고 받는 통신 규약이기 때문입니다.

https에서s가 Secure Socket(보안통신망)으로 https는 공개키 암호화 방식을 이용합니다.

공개키 암호화 방식은 관심있는 부분이라서 나중에 다시 알아보도록 하겠습니다.

---

1.프론트엔드와 백엔드

 

프론트엔드와 백엔드

음식점의 주방과 카운터처럼 웹의 프론트엔드와 백엔드는 언제나 항상 같이 있는 존재이며, 각자의 역할을 수행하면서 웹을 작동시킵니다.

 

2.프론트엔드 FE

 

front-end는 사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)를 제공합니다.

또한, 사용자의 요청(요구사항)에 반응해서 동작합니다.

• 웹콘텐츠를 잘 보여주기 위해 구조를 만들어야 합니다.(신문,책등과 같이) - HTML
• 적절한 배치와 일관된 디자인 등을 제공해야 합니다.(보기 좋게) - CSS
• 사용자 요청을 잘 반영해야 합니다.(소통하듯이) - Javascript

자바스크립트는 웹사이트를 반응시키기 위해 사용합니다. (마우스를 그림 위에 올리면 그림이 바뀌는 것 같은 효과!)

 

3.프론트엔드 FE

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

 

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

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

부스트코스 강의: https://www.edwith.org/boostcourse-web/lecture/16662/

---

FE-BE

아직은 저도 잘 모르지만, 듣기로는 말끔하고 이쁜 프론트엔드와는 달리 백엔드는 괴랄하다고 하네요 ㅎㅎ...

그래도 프론트엔트 백엔드 모두 공부해보아야겠어요!