웹의 이해

웹을 이해하기 위해서는 먼저 인터넷(Internet)에 대해 알아야 한다.

인터넷(Internet)

전 세계의 모든 컴퓨터를 하나의 통신망 안에 연결한다는 의미를 가진 International Network의 약자

웹(Web)

월드 와이드 웹(world wide web)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간을 말한다. 보통 www, w3 그리고 월드 와이디 웹을 열여서 웹(Web)이라고 불린다.

웹은 1980년대 어느날, 스위스의 입자 물리 연구소 CERN의 컴퓨터 과핮가 팀 버너스-리에 의해 연구원들 간 신속한 정보교환을 위해 고안 되었다.
이는 페이스북의 탄생 배경과 비슷하다.

웹은 정보를 하이퍼텍스트 형식으로 표현하여, 링크를 따라 이동하며 다양한 정보/ 문서들을 연결, 제공한다.

하이퍼 텍스트란?
"단순히 굴자가 아닌 이상의 기능을 가진 텍스트"로 주로 링크, 참조의 역할을 하는 기술을 의미한다.

이러한 웹은 웹 사이트가 있고, 이 사이트는 웹 페이지로 구성되어있다.

웹 브라우저(Web browser)

웹 페이지나 웹상의 데이터를 찾거나 읽을때 사용하는 것을 웹 브라우저(Web browser)라고 한다.

웹의 구조

웹을 사용하는 것은 레스토랑에서 주문하는 것에 많이 비유된다.
클라이언트(손님)가 서버에게 어떤 서비스나 정보를 요청하면 저장소(주방)에서 찾아(요리해서) 정보를 가져다준다.

• 클라이언트(Client): 서비스를 이용하는 (요청하는)컴퓨터
• 서버(Server): 서비스를 제공하는 컴퓨터

프로토콜
서버와 클라이언트 간의 통신을 위한 약속이다. 반드시 이 약속을 지켜서 통신을 해야한다.

우리는 어떻게 웹을 사용하고 있는 걸까?

인터넷으로 연결된 클라이언트와 서버는 웹 프로토콜인 HTTP(HyperText Transfer Protocol)를 사용하여 데이터를 주고 받는다.

우리가 컴퓨터에서 웹 브라우저를 통해 웹 페이지 주소를 가져와 달라고 신청하면 인터넷을 통해 해당 페이지가 들어있는 웹 서버에서 페이지를 받아오게된다.

웹 개발

그렇다면 각 개발에 대해서 알아보자

웹 개발 직무

프론트엔드

웹 서비스(웹 사이트)에서 사용자 측면(Client-side)의 그래픽 사용자 인터페이스로, 사용자와 상호작용(글자 입력, 버튼 클릭, 화면 출력 등)을 담당하게 된다.
즉, 화면에 나오는걸 담당하게 된다는 말이다.

화면을 그리기 위해서는 3가지가 필요하다.

• HTML: 웹 페이지 구성 요소들의 구조, 기본 뼈대라고 생각하면 좋다.
• CSS:웹 페이지 구성 요소들을 꾸밈, 뼈대의 위치와 색깔등을 꾸며줌
• Javascript:웹 페이지 구성 요소들에 움직임을 추가함, 여러 움직임에 대한 애니메이션을 추가해줌

백엔드

웹 서비스(웹 사이트)에서 사용자 눈에는 보이지 않는 서브측(Server-side)에서 프론트엔드에서 전달받은 데이터와 요청을 내부 데이터와 연산을 활용하여 처리하고 프론트엔드에 결과를 전달합니다.

풀스택

프론트와 백을 모두 할 줄 아는 개발자

레스토랑에 비교
🍽 레스토랑 = 웹사이트
웹사이트는 레스토랑처럼 손님(사용자)에게 서비스를 제공하는 곳
🏠 레스토랑의 외관 = 프론트엔드(Front-end)
레스토랑에 들어가면 먼저 보이는 게 인테리어, 메뉴판, 테이블 등을 만듬
HTML → 건물의 뼈대 (벽, 기둥, 테이블 배치)
CSS → 인테리어 (색깔, 디자인, 조명)
JavaScript → 웨이터의 움직임 (버튼 클릭, 애니메이션)
👩‍🍳 주방 = 백엔드(Back-end)
손님이 음식을 주문하면 주방에서 요리를 가져다줌
서버 → 주방 (요리를 만들고 처리하는 곳)
데이터베이스 → 식자재 창고 (음식 재료 저장소)
API → 웨이터 (주방과 손님을 연결하는 역할)
🛎 손님이 주문하는 과정 = 데이터 요청
손님(사용자)이 메뉴(웹페이지 버튼)를 보고 음식을 주문(클릭)
웨이터(API)가 주문을 주방(서버)으로 전달
주방(백엔드)이 요리(데이터 처리)
웨이터(API)가 완성된 음식을 손님에게 서빙(웹페이지 업데이트)

웹 개발 튤

IDE(integreated Development Environmnet,통합 개발 환경)을 사용한다.
대표적으로 vscode, eclipse, IntelliJ가 있다.