01 클라이언트 & 서버
- 클라이언트와 서버를 실생활 예시로 들자면, 레스토랑에서 손님으로서 주문을 하는 상황을 들 수 있다.
- 이때 주문(=요청) 을 하는 손님을 클라이언트라고 한다. 요청을 받아서 주문에 맞게 음식을 내어주는 사람은 종업원 (server)이다. 이 역할을 담당하는 부분을 서버라고 한다.
- 서버는 특정 서비스를 제공하는 ‘서비스 제공자’의 역할을 하고 클라이언트는 서비스를 요청하는 ‘서비스 요청자’의 역할이다.
- 이처럼 클라이언트와 서버는 서로 정보를 주고받는 관계이다.
클라이언트:
- 예를 들어 내가 노트북으로 네이버에 접속한다고 했을 때, 노트북이 클라이언트가 되는 것이고, 스마트폰으로 접속을 한다면 스마트폰이 클라이언트가 된다.
- 조금 더 정확히 말하자면 내가 사용하는 기기 내의 ‘웹 브라우저’ 또한 클라이언트이다. 단지 노트북이 있다 해도 노트북 그 자체로 구글 페이지에 접속할 수는 없기때문.
- 우리는 웹브라우저를 통해 웹사이트에 접속을 하는데, 웹 브라우저란 쉽게 말해 인터넷에 접속하기 위한 소프트웨어이다. 웹 브라우저가 우리의 요청을 서버에게 보내고, 서버로 받은 응답 정보를 다시 우리 화면에 보여주는 일을 한다.
- 예를 들어, 우리가 흔히 사용하고 있는 크롬, 사파리, 엣지(IE), 파이어 폭스 등이 있다.
정리하자면 클라이언트가 정확히 의미하는 것은 ‘사용자가 사용하는 기기의 웹 브라우저’ 이다. 하지만 통상적으로 사용자가 사용하는 기기를 가리켜 클라이언트라고 하기도 하고, 사용자 자체를 클라이언트라고 부르기도 한다.
서버:
- 위 예시에서 우리는 네이버로부터 정보를 제공 받았다. 이때 ‘네이버 컴퓨터’가 정확히 말하자면 서버입니다. 서버 또한 컴퓨터와 같이 하나의 하드웨어이다. 우리의 컴퓨터에 브라우저라는 소프트웨어를 설치하는 것과 같이, 서버에도 웹 서버라는 소프트웨어를 설치하여 이 소프트웨어끼리 요청과 응답 통신을 하는 것이다.
- 웹 시스템의 규모가 작은 경우 1대의 단일 서버로 존재할 수도 있지만 구글 등 전 세계로 서비스를 제공하는 대형 시스템의 경우 서버가 수백만 대가 모여있는 데이터 센터를 보유하고 있다. 즉, 우리는 인터넷을 통해 우리 집 내 방에서 전 세계에 위치하고 있는 구글 서버와 실시간으로 소통하고 있는 것이다.
- 서버 또한 정확히는 물리적인 하드웨어를 가리키지만 서버 내의 웹서버 소프트웨어 또한 서버라고 불린다. 즉, 웹서버란 웹페이지를 사용자에게 제공하는 서버 소프트웨어로 요청에 대한 응답하는 역할을 한다.
- 즉, 우리가 앞에서 했던 네이버 접속 및 검색에 대한 결과를 제공해 준 자의 정체는 바로 웹서버였다. 웹서버에는 다양한 종류가 있는데 대표적으로 아파치(Apache), 아이아이에스(IIS), 웹투비(WebToB) 등이 있다.
출처: https://www.mobiinside.co.kr/2022/03/22/client-server/
02 웹 (웹과 API 서버 통신 / 반응형 웹, 인터렉티브 웹)
웹:
- 인터넷 브라우저에서 주소를 칠 때 www를 자주 보았을 것이다. 이는 ‘월드 와이드 웹’의 줄임말이다.
- 월드 와이드 웹(World Wide Web)이란 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미한다.
- 간단히 줄여서 WWW나 W3라고도 부르며, 간단히 웹(Web)이라고 가장 많이 불린다.
- 우리는 웹브라우저를 통해 웹사이트에 접속을 하는데, 웹 브라우저란 쉽게 말해 인터넷에 접속하기 위한 소프트웨어이다. 웹 브라우저가 우리의 요청을 서버에게 보내고, 서버로 받은 응답 정보를 다시 우리 화면에 보여주는 일을 한다.
- 예를 들어, 우리가 흔히 사용하고 있는 크롬, 사파리, 엣지(IE), 파이어 폭스 등이 있다.
- 웹은 인터넷과 같은 의미로 많이 사용되고 있지만, 정확히 말해 웹은 인터넷상의 인기 있는 하나의 서비스일 뿐이다. 하지만 현재에는 인터넷과 웹이라는 단어가 서로 혼용되어 사용될 만큼 인터넷의 가장 큰 부분을 차지하고 있다.
웹의 발전
- 1989년 팀 버너스리가 연구원 간에 아이디어를 주고받을 때 항상 전자 우편이나 파일을 통해 주고받는 것이 비효율적이라고 생각하여 ’웹’을 만들었다. 처음에 웹은 공통된 공간에 각자의 정보를 올리고 관리할 수 있는 일종의 정보 관리 시스템에서 시작되었다.
- 이렇게 시작된 웹 1.0에서는 사용자가 웹 사이트에서 미리 분류하고 정리해 놓은 자료들만을 일방적으로 전달받아야 했다.
- 하지만 웹의 발전에 따라 시작된 웹 2.0에서는 사용자가 직접 정보를 생산하고 참여하는 집단 지성의 공간으로 탈바꿈한다. 웹 2.0은 게시판이나 댓글, 블로그, 그리고 위키백과 등과 같이 사용자가 직접 참여하여 만들어 나가는 서비스에서 찾아볼 수 있습니다.
- 여기서 또 다른 문제가 제기된다.웹 2.0 플랫폼 사업자들은 폭 넓고 질 좋은 웹 환경을 제공하는 대가로 이용자 데이터와 그 소유권을 가져 갔다. 계속 쌓여가는 데이터는 기업의 거대 자산이 되었고 그 결과, 웹 2.0의 중앙집중화되고 폐쇄적인 플랫폼은 이용자를 쥐락펴락 할 수 있는 무소불위의 권력을 갖게 되었다.
- 이를 해결하기 위해 웹 3.0이 떠오르고 있다. 웹 3.0은 ‘시맨틱 웹’과 ‘탈중앙화 된 웹’, 그리고 프로토콜 경제를 근간으로 하는 메타버스를 포함하게 됩니다. 따라서 지금의 웹 3.0은 시맨틱 기술을 활용해 개인 맞춤형 정보를 제공하고 블록체인 시스템을 통한 탈중앙화와 데이터 암호화에 기반한 ‘개인의 데이터 소유’가 가능해진 새로운 형태의 웹 생태계를 의미한다고 할 수 있다.
웹 / 웹의 발전 출처: http://tcpschool.com/webbasic/www
API:
- API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. (위키백과)
- 사전적 정의로만 보면 이게 뭐지? 싶다. 쉽게 설명하면 “API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체” 라고 할 수 있다. 예를 들어, API를 통해 여행서비스 사이트와 항공예매 정보를 연결해줄 수 있다. Slack에 Google 캘린더를 연동시키거나, TADA앱에서 네이버 지도를 띄울 때도 API를 사용하고 있다. 즉, API는 애플리케이션을 서로 연결해서 통신할 수 있게 해주는 매개체이다.
- 여러 기업들 및 공공기관에서는 오픈 API를 제공하고 있다. 개인 개발자들에게는 일정 호출 수 까지는 무료로 API를 사용할 수 있도록 무료로 제공하고 있다. 대표적으로 카카오, 네이버, 구글과 같은 기업들과 공공데이터포털에서 무료 OPEN API를 사용할 수 있다
- 카카오 개발자 센터: https://developers.kakao.com/
- 네이버 개발자 센터: https://developers.naver.com
- 구글 개발자 센터: https://developers.google.com/
- 공공 데이터 포털: https://www.data.go.kr/index.do
정적 웹 페이지(Static Web Page):
- 서버에 미리 저장된 데이터를 그대로 불러오듯 전달하는 웹 페이지. 서버의 데이터가 바뀌지 않는 한 모든 사용자는 늘 고정된 웹페이지를 받아보게 된다. 주로 서비스 소개페이지처럼 내용이 자주 변경되지 않는 경우 정적 웹 페이지를 이용하는 경우가 많다.
동적 웹 페이지(Dynamic Web Page):
- 정적 웹 페이지와 반대로, 서버에 저장된 데이터를 그대로 보여주는 것이 아니라 스크립트를 통해 가공을 거쳐 출력하는 웹페이지. 즉 사용자의 인터랙션에 따라 같은 페이지라도 각기 다른 결과를 받아볼 수 있게 된다. (매번 새롭게 정보가 갱신되는 게시판, SNS처럼 결과가 그때그때 바뀐다면? 전부 동적 웹!)
반응형 웹:
- 하나의 레이아웃이 웹 브라우저에 맞춰지는 형태로, 웹 브라우저의 가로폭이 바뀔 때마다 페이지 내에 있는 콘텐츠의 크기와 배치도 자동으로 맞춰진다.
인터렉티브 웹:
- 웹 페이지 내의 콘텐츠가 클릭, 스크롤, 입력 등 사용자의 동작에 따라 상호작용하는(interact) 웹 페이지.
- 예시: BBC 웹 페이지
03 크로스 브라우징
크로스 브라우징:
- 인터넷 익스플로러, 구글 크롬, 애플 사파리 등 정말 다양한 브라우저가 존재합니다. 그리고 브라우저마다 브라우저 렌더링을 하는
렌더링 엔진이 다릅니다. 그래서 동일한 HTML, CSS라도 렌더링 엔진에 따라 조금씩 다르게 보일 수 있습니다. 크로스 브라우징은 브라우저의 종류에 상관없이 똑같이 웹을 보여주려는 시도를 뜻합니다.** 프론트엔드 개발자가 짠 웹 코드가 브라우저에 상관없이 동일하게 화면을 보여줘야 고객들이 편하게 사용할 수 있겠죠?크로스 브라우징 테스트는 프론트엔드 개발자가 웹을 개발한 후 브라우저마다 웹이 잘 보여지는지 확인하는 행위를 의미합니다. 모든 브라우저를 설치해서 테스트할 수는 없기 때문에 이 테스트를 지원해주는 서비스들이 존재합니다. 대표적으로 LambdaTest , 자동화 테스트를 제공하는 Selenium 등이 있어요.
출처: https://www.grabbing.me/3a44d95ce316417ab182370d09fd2bfe#874c8c08f7b14bf69e0c64f174dadd3d
04 HTTP & HTTPS
HTTP:
- 기본적으로 우리가 브라우저에서 웹서버로 요청을 할 때는 앞에 http:// 혹은 https://를 붙여서 주소를 입력합니다. 만일 입력하지 않아도 자동으로 입력된다.
- 이때, HTTP는 하이퍼텍스트 전송 프로토콜(Hypertext Transfer Protocol)의 약자로 네트워크에서 HTML 문서를 주고받기 위한 프로토콜이다.
- 프로토톨이란? 네트워크 통신을 위해서는 미리 정해진 규칙, 즉 통신 규약이 존재하는데, 이를
프로토콜이라고 한다. 따라서, 브라우저에서는 http 프로토콜 통해 웹서버와 통신을 하게 된다.
HTTPS:
- HTTP는 굉장히 유용한 프로토콜이지만 네트워크 통신 과정에서 보안에 취약하다는 약점이 있다. HTTPS는 HTTP가 가진 보안 취약점을 암호화 및 인증 구조를 통해 개선하기 위해 만들어졌다. (보안 소켓 레이어(SSL, Secure Socket Layer) 개념을 덧붙인 것.)
- 대부분의 웹 사이트에서는 HTTP 프로토콜을 막고 HTTPS 프로토콜을 사용하게 권장한다.
05 웹 동작 과정
그렇다면 지금까지 배운 개념들을 활용해서 웹 동작 과정에 대해서 알아봅시다.
예를 들어, 주소창에 www.naver.com을 치면 과연 어떤 과정들이 일어날까요?
웹 동작 과정:
- 브라우저 주소창에 naver.com을 입력한다.
- 브라우저가 네이버 웹서버에 HTTP 요청을 보낸다.
- 서버가 요청을 처리하고 응답을 보낸다.
- 서버가 HTTP 응답을 보낸다.
- 브라우저가 HTML 컨텐츠를 보여준다.