웹 서비스의 이해 (1) - 웹 이해와 프론트엔드 입문

/date 24.08.20.

 

웹의 이해

 

-웹의 이해

 

인터넷이란 무엇일까요?

인터넷(internet)은 전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미를 가진 international network의 약자입니다. 인터넷이 있기에 우리는 빠른 연결로 원하는 정보나 콘텐츠를 접할 수 있는 것입니다. 한 가지 유의해야 할 점은 웹 != 인터넷이라는 것입니다.

 

그렇다면 웹이란 무엇일까요?

월드 와이드 웹(World Wide Web)은, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간을 의미합니다. 간단하게 WWW, W3, 또는 웹이라고 부르기도 합니다.

 

웹은 1980년, 스위스 입자 물리 연구소의 컴퓨터과학자 팀 버너스-리에 의해 탄생하였습니다. 연구원들 간의 신속한 정보 교환을 위해 고안되었던 웹이 현재 전세계 사람들이 사용하고 있는 것입니다. 신기하네요.

 

웹의 특징은 여러 가지가 있습니다.

• 정보를 하이퍼텍스트 형식으로 표현하고, 하이퍼텍스트(링크)를 따라 이동하며 다양한 정보/문서들을 연결 및 제공합니다.
  • 하이퍼텍스트Hypertext: 단순히 글자가 아닌, 글자 그 이상의 기능을 가진 텍스트
  • 주로 링크, 참조의 역할을 하는 기술을 말합니다.
• 웹 페이지 vs. 웹 사이트
  • 웹 페이지를 엮어서 만든 것이 웹 사이트라고 할 수 있습니다.
  • 웹 페이지 링크를 타고 다른 웹 페이지로 이동하는 것을 우리는 웹 서핑, 혹은 웹 브라우징이라고 부릅니다.
• 웹 브라우저?
  • browse = 사전적으로 어떤 것을 찾거나 읽는 행위를 의미합니다.
  • 즉, 어떤 것(=웹 페이지 또는 웹 상의 데이터)을 찾거나 읽을 때 사용하는 것을 웹 브라우저라고 부릅니다. 우리에게 친숙한 웹 브라우저로는 크롬, 파이어폭스, 사파리 등이 있습니다.

 

-웹의 구조

 

우리가 식당에 가면, 손님과 서버가 있습니다. 고객은 서버에게 음식이나 물 등의 서비스를 요청합니다. 고객이 다른 고객에게 서비스를 요청한다면... 음. 우리는 그런 사람을 이상하게 쳐다보겠죠? 때문에 그런 일은 거의 일어나지 않습니다.

 

웹도 마찬가지입니다. 클라이언트와 서버가 나누어져 있습니다.

 

클라이언트Client는 서비스를 이용하는(요청하는) 컴퓨터라고 볼 수 있습니다. 반면 서버Server는 서비스를 제공하는 컴퓨터가 됩니다. 현실 세계의 클라이언트, 서버의 의미와 동일하군요!

 

클라이언트와 서버 간에는 약속이 있습니다. 정보를 주고 받을 때에 지켜야 하는 약속이며, 우리는 이것을 프로토콜Protocol이라고 부릅니다. 인터넷으로 연결된 클라이언트와 서버는 웹 프로토콜인 HTTP(HyperText Transfer Protocol)를 사용하여 데이터를 주고받습니다.

 

 

-웹 개발 직무 이해

 

• 클라이언트 부분 개발: 프론트엔드 개발
  • 웹 서비스(웹 사이트)에서 사용자의 측면(Client-side)의 그래픽 사용자 인터페이스로 사용자와의 상호작용을 담당합니다.
  • 사용자와의 상호작용 예시: 글자 입력, 버튼 클릭, 화면 출력 등
• 서버 부분 개발: 백엔드 개발
  • 웹 서비스(웹 사이트)에서 사용자의 눈에 보이지 않는 서버 측(Server-side)에서 프론트엔드에서 전달받은 데이터와 요청을 내부 데이터와 연산을 활용하여 처리하고 프론트엔드에 결과를 전달합니다.

예를 들어 로그인 화면을 만든다고 칩시다. 로그인을 위한 아이디와 비밀번호를 입력받고, 로그인 요청을 할 수 있는 포맷을 만드는 것을 프론트엔드 개발자의 일입니다. 이러한 로그인 요청이 들어왔을 때, 존재하는 아이디와 비밀번호인지를 비교하고 로그인을 승인할지 거부할지 결정하여 결과를 전달해주는 것은 백엔드 개발자의 일입니다. 그렇다면 풀스택은? 두 가지를 모두 다 하는 경우가 되겠습니다.

 

 

 

프론트엔드 입문

 

-HTML, CSS, JavaScript 소개

 

웹은 무엇으로 이루어져 있을까요? 간단히 말해 HTML + CSS + JavaScript라고 보면 됩니다. 이중 HTML은 웹 페이지 구성 요소들의 구조를 담당하고, CSS는 웹 페이지 구성 요소들을 예쁘게 꾸미는 역할입니다. 자바스크립트의 경우 웹 페이지 구성 요소들에게 액션이 일어날 수 있도록 도와줍니다. 즉 같은 페이지 안에서도 변화가 일어날 수 있도록 하는 것입니다. 앞서 언급하였던 로그인 예시를 여기에 적용한다면, 사용자가 입력한 데이터를 서버에 전달하고 로그인을 요청할 수 있도록 합니다. 이 세 가지는 각각의 역할이 뚜렷하고, 서로 유기적이면서 또 독립적으로 움직일 수 있습니다.

 

이렇게 프론트엔드 개발을 위해서는 IDE(integrated development environment, 통합 개발 환경)의 설치가 필요합니다. 저는 visual studio code를 사용하지만, 이클립스나 인텔리제이도 동일한 기능을 수행하는 IDE입니다.

 

오늘 수업을 들으며 로그인 화면을 HTML으로 구성하는 실습을 해 보았습니다.

아주 초라하고 단순하지만 귀엽죠?