728x90
웹의 탄생과 발전
1. 웹의 시작
2. 웹의 진화
웹은 1.0 → 2.0 → 3.0/4.0 형태로 발전해왔습니다.
| 버전 | 설명 |
| 웹 1.0 | 정보를 제공받기만 하는 단방향 웹 |
| 웹 2.0 | 사용자의 참여와 공유가 가능한 쌍방향 웹 |
| 웹 3.0 | 시맨틱 웹과 인공지능을 활용한 지능형 웹 |
| 웹 4.0 | 고도화된 인공지능과 VR/AR 기술이 통합된 몰입형 웹 |
* 시맨틱 웹: 컴퓨터가 웹의 데이터를 이해하고 처리할 수 있도록 의미를 부여하는 기술
3. 웹의 기본 구조
3.1 기본 구조
- 웹의 기본구조
- Client/Server 구조
- 서버: 서비스 제공
- 클라이언트: 서비스 이용
- 통신 방향
- client → server: HTTP 요청 메시지(request message)
- client ← server: HTTP 응답 메시지(response message)
- Client/Server 구조
3.2 핵심 구성 요소
- 웹의 핵심 구성 요소
- HTTP: client/server 간의 통신 규칙(프로토콜)
- URL: 자원의 주소, client가 server로 자원을 요청할때 이용
- HTML: 웹 페이지의 구조를 만드는 HyperText 마크업 언어
* HyperText : 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것
4. URL의 이해
4.1 URL 구조의 구성요소
- 프로토콜 (Protocol)
- 스키마 부분으로 사용할 프로토콜 명시 (예: http, https)
- 대소문자 구분 없음, 프로토콜 뒤에 콜론(:) 필수
- 도메인 (Domain)
- 호스트명: 서버 주소
- 도메인명과 상위 도메인명 포함 (예: tistory.com)
- 경로 (Path)
- 슬래시(/) 뒤에 오는 파일 경로
- 컴퓨터의 폴더 구조와 유사
- 매개변수 (Parameter)
- 물음표(?) 뒤에 key=value 형태로 표시
- 여러 매개변수는 &로 구분
- 예시: https://www.beusable.net/blog?utm_source=google&utm_medium=blog&utm_campaign=beusable&utm+content=domaincontent
- 프래그먼트 (Fragment)
- 해시태그(#) 뒤에 위치
- 페이지 내 특정 위치로 이동할 때 사용
- 예시: https://www.beusable.net/blog/#content
4.2 URL 동작원리
사이트 도메인만 지정할 경우 웹 서버에 설정된 기본 자원이 호출됩니다.
대부분 index페이지가 호출됩니다.
4.3 URL 인코딩
URL 상에서 문자를 표현하는 방법입니다.
데이터 전송 상에 손실을 막기위해 인코딩을 사용합니다.
웹브라우저를 사용할 경우 브라우저에서 URL 인코딩은 자동으로 해줍니다.
| 문자 | 인코딩 |
| & | %26 |
| % | %25 |
| + | %2B |
| 공백 | %20 |
| = | %3D |
| # | %23 |
| ' | %27 |
| ? | %3F |
5. 웹 시스템의 구성과 동작
5.1 웹 아키텍처의 구성
5.2 웹 브라우저의 동작 과정
| 1. URL 입력 | 사용자가 웹 브라우저 주소창에 URL 입력 |
| 2. DNS 조회 | 도메인을 실제 서버 IP 주소로 변환 |
| 3. 요청 생성 | 변환된 IP 주소로 HTTP 요청 메시지 생성 |
| 4. 서버 통신 | HTTP 요청 전송 및 서버로부터 응답(HTML, CSS, JS) 수신 |
| 5. 렌더링 | HTML 파싱하여 DOM 트리 구축, CSS 적용, JS 실행 |
| 6. 페이지 표시 | 완성된 웹 페이지를 사용자에게 출력 |
반응형