웹 기본 이해

웹 기본 이해

 

웹과 인터넷 차이

인터넷(Internet)

: 네트워크 인프라 구조. 전 세계의 컴퓨터와 네트워크를 연결하는 시스템의 통합

 

웹(WEB)

: 인터넷 상에서 정보를 제공하거나 접근할 수 있는 서비스 (월드 와이드 웹 : World Wide Web)

인터넷(Internet)	웹(WEB)
컴퓨터가 서로 연결되어 통신을 주고받는 컴퓨터끼리의 네트워크	그 인터넷상에 정보가 얽혀있는 무형의 정보 네트워크

 

 

 

웹의 기본 동작 원리  (중요도 🌟)

클라이언트 - 서버 모델

: 클라이언트(사용자 컴퓨터)와 서버(웹 사이트를 호스팅하는 컴퓨터) 간의 상호작용

클라이언트는 서버에 요청을 보내고, 서버는 요청에 따라 데이터를 응답

 

HTTP 요청 - 응답

: 클라이언트가 웹페이지를 요청하면, 서버는 요청을 처리하고 HTML 문서를 반환, 클라이언트는 이를 해석하여 화면에 표시

 

 

 

---

브라우저와 서버  (중요도 🌟 🌟🌟)

: 브라우저는 웹 서버로부터 HTML, CSS, JavaScript 파일을 요청하고 응답받아 이를 피싱(해석)하는 단계

 

 

🦄브라우저의 작동원리

HTML 파싱

HTML 파일을 받아들인 브라우저는 이를 파싱하여 DOM(Document Object Model) 트리를 구축합 DOM 트리는 HTML 문서의 구조를 계층적으로 표현한 객체 모델로, 각 HTML 요소가 하나의 객체로 표현 HTML 문서를 위에서 아래로 순차적으로 읽어 내려가며, HTML 태그들을 각각의 DOM 노드로 변환하고, 이 노드들이 부모-자식 관계를 통해 트리 구조로 연결

CSS 파싱

CSS 파일을 받아들인 브라우저는 이를 파싱하여 CSSOM(CSS Object Model) 트리를 구축 CSSOM 트리는 스타일 규칙들을 객체 모델로 변환한 것으로, 각 규칙이 적용될 HTML 요소와 연결 이 과정에서 CSS 규칙의 상속과 우선순위(계단형) 등이 계산

JavaScript 파싱

JavaScript 파일이 포함된 경우, 브라우저는 이를 해석하여 실행 JavaScript는 DOM이나 CSSOM 트리에 접근하여 동적으로 HTML 요소를 추가, 제거하거나 스타일을 변경 가능 JavaScript는 비동기적으로 실행될 수 있으며, 때로는 DOM이 완전히 로드된 후에 실행

 

 

💡페이지 렌더링
: 모든 과정이 끝난 후, 브라우저는 최종적인 웹 페이지를 사용자에게 화면으로 보여짐
사용자가 페이지와 상호작용하거나, JavaScript에 의해 콘텐츠가 변경되면, 브라우저는 이 과정을 반복하여 화면을 업데이트함

 

 

 

 

---

프로토콜  (중요도🌟🌟)

	HTTP 프로토콜	HTTPS 프로토콜
개념	- 월드 와이드 웹(WWW)에서 웹 페이지를 주고받기 위해 사용 - 클라이언트(주로 웹 브라우저)가 서버에 요청을 보내면, 서버는 그 요청에 맞는 데이터를 클라이언트에 응답으로 보내주는 방식으로 작동	- HTTP에 SSL(Secure Sockets Layer) 또는 TLS(Transport Layer Security)라는 암호화 프로토콜을 결합한 것 - HTTPS를 통해 주고받는 데이터는 암호화되어, 중간에 누군가가 데이터를 가로채더라도 내용을 읽을 수 없도록 보호
특징	비암호화된 데이터 전송: HTTP는 데이터를 평문(암호화되지 않은 형태)으로 전송하기 때문에, 중간에 누군가가 네트워크 트래픽을 감청할 경우 데이터가 쉽게 유출될 수 있음 속도: 암호화 과정이 없기 때문에 HTTPS보다 약간 더 빠를 수 있으나 보안이 취약하다는 큰 단점을 가짐 포트: 기본적으로 80번 포트를 사용	데이터 암호화: 모든 데이터가 전송되기 전에 암호화되어, 데이터의 기밀성을 유지 이로 인해 제 3자가 데이터 내용을 쉽게 볼 수 없으며, 데이터가 안전하게 전송 데이터 무결성: 데이터가 전송되는 도중 변경되거나 손상되지 않았는지를 확인하는 기능을 제공 이를 통해 클라이언트는 서버로부터 받은 데이터가 원본과 일치하는지 확인 가능 서버 인증: HTTPS는 SSL/TLS 인증서를 사용하여 서버의 신원을 확인 이는 사용자가 방문하는 웹 사이트가 실제로 그 웹 사이트임을 보장 이를 위해 신뢰할 수 있는 인증 기관(CA, Certificate Authority)에서 발급한 인증서를 사용 포트: 기본적으로 443번 포트를 사용
예시	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)

웹 페이지의 구조를 정의하는 마크업 언어 HTML을 사용하여 웹 페이지의 내용과 구조를 정의 텍스트, 이미지, 링크, 폼 등 다양한 요소를 포함 웹 브라우저가 웹 페이지를 표시하는데 필요한 정보를 제공

태그(Tag)

HTML 문서는 태그로 구성 열기 태그와 닫기 태그로 구성 <열기 태그></닫기 태그> 웹 페이지의 콘텐츠를 구조화하는 데 사용

속성(Attribute)

HTML 태그는 추가적인 정보를 제공하기 위해 속성을 가짐 태그의 기능을 조절하거나 내용을 수정하는데 사용

 

 

---

 

🌟CSS 역할 및 기본

CSS(Cascading Style Sheets)

• 웹 페이지의 스타일을 정의하는 언어
• CSS를 사용해 웹 페이지의 레이아웃, 색상, 폰트, 간격 등을 설정
• HTML의 구조와 내용을 시각적으로 꾸미는 데 사용

인라인 스타일

HTML 요소 내에서 직접 스타일을 정의하는 방법 style 속성을 이용해 요소에 직접 CSS 스타일 적용

 

내부 스타일 시트

HTML 문서의 <head> 섹션 내에 <style> 태그를 이용해 정의된 스타일

 

외부 스타일 시트

별도의 CSS 파일을 생성하여 웹 페이지에 링크하는 방법 여러 HTML 문서에서 동일한 스타일을 적용할 때 사용

 

 

💡HTML, CSS 로는 정적 웹페이지 구현
JavaScript 로는 동적 웹페이지 구현 가능

 

---

 

🌟JavaScript 역할 및 기본

JavaScript란 .js

• 웹 페이지의 동적 동작을 제어하는 프로그래밍 언어
• 페이지의 내용이나 구조를 동적으로 변경하거나 사용자와의 상호작용을 처리

 

기본 문법

• 변수 선언, 함수 정의, 조건문, 반복문 등
• 변수는 let, const를 이용해 선언
• 함수는 function 키워드를 사용

<script> 태그

JavaScript 코드를 HTML 문서에 포함시키기 위해 <script> 태그를 사용 <script> 태그는 HTML 문서의 <head> 태그 내부나 <body>태그 내부에 배치 가능 외부 JavaScript 파일을 링크하는 것도 가능

내부 스크립트

외부 스크립트

 

 

JavaScript를 선언하는 script 태그의 위치로 적절한 곳은?
==> 문서의 <body> 태그 끝에 위치

🔸이유
빠른 페이지 로딩
: HTML 콘텐츠가 먼저 로드되므로 페이지가 빠르게 보임 JavaScript는 콘텐츠가 모두 로드된 후에 실행되므로 렌더링이 차단되지 않음

최적의 사용자 경험
: 페이지 콘텐츠가 먼저 보이기 때문에 사용자에게 빠르게 콘텐츠를 제공 가능