[JavaScript] 웹(Web) 기본

인터넷과 웹의 차이

공통점:

• 연결(connection)

 

인터넷(internet):

• 물리적인 연결망(network) – 기반(substructure, infrastructure)
• ex) 도로, 철도 등

 

웹(web):

• 콘텐츠(웹페이지)와의 연결 – 응용(superstruc ture, application)
• ex) 문자, 이미지, 소리, 동영상 등

인터넷과 웹의 차이 이미지

---

역할과 규칙

서버와 클라이언트 (Server vs Client)

서버(server): 요청된 서비스에 대하여 응답(response)하는 역할

클라이언트(client): 서비스를 요청(request)하는 역할

역할에 따른 구분 이미지

---

웹서비스의여정(journey)

요청(request)

• 웹브라우저에 URL을 입력하여 웹페이지를 서버에게 요청

처리(programming)

• 요청된 웹페이지가 프로그래밍으로 처리가 필요한 경우
• 정적(static) 웹페이지 vs. 동적(dynamic) 웹페이지

응답(response)

• 요청한 정적 또는 동적 웹페이지를 클라이언트로 응답

표현(rendering)

• 웹브라우저가 응답받은 웹페이지를 화면에 표현

---

HTML, CSS, 자바스크립트의 역할

HTML(Hyper-Text Markup Language): 웹페이지의 구조(Structure)

CSS(Cascading Stle Sheets): 웹페이지의 표현(Presentation)

자바스크립트(Javascript): 웹페이지의 행위(Behavior)

HTML, CSS 비유 이미지

---

웹 주소

URI(Uniform Resource Identifier)

• 인터넷에 있는 리소스의 리소스 자체를 식별

URN(Uniform Resource Name)

• 리소스에 이름 부여

URL(Uniform Resource Locator)

• 네트워크 상에서 리소스가 어디 있는지의 위치
• 리소스가 있는 위치 지정
• 이 블로그의 URL은 https://gnyo.tistory.com/ 임!

구분	설명
프로토콜(protocol)	http와 https는 인터넷의 웹 자원을 요청/응답하기 위한 규칙과 절차
호스트명(hostname)	웹 자원을 갖는 특정 서버의 이름(식별자)
포트(port)	특정 서버로 전달하기 위한 방법(웹 서버는 80번. 단, 기본값으로 생략 가능)
경로(pathname)	서버 내에서 웹페이자가 있는 상세한 위치
검색(search)	동적 화면을 구성하기 위한 전달 변수(보통 JSP, PHP 등 웹 프로그래밍에서 사용)
해시(hash)	웹페이지 내에서의 특정한 위치(식별자)