웹 기본 이해
웹과 인터넷 차이
인터넷(Internet)
: 네트워크 인프라 구조. 전 세계의 컴퓨터와 네트워크를 연결하는 시스템의 통합
웹(WEB)
: 인터넷 상에서 정보를 제공하거나 접근할 수 있는 서비스 (월드 와이드 웹 : World Wide Web)
인터넷(Internet) | 웹(WEB) |
컴퓨터가 서로 연결되어 통신을 주고받는 컴퓨터끼리의 네트워크 |
그 인터넷상에 정보가 얽혀있는 무형의 정보 네트워크 |
웹의 기본 동작 원리 (중요도 🌟)
클라이언트 - 서버 모델
: 클라이언트(사용자 컴퓨터)와 서버(웹 사이트를 호스팅하는 컴퓨터) 간의 상호작용
클라이언트는 서버에 요청을 보내고, 서버는 요청에 따라 데이터를 응답
HTTP 요청 - 응답
: 클라이언트가 웹페이지를 요청하면, 서버는 요청을 처리하고 HTML 문서를 반환, 클라이언트는 이를 해석하여 화면에 표시
브라우저와 서버 (중요도 🌟 🌟🌟)
: 브라우저는 웹 서버로부터 HTML, CSS, JavaScript 파일을 요청하고 응답받아 이를 피싱(해석)하는 단계
🦄브라우저의 작동원리
HTML 파싱 |
|
CSS 파싱 |
|
JavaScript 파싱 |
|
💡페이지 렌더링
: 모든 과정이 끝난 후, 브라우저는 최종적인 웹 페이지를 사용자에게 화면으로 보여짐
사용자가 페이지와 상호작용하거나, JavaScript에 의해 콘텐츠가 변경되면, 브라우저는 이 과정을 반복하여 화면을 업데이트함
프로토콜 (중요도🌟🌟)
HTTP 프로토콜 | HTTPS 프로토콜 | |
개념 | - 월드 와이드 웹(WWW)에서 웹 페이지를 주고받기 위해 사용 - 클라이언트(주로 웹 브라우저)가 서버에 요청을 보내면, 서버는 그 요청에 맞는 데이터를 클라이언트에 응답으로 보내주는 방식으로 작동 |
- HTTP에 SSL(Secure Sockets Layer) 또는 TLS(Transport Layer Security)라는 암호화 프로토콜을 결합한 것 - HTTPS를 통해 주고받는 데이터는 암호화되어, 중간에 누군가가 데이터를 가로채더라도 내용을 읽을 수 없도록 보호 |
특징 |
|
|
예시 | http://www.example.com | https://www.example.com |
HTTPS의 중요성 (중요도 🌟 🌟)
💡SSL/TLS의 역할
SSL(Secure Sockets Layer) 및 TLS(Transport Layer Security)는 HTTP 프로토콜 위에서 동작
데이터 전송 시 보안을 강화하고, 데이터 무결성과 서버 인증을 제공
암호화와 인증
- 데이터 무결성: 데이터가 전송되는 동안 변조되지 않았는지를 확인하는 기능을 제공. 이를 통해 수신자는 데이터가 원래 전송된 형태와 일치하는지 확인 가능
- 서버 인증: 클라이언트(사용자)와 서버 간의 연결을 암호화하기 전에, 서버가 신뢰할 수 있는 인증 기관(CA)에 의해 인증되었음을 보장. 서버 인증은 사용자가 방문하는 웹 사이트가 실제로 신뢰할 수 있는 서버인지 확인하는 과정
- 데이터 전송 시 보안 강화: SSL/TLS는 데이터가 네트워크를 통해 전송될 때 암호화하여 제 3자가 데이터를 읽거나 변조할 수 없도록 함. 암호화된 데이터는 중간에 있는 누군가가 쉽게 해독할 수 없으며, 이로 인해 데이터가 안전하게 전송
도메인과 IP주소 (중요도🌟🌟)
DNS 서버 (중요도 🌟 🌟)
: 도메인 이름을 IP 주소로 변환하는 시스템
사용자가 웹 브라우저에 도메인 이름을 입력하면, DNS 서버는 해당 도메인 이름에 대응하는 IP 주소를 찾아 반환하여, 사용자는 기억하기 쉬운 도메인 이름을 사용해 웹 사이트에 접근 가능
IP 주소
: 네트워크 상에서 장치를 식별하는 고유한 주소
데이터 패킷이 올바른 목적지로 전달될 수 있도록 하는 역할을 가지고, 모든 네트워크 장치(컴퓨터, 스마트폰, 서버 등)는 고유한 IP 주소를 가짐
IPv4 | IPv6 |
32비트 주소 체계를 사용 약 43억 개의 고유한 주소 제공 가능. 주소는 4개의 10진수로 구분된 8비트 블록으로 표시 |
128비트 주소 체계를 사용하여 훨씬 더 많은 주소 제공. 주소는 8개의 128비트 블록으로 구성된 16진수로 표시 |
192.168.0.1 | 2001:0db8:85a3:0000:0000:8a2e:0370:7334 |
URL 구성요소
프로토콜(Protocol) |
URL의 시작 부분에 위치하며, 웹 페이지와 서버 간의 통신 방식을 정의. 일반적으로 http 또는 https가 사용 |
▼
도메인(Domain) |
URL 중앙 부분에 위치하며, 웹 사이트의 고유한 주소를 나타냄. 도메인은 DNS를 통해 IP 주소로 변환됨 |
▼
경로(Path) |
도메인 뒤에 위치하며, 웹 사이트 내의 특정 리소스나 페이지를 식별 가능하고 서버 내에서 리소스의 위치를 지정 |
▼
쿼리 문자열(Query) |
URL의 마지막 부분에 위치하고, 웹 페이지에 전달할 추가 정보를 포함하며 ?로 시작하며, 매개변수와 값을 &로 구분 |
웹 페이지 구성 요소 (중요도 🌟🌟 🌟)
🌟HTML 역할 및 기본
HTML(Hyper Text Markup Language) |
|
태그(Tag) |
|
속성(Attribute) |
|
🌟CSS 역할 및 기본
CSS(Cascading Style Sheets)
- 웹 페이지의 스타일을 정의하는 언어
- CSS를 사용해 웹 페이지의 레이아웃, 색상, 폰트, 간격 등을 설정
- HTML의 구조와 내용을 시각적으로 꾸미는 데 사용
인라인 스타일 |
|
내부 스타일 시트 |
|
외부 스타일 시트 |
|
💡HTML, CSS 로는 정적 웹페이지 구현
JavaScript 로는 동적 웹페이지 구현 가능
🌟JavaScript 역할 및 기본
JavaScript란 .js
- 웹 페이지의 동적 동작을 제어하는 프로그래밍 언어
- 페이지의 내용이나 구조를 동적으로 변경하거나 사용자와의 상호작용을 처리
기본 문법
- 변수 선언, 함수 정의, 조건문, 반복문 등
- 변수는 let, const를 이용해 선언
- 함수는 function 키워드를 사용
<script> 태그 |
|
내부 스크립트 |
외부 스크립트 |
JavaScript를 선언하는 script 태그의 위치로 적절한 곳은?
==> 문서의 <body> 태그 끝에 위치
🔸이유
빠른 페이지 로딩
: HTML 콘텐츠가 먼저 로드되므로 페이지가 빠르게 보임 JavaScript는 콘텐츠가 모두 로드된 후에 실행되므로 렌더링이 차단되지 않음
최적의 사용자 경험
: 페이지 콘텐츠가 먼저 보이기 때문에 사용자에게 빠르게 콘텐츠를 제공 가능
'특강' 카테고리의 다른 글
프론트엔드 통신 특강 (1) | 2024.09.10 |
---|---|
웹 심화 이해 (0) | 2024.08.14 |
기술면접_CS, SQL 내용정리 (0) | 2024.08.08 |
CS 특강(소프트웨어 설계) (0) | 2024.07.26 |
CS 특강(컴퓨터 구조와 운영체계) (0) | 2024.07.25 |