🌐 웹의 이해
인터넷(Internet)
인터넷은 전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미를 가지며, International Networkd의 약어이다. 이는 "우리는 모두 연결되어 있다"는 개념을 상징한다. 여기서 인터넷과 웹은 같지 않다는 점을 느낄 수 있어야 한다.
웹(Web)이란?
월드 와이드 웹(World Wide Web), 줄여서 WWW, W3 또는 웹(Web)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간이다. 웹은 정보의 공유 수단으로서 기능한다.
웹(Web)의 시작
1980년대 스위스의 유럽 입자 물리 연구소(CERN)에서 근무하던 컴퓨터 과학자 팀 버너스-리에 의해 탄생되었다. 이는 연구원들 간 신속한 정보 교환을 목적으로 고안되었다.
페이스북의 탄생 배경과 비슷한 맥락을 가지고 있다.
웹(Web)의 특징
웹은 정보를 하이퍼텍스트 형식으로 표현하고, 사용자가 하이퍼텍스트(링크)를 통해 다양한 정보나 문서들을 서로 연결하며 접근할 수 있게 한다.
*하이퍼텍스트(Hypertext)란, 단순히 글자가 아닌 그 이상의 기능을 가진 텍스트로 주로 링크, 참조의 역할을 하는 기술을 말함
웹 페이지 vs 웹 사이트
웹 페이지와 웹 사이트는 다른 개념이다! 웹 페이지는 책의 한 페이지와 같고, 웹 페이지의 링크를 따라 다른 웹 페이지로 이동하는 것을 웹 서핑 혹은 웹 브라우징이라고 한다. 웹 사이트는 여러 웹 페이지가 모여서 만들어진 책과 같다.
웹 브라우저(Web brower)란?
웹 브라우저는 웹 페이지나 웹 상의 데이터를 찾거나 읽을 때 사용하는 도구이다. 사용자가 웹을 통해 정보를 검색하고 접근할 수 있게 해주는 소프트웨어로, 우리가 인터넷을 탐색할 때 필수적인 도구이다.
🏗️ 웹의 구조
클라이언트와 서버
현실 세계에서의 클라이언트와 서버 관계는 고객과 서빙하는 사람의 관계와 비슷하다. 고객(클라이언트)이 요청을 하고, 서빙하는 사람(서버)이 그 요청을 처리하여 서비스를 제공한다. 웹에서도 이와 유사한 구조를 이루고 있다.
- 클라이언트(Client): 서비스를 이용하며 요청을 하는 컴퓨터
- 서버(Server): 요청받은 서비스를 제공하는 컴퓨터
웹에서 클라이언트는 웹 브라우저를 통해 서버에 접속하여 웹 페이지나 기타 서비스를 요청하고, 서버는 이러한 요청을 처리하여 필요한 데이터를 클라이언트에게 전송한다.
프로토콜
클라이언트와 서버가 서로 정보를 주고 받을 때에는 특정한 규칙이나 약속, 즉 프로토콜을 지켜야 한다. 이 프로토콜은 데이터 교환의 기준을 정하며, 웹에서는 주로 HTTP(Hyper Text Transfer Protocol)가 사용된다.
웹 사용 방법
- 요청
사용자가 웹 브라우저에 웹 페이지의 주소(URL)를 입력한다. 웹 브라우저는 이 주소를 인터넷을 통해 해당 웹 서버에 전달하며, 웹 페이지를 요청한다. - 응답
웹 서버는 요청받은 주소에 해당하는 웹 페이지나 데이터를 찾아서, 다시 인터넷을 통해 웹 브라우저로 보낸다. 웹 브라우저는 이 데이터를 받아 사용자에게 웹 페이지를 표시한다.
👩🏻💻 웹 개발 직무 이해
프론트엔드
웹 서비스에서 사용자의 측면(Client-side)에서 작동하는 그래픽 사용자 인터페이스를 말한다. 프론트엔드는 웹 페이지에서 발생하는 상호작용(예: 글자 입력, 버튼 클릭, 화면 출력)을 담당한다. 사용자가 보고 직접 다루는 모든 요소가 프론트엔드의 범위에 속한다.
백엔드
웹 서비스의 서버 측면(Server-side)에서 작동하며, 사용자 눈에는 보이지 않는다. 백엔드는 프론트엔드에서 보낸 데이터와 요청을 받아 내부 데이터베이스와의 연산을 통해 처리하고, 그 결과를 다시 프론트엔드로 전달한다. 이 과정을 통해 웹 페이지의 기능이 실행된다.
프론트엔드와 백엔드 상호작용
예를 들어 로그인 과정에서 사용자가 프론트엔드에서 로그인 요청을 하면 백엔드는 데이터베이스에서 해당 아이디를 찾는다. 아이디가 존재하면 비밀번호를 비교하여 맞다면 "환영합니다" 페이지를, 틀리다면 "로그인 실패" 메시지를 프론트엔드로 보낸다. 이와 같은 과정을 통해 사용자 인증이 이루어진다.
프론트엔드 3대 요소
웹은 주로 HTML+CSS+Javascript 세 가지 기술로 구성된다.
- HTML(HyperText Markup Language): 웹 페이지의 기본 구조를 정의함. 각 웹 페이지 요소의 위치와 역할을 설정함
- CSS(Cascading Style Sheets): 웹 페이지의 디자인과 스타일을 담당함. 색상, 레이아웃, 폰트 등 시각적 요소를 꾸며 사용자에게 보여지는 외관을 조정함.
- Javascript: 웹 페이지에 동적인 기능을 추가함. 사용자의 입력에 반응하거나, 서버로부터 데이터를 받아 웹 페이지에 실시간으로 반영하는 등의 기능을 수행함. 구성 요소들에 생명력을 불어넣음!
🔑 첫 HTML 파일 만들기
HTML이란?
HTML(HyperText Markup Language)은 웹 페이지의 구조를 명시하는 언어로, 하이퍼텍스트 즉, 웹 페이지들을 서로 연결하는 기능을 가진 텍스트. HTML은 <와 > 괄호를 사용하는 태그를 통해 웹 페이지의 각 요소를 정의한다. 태그는 보통 여는 태그(<태그>)와 닫는 태그(</태그>)의 쌍으로 구성되며, 일부 태그는 닫는 태그 없이 단독으로 사용된다(예: <br>).
자주 쓰는 HTML 태그
<html>HTML 문서의 루트 요소를 정의함. 모든 다른 요소는 이 요소 내부에 위치해야 함.<head>문서의 메타데이터(문서 제목, 문자 인코딩, 스타일 시트 링크 등)를 포함하는 부분.<body>웹 페이지의 모든 내용을 포함하는 부분으로, 텍스트, 하이퍼링크, 이미지, 동영상 등이 이 안에 위치함.<title>브라우저 탭에 표시되는 문서의 제목을 정의함.<meta>문서의 메타데이터(예: 문자 집합, 페이지 설명, 키워드 등)를 설정하는 태그.<div>플로우 컨텐츠를 위한 컨테이너로, 주로 문서를 섹션으로 나누는 데 사용됨.<a>하이퍼링크를 정의하며, 다른 페이지, 파일, 이메일 주소, 위치 등으로 연결할 수 있음.<script>클라이언트 사이드 스크립트, 주로 JavaScript를 문서에 포함시킬 때 사용됨.<link>외부 리소스를 문서와 연결할 때 사용되며, 주로 스타일 시트를 연결하는데 사용됨.<span>인라인 요소로, 텍스트의 일부분에 스타일을 적용하거나, 문서 내에서 특정 그룹을 지정하는 데 사용됨.<br>줄바꿈을 생성하는 데 사용되며, 닫는 태그 없이 사용하는 태그.
로그인 페이지 만들기
HTML을 사용하여 로그인 폼을 만드는 기본적인 구조!
<form>사용자 입력을 웹 서버로 제출하기 위한 폼을 정의함<input>사용자로부터 데이터를 입력받기 위한 입력 필드를 생성함. 'type' 속성을 통해 다양한 형태의 입력 필드(텍스트, 비밀번호, 버튼 등)를 정의할 수 있음.
아주 기본적인 구조를 만들었다보니 디자인도 적용시키고 싶고, 기능들도 추가시키고 싶었는데 강사님이 욕심으로부터 개발이 시작되는 것!이란 말씀을 해주셔서 너무 와닿았다. 욕심이 생기면 더 잘하고 싶고, 그 과정 속에서 발전해나가는 모습을 발견해나갈 수 있겠지! 이제 욕심을 많이 부려보자.
