[Dreamhack] Background: Web

웹 서비스, 프론트엔드와 백엔드

 

웹 서비스에서 이용자의 요청을 받는 부분을 프론트엔드 (Front-end), 요청을 처리하는 부분을 백엔드 (Back-end)라고 부른다.

프론트엔드는 이용자에서 직접 보여지는 부분으로, 웹 리소스 (Web Resource)라는 것으로 구성된다.

페이지가 보여주고 있는 정보들은 모두 웹 리소스에 명시되어 있다. 페이지에 담기는 글, 글자들의 색과 모양, 배경 색상, 이미지의 크기나 투명도등이 관련 언어로 적혀있다. 

 

웹 리소스

 

웹 리소스란, 웹에 갖춰진 정보 자산을 의미한다. 웹 브라우저의 주소창에 http://dreamhack.io/index.html 주소를 입력하면 dreamhack.io에 존재하는 /index.html 경로의 리소스를 가져오라는 의미이다. 모든 웹 리소스는 고유의 Uniform Resource Indicator (URI)를 가지며, 이를 이용하여 식별됩니다. 웹의 프론트엔드를 구성하는 대표적인 웹 리소스들은 다음과 같다.

• Hyper Text Markup Language (HTML)
  • 태그와 속성을 통한 구조화된 문서 작성을 지원한다.
• Cascading Style Sheets (CSS)
  • 웹 문서의 생김새를 지정한다. 글자의 색깔이나 모양, 배경 색상, 이미지의 크기나 위치 등을 CSS로 지정할 수 있다. 브라우저는 이를 참고하여 웹 문서를 시각화한다.
• JavaScript (JS)
  • 웹 문서의 동작을 정의한다. 이용자가 버튼을 클릭했을 때, 어떻게 반응할지, 이용자가 데이터를 입력하면 어디로 전송할지 등을 JS로 구현할 수 있다. JS는 이용자의 브라우저에서 실행되는데, 클라이언트가 실행하는 코드라고 하여 Client-Side Script라고도 부른다.
• 그 외
  • 문서, 이미지, 동영상, 폰트 등

Web Resource

웹 클라이언트와 서버의 통신

웹 서비스의 통신 과정을 간략화하면 다음과 같다.

1. (클라이언트) 이용자가 브라우저를 이용하여 웹 서버에 접속합니다.
2. (클라이언트) 브라우저는 이용자의 요청을 해석하여 HTTP 형식으로 웹 서버에 리소스를 요청합니다.
3. (서버) HTTP로 전달된 이용자의 요청을 해석합니다.
4. (서버) 해석한 이용자의 요청에 따라 적절한 동작을 합니다. 리소스를 요청하는 것이라면, 이를 탐색합니다. 계좌 송금, 입금과 같은 복잡한 동작을 요구할 경우 내부적으로 필요한 연산을 처리합니다.
5. (서버) 이용자에게 전달할 리소스를 HTTP 형식으로 이용자에게 전달합니다.
6. (클라이언트) 브라우저는 서버에게 응답받은 HTML, CSS, JS 등의 웹 리소스를 시각화하여 이용자에게 보여줍니다.