[1주차 TIL] KnockOn Bootcamp 웹이란?

프롤로그

knockon 선별과정이 끝나고 합격했다.

지금까지 블로그적은 것처럼 이번에도 적는다.

이전에 웹개발 많이 해봤어서 개념적으로는 어려울 건 없겠지만, 그래도 다시 공부한다는 마음가짐으로 몰랐던 거 알아가면서 공부해보려고 한다.

 

 

정보

데이터라는 것이 있다. 데이터는 0과 1로 되어있는 RAW한 것이다.

여기서 정보란, 이 데이터들 중에서 의미가 부여된 데이터를 가공한 것을 말한다.

 

 

통신

통신이란 정보를 전달하고 이를 이해하고 교환하는 행위를 말한다. 

조선시대를 생각해보자. 정보를 전달하기 위해서 말을 타고 직접 가서 전달을 하거나, 아니면 봉화를 피워서 위급한 상황인지 아닌지 등을 하기도 그랬다. 

조금 현실적인 곳으로 오면, 당장 내 옆자리 사람들과 얘기, 소통하는 것도 통신이라고 볼 수 있다.

현대 기술의 발전으로 멀리 있는 사람과 소통하기 위한 방법들이 많이 나왔는데,  화상통화, 전화, 영상, 메시지, 이메일등으로 다른 사람과 소통하고 통신한다. 점차 시간과 공간에 제약에 없이 통신을 할 수가 있다.

 

통신을 위한 조건

통신을 하기 위한 조건으로는 5가지가 있다.

(1) 송신자 : 정보를 제공, 보내는 주체

(2) 수신자 : 정보를 받는 주체

(3) 메시지 : 전달되는 정보(텍스트, 음성, 데이터 등)

(4) 전송 메체 : 정보를 전달하기 위한 통로(유선, 무선, 광)

(5) 프로토콜 : 정보를 주고받기위한 규칙

 

정리를 하자면, 송신자가 메시지를 프로토콜(약속)을 가지고 전송메체를 통해서 수신자에게 전달한다.

 

여러 가지에 따라 통신을 분류할 수도 있다.

전송 매체에 따라 단방향, 반이중, 전이중 통신

매체에 따라서 유선통신, 무선 통신

정보 유형에 따라 아날로그 통신, 디지턽 통신

 

대충 웬만하면 알 것이니 통신 분류는 넘어가겠다.

 

 

웹(World Wide Web)

웹이란 위에서 이제 통신 얘기를 했는데, 현대 정보 통신을 대표하는 통신 수단 중 하나이다.

인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간으로, www 또는 w3등으로 불린다.

아까 전에 통신을 위한 5가지 조건이 있다.

웹에서는

송신자 : 웹 서버(web server)

수신자 : 웹 클라이언트(web client)

전송 매체 : 인터넷

메시지 : 하이퍼텍스트, 하이퍼미디어 등등...

프로토콜 : HTTP(HyperText Transfer Protocol) 

 

이렇게 구성이 되어있다.

웹은 하이퍼텍스트(hypertext)와 하이퍼미디어(hypermedia)를 활용해 문서, 이미지, 동영상 등 다양한 콘텐츠를 인터넷 상에서 서로 연결하여 제공한다. 

 

 

인터넷

그럼 인터넷이랑 개념이 조금 헷갈릴 수 있다.

그럼 인터넷이 뭐냐? 인터넷 은전 세계의 컴퓨터와 네트워크를 연결하여 정보를 주고받을 수 있는 전 세계적인 네트워크 시스템이다.  그리고 웹은 그 인터넷 위에서 놀고있는 서비스 느낌이라고 생각하면 된다.

인터넷은 다음과 같은 특징이 있다.

1. 전 세계적 연결성 : 지리적 제한없이 전세계 컴퓨터와 네트워크를 연결

2. 정보의 자유로운 공유 : 다양한 데이터 전송

3. 분산 네트워크 : 중앙 통제 없이 분산된 형태로 운영되며, 각 네트워크는 독립적 작동

 

흔히 우리 컴퓨터에 인터넷 연결하려면 LAN선을 꽂는다. 그 랜선은 벽 랜선을 통해 오거나, 공유기를 통해서 간다. 그리고 라우터, 게이트웨이 등을 통해서 외부 인터넷으로 빠져나가고 그런다.

즉, 여러가지 물리 계층등을 통해서 전세계 네트워크를 연결한 것이 인터넷!

 

 

프론트엔드 vs 백엔드

쿠팡, 11번가, 네이버, 다음 등 여러가지 웹을 이용해서 서비스를 제공해주는 웹 서비스들이 많이 존재한다. 이전에는 단순히 정보를 요청한 것을 보여주기만 했던 수동적인 느낌이라면 이제는 구글에다가 "네이버" 라고 검색을 했을 때 웹 서비스가 정보를 처리하고, 가공하여 필요한 정보와 기능을 제공해주는 능동형 서비스이다. 이때, 이용자의 요청을 받는 부분을 "프론트엔드", 이용자의 요청을 처리하는 부분을 "백엔드" 라고 한다.

프론트엔드 측에서는 웹 리소스(Web Resource)를 이용해서 사용자에게 직접적으로 보여준다. 페이지가 보여주고 있는 정보들은 모두 웹 리소스에 명시되어 있다. 페이지에 담기는 글, 글자들의 색깔과 모양, 배경 색상, 이미지의 크기나 투명도 등이 적혀있다.

HTML, CSS, JS 등이 여기에 포함되어있고 나중에 다시 언급될 것이다.

 

백엔드는? 저 웹 리소스를통해서 사용자가 정보를 입력하거나 요청시키는 것을 백엔드가 그것을 처리해서 거기에 해당하는 정보들을 넘겨주는 것이다.

프론트엔드 사용하는 것은 HTML, CSS, JS, 리액트 이런 것들을 사용해서 주로 사용하고, 백엔드는 장고, 스프링등으로 사용한다.

 

 

웹 서버 / 웹 클라이언트

아까전에 통신의 5가지 요소 가 있고, 웹에서도 5가지 요소가 적용이 된다고 했다.

송신자에 대당하는 웹 서버, 수신자에 해당하는 웹 클라이언트(사실 바꿔말해도 되지않나? )

웹 서버는 웹 클라이언트가 웹 프론트엔드의 웹 리소스를 통해서 정보를 요청하면, 웹 서버측에서는 백엔드를 이용해서 정보를 가공하여 제공해준다.

 

서버란?

클라이언트란? 웹에 접근하는 SW이며, 주로 서버에 요청을 보내고 응답을 받는 역할을 한다.

그러면 서버란?서비스를 제공하는 소프트웨어가 실행되는 컴퓨터이다. 다수의 클라이언트에게 서비스를 제공한다. 

이러한 개념을 가지고 있는 상태에서 다시 웹 서버와 클라이언트를 정리해보자.

 

웹 서버

웹 서버는 클라이언트(주로 웹 브라우저)로부터 요청을 받아 웹 콘텐츠(HTML, CSS, JavaScript, 이미지 등)를 제공하거나, 동적 데이터를 생성하여 응답을 반환하는 소프트웨어 또는 하드웨어이다. 하는 일로는

(1) HTTP 요청 처리 : 사용자로부터 들어온 HTTP 요청을 처리한다.

(2) 컨텐츠 제공 : 응답 데이터를 반환

(3) 다수의 요청을 처리해준다.

 

웹 서버의 종류로

 

• Apache HTTP Server
• Nginx
• Microsoft IIS
• LiteSpeed

이러한 애들이 있다.

 

 

 

웹 클라이언트

웹 클라이언트는 사용자가 웹 서버와 상호작용하기 위해 사용하는 프로그램이다.  클라이언트는 서버로 데이터를 요청하고, 서버가 반환한 응답 데이터를 화면에 표시해준다. 하는 일은

(1) HTTP 요청 전송 : 서버에게 나 이거 주세요! 요청한다

(2) 서버 응답 처리 : 서버에게서 온 데이터를 사용자에게 보내준다(이떄 HTML, CSS..JS )

(3) 사용자 인터페이스 제공 : 사용자가 웹 과 상호작용할수 있도록 화면 구성

(4) 자주 사용하는 데이터 로컬에 캐싱하여 속도 개선

의 역할을 한다.

 

 

그래서 정리를 하자면 웹 클라이언트가 HTTP 요청을 하면, 웹 서버가 응답을 해준다!

 

 

웹 브라우저

클라이언트가 이 웹 브라우저를 이용해서 요청을하고 응답을 받는다고 보면 된다. 네이버 웨일, 크롬, 파이어폭스, 마이크로소프트 엣지 등이 웹 브라우저이고, 우리는 여기다가 뭐 검색을 하거나 하는 과정을 통해서 데이터를 받는다.

정리하면 사용자가 인터넷을 통해 웹 페이지를 탐색하고 접근할 수 있도록 도와주는 소프트웨어 애플리케이션!

 

우리가 네이버에 가기 위해서 http://www.naver.com/ 을 입력을 하면, 웹 브라우저가 해당 도메인에 해당하는 아이피 주소를 받아오고, 해당 아이피 주소로 접근을 해서 웹 서버에 HTTP 요청을 보내고, 데이터를 받아오는 것.

 

• 웹 브라우저:
  클라이언트 역할로, 웹 서버에 데이터를 요청하고 서버가 반환한 결과를 사용자에게 표시
• 웹 서버:
  요청받은 데이터를 처리하고 브라우저가 이해할 수 있는 형식으로 응답

이 역할을 해준다.

클라이언트가 데이터를, 웹리소스를 받고 요청할 수 있게 도와주는 도구!

 

 

에필로그

아직 기초니까..다른 개념들을 알아야 알수있느 개념들이 많다. 나는 원래 웹 개발했고..네트워크 랩실에 있으니까 개념들은 어느정도 알고있는데 ... 음..