일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 맥 #나스 #SMA
- CKEditor4
- localstorage
- vuejs
- MongoDB
- vue #vue-router
- 라우터 #NAT #포트 #포트포워딩 #유동고정아이피 #DHCP
- PersistentVolume
- vworld
- JavaScript
- javascript #localstorage #stringify #parse
- kubernetes
- PersistentVolumeClaim
- 인터넷 #클라이언트 #서버 #포트 #ipadress #domainname
- nextjs
- vuejs #pinia #vuetify3
- MPA
- vuetify3
- browserstorage
- OpenLayers
- vue3
- sesstionstorage
- basepath
- react
- postman
- v-combobox
- javascript #컴파일 #인터프리터
- mixedcontent
- github action #tistory
- Yarn
- Today
- Total
月亮
web 기초 - 인터넷 / client /server / web hosting / web server 본문
인터넷
- 인터넷=도로, 웹=도로위를 달리는 자동차
- 인터넷=운영체제, 웹=운영체제 위에서 동작하는 하나의 앱
- 웹이 인터넷의 부분집합, 웹과 동급인 기술이 별처럼 많이 있다(FTP,web,email...)
1. 1960년 인터넷 탄생 - 핵공격 일어났을때 통신시스템에 심각한 취약점 (중앙집중적)이 있어 핵공격 당하면 통신 마비됨 -> 분산된 형태의 통신시스템 구성 - 인터넷 시작 - 상호부조 시스템 - 중앙이 없고 하나가 파괴되면 나머지가 역할을 한다 - 소수의 사람들만 썼다
2. 1990년 웹 시작- 스위스 유럽입자물리연구소(힉스입자 존재함 발표) : 팀 버너스 - 월드와이드웹(세계최조 웹브라우저 만듬) - 웹서버 만듬 , info.cern.ch라는 최초의 도메인 네임 부여
인터넷 동작원리
인터넷이 동작하기 위해 컴퓨터는 최소 2대! - 2대의 컴퓨터가 서로 정보를 주고 받음
- 웹브라우저와 웹서버 (info.cern.ch라는 주소 부여), index.html 파일 저장해놈
- 웹브라우저가 설치된 컴터주소창에 http://info.cern.ch/index.html이라는 주소를 입력
- 웹브라우저가 설치된 컴퓨터는 인터넷을 통해서 전기적인 신호를 info.cern.ch라는 주소의 컴퓨터에게 찌릿하고 보냅니다. 그 전기적인 신호 안에는 이런 내용이 적혀 있습니다.
'나는 index.html 이라는 파일의 코드를 원합니다.' (Request-요청) - 그럼 info.cern.ch에 설치된 웹서버라는 프로그램이 어떤 디렉토리에서 index.html이라는 파일을 찾습니다. 그리고 그 내용을 읽어서 전기적인 신호를 바꾼 후에 웹브라우저가 설치된 컴퓨터에 신호를 보냅니다. (Response-응답)
- 그럼 웹브라우저가 설치된 컴퓨터에는 index.html 파일의 내용 즉 코드가 도착합니다.
웹브라우저는 그 코드를 읽어서 웹페이지를 화면에 출력합니다.
= 웹브라우저가 깔린 컴퓨터는 정보를 요청
= 웹서버가 깔린 컴퓨터는 정보를 응답
- 클라이언트(client) - 요청하는 컴퓨터를 클라이언트 컴퓨터
- 서버(server) - 응답하는 컴퓨터를 서버 컴퓨터
- 웹브라우저 = 웹 클라이언트
- 서버 = 웹서버
예시)
- 사용자의 컴퓨터에 설치된 프로그램 = 게임 클라이언트
- 게임회사의 서버 컴퓨터에 설치된 프로그램 = 게임 서버
웹 호스팅와 웹 서버
웹 호스팅 - github pages
웹서버 운영를 운영하려면? : 컴퓨터가 있어야 함, 컴퓨터가 항상 켜져 있어야 함, 웹서버라는 프로그램을 설치해야 함, 인터넷을 통해서 외부로 정보를 전송할 수 있게 설정을 해야 함.
- 인터넷에 연결된 컴퓨터 하나 하나가 호스트 라고 한다.
- 이런 컴퓨터를 빌려주는 사업을 호스팅이 라고 한다.
- github pages로 띄어보자! : github - repository - Setting - pages - branch main - save
my : 나의 컴퓨터
visitor : 여러분의 웹페이지를 보고 싶어하는 사람
여러분의 컴퓨터는 현재로서는 컨텐츠를 서비스 할 수 없습니다.
github의 pages 기능을 이용하여 github에 파일들을 업로드하고, pages 기능을 활성화하면 github의 서버 컴퓨터에 웹서버가 켜집니다. 그리고 우리에게 웹서버의 주소를 알려줍니다.
이제 웹서버의 주소를 방문자에게 알려주면 방문자는 나의 컴퓨터가 아닌 github의 컴퓨터에 설치된 웹서버에 접속하게 된다.
웹 서버 운영하기
내 컴퓨터에 웹서버를 설치하기
- 웹브라우저 - 제품명이 아니라 제품군
- 웹서버 - 제품군 : Apache, IIS, Nginx
Live Server는 클라이언트의 요청이 들어왔을 때 Visual Studio Code의 프로젝트 폴더에서 경로에 파일명이 없으면 index.html 파일을 응답
http://127.0.0.1:5500/1.html => 1.html 응답
http://127.0.0.1:5500/ => index.html 응답
파일 찾기로 열었을 때 : file///Desktop/web/index.html
웹서버를 통해서 열었을 때 : http://127.0.0.1:5500/index.html
웹서버로 접속한 주소를 자세히 살펴볼까요?
http : HyperText Transfer Protocol로서 웹페이지를 주고받기 위한 통신규약이라는 뜻
127.0.0.1 (IP Address): Internet Protocol Address로서 인터넷에서 사용하는 주소를 의미
IP Address는 0.0.0.0부터 255.255.255.255까지의 주소가 존재, 약 43억 개의 주소가 존재
127.0.0.1은 내 컴퓨터 자신을 가리키는 특별한 주소
http://localhost:8080/index.html - 도메인 네임(domain name)
http://127.0.0.1:8080/index.html - ip 주소(Internet Protocal Address)
'localhost'와 같이 의미가 있는 이름을 도메인 네임, 번호로 되어 있는 것을 ip 주소라 부른다.
Port : 컴퓨터에 여러 개의 서버가 동작하고 있을 때 서버를 구분하는 정보
위의 그림에서는 주소의 port 번호가 5500이므로 5500에서 동작하고 있는 Web Server와 통신하게 됩니다.
같은 wifi에서 주소 접근-핸드폰으로 가능!!
220313
http, port, IPv4/IPv6 등에 대해 추가적으로 알아볼것!
출저 : 생활코딩 web1
'web' 카테고리의 다른 글
[Web] Mixed content 문제 (http,https 관련) 🤔 (0) | 2023.06.08 |
---|---|
[WEB] 브라우저 저장소 Browser Storage(localstorage, session storage / Cookie) 🤔 (0) | 2023.04.20 |
[WEB] 인증 Authentication 과 인가 Authorization / Session vs Token, JWT (0) | 2023.04.20 |
Homeserver - 라우터 / NAT / 내 컴퓨터의 ip / 포트 / 포트포워딩 / 유동고정아이피 / DHCP (2) | 2023.03.13 |