기본적인 웹의 동작방식

우리는 항상 웹사이트를 사용한다. 컴퓨터를 켜서 크롬을 열고, 메일을 확인하고, 쇼핑을 하는 등 웹은 우리에게 없어서는 안될 존재이다. 그런데 인터넷을 쓰다 보면 한번쯤 이런 생각이 들것이다. "웹사이트는 어떻게 동작하는가?"

웹사이트의 동작 방식을 간단히 표현한 글

그림에서 보이듯이 생각보다 간단하다!

 

위의 그림에서 IBM의 도메인 주소가 주소창에 입력되어있다. 그러면 웹은 IBM서버에 요청을 보낸다.("지금 우리 서버에 어떤 유저가 홈페이지를 보내달래")

- 아 그래? 알았어! 내가 유저에게 응답을 해줄게!(그러면 서버에서 홈페이지를 유저에게 보내준다)

 

이렇게 단순화한다면, 요청, 응답으로 유저와 서버간의 상호작용이 이루어진다.

 

그렇다면, 웹 페이지는 어떠한 방식으로 만들어질까?

 

보통의 웹 개발자들이라면 위의 세가지 프로그래밍 언어를 선호한다.

• HTML : 웹 페이지의 물리적 구조를 구축하기 위해 사용되는 언어. 여기서 말하는 물리적 구조란 대개 '텍스트', '링크', '이미지/ 영상',버튼 등을 일컫는다.
• CSS : 웹 사이트 및 각 구성 요소에 대해 다양한 스타일 특성 세트를 정의, 적용 및 관리 할 수 있는 표준 방법을 제공한다. 즉 웹사이트의 모양과 느낌, 스타일, 색상, 글꼴, 디자인 및 레이아웃을 담당한다.
• Javascript : 객체지향형 언어이며, 웹 사이트에 상호작용(동적인 상호작용)을 구현하기 위해 사용되는 프로그래밍 언어이다.

우리가 자주 사용하는 로그인 버튼으로 간단한 예를 들어보자. 물리적인 로그인 '버튼'은 HTML이 담당하고, 로그인 버튼의 모양이나 글꼴, 색상은 CSS가 담당하며 로그인 기능(유저가 입력한 아이디, 패스워드 일치 여부를 서버로 보내 일치하는지 확인하고 로그인을 성공적으로 하는 일)은 자바스크립트가 담당한다.

 

가장 널리 사용되는 웹 개발 자바스크립트 API들은 

• Angular : 구글에서 관리하는 오픈소스 프레임워크. HTML 페이지를 빠르고 효율적이게 렌더링 할 수 있다.(라우팅 기능이 내장되어있다)
• React : 페이스북에서 운영 관리하는 프레임워크로 배우기가 쉽지만 라우팅 기능이 내장되어 있지 않아 따로 구현해야한다.
• Vue.js : 커뮤니티에서 관리, 운용하며 레이아웃에 초점을 둔 프레임워크이다.

가장 널리 사용되는 백엔드 언어는 : 

• 자바스크립트 :  웹 브라우저에서 실행되도록 설계되어 웹 페이지에 대화형 기능과 동적 콘텐츠를 추가한다.
  • 자바스크립트에서 가장 잘 알려진 백엔드 프레임워크는 Node.js , Express 이다.
• 파이썬 : 웹 페이지부터 데이터베이스 연결, 데이터 분석 수행에 이르기까지 광범위한 기능을 수행한다.
  • 잘 알려진 파이썬 프레임워크는 Django, Flask 이다.
  • 데이터를 다루기 위해 많이 사용되는것은 sql이다.