웹페이지는 무엇으로 만들어질까?
HTML (뼈대)
제목 - 문단 - 사진 - 링크가 '무엇'인지 정한다
<h1>안녕하세요</h1>CSS (옷 스타일)
색 - 크기 - 글꼴 - 배치로 "어떻게 보일지" 정한다
body { background: lightyellow; }JS (작동 움직임)
클릭 - 입력에 반응해 "어떻게 행동할지"정한다.
button.onclick = ....이렇식으로 HTML + CSS + JS 형식으로 웹페이지를 구성해서 만들 수 있다.
꼭 HTML CSS JS 뿐만 아니라, React 나 다른 프레임워크로도 웹을 만들 수 있다. (물론 기본기가 있어야 함.)
내 컴퓨터의 파일(로컬) vs 인터넷에 배포한 페이지
내 컴퓨터의 index.html
/Users/linkcat/Developer/todays-web/index.html특징
- 나만 볼 수 있다. (돌아가는 내 컴퓨터에서)
- 컴퓨터를 끄면 아무도 못봄 😳
- 주소창에서 https가 아닌, 파일경로로 시작
서버 호스팅하기 (배포)
https://glocalizer.vercel.app/특징
- 전 세계 누구나 볼 수 있다
- 24시간 켜진 서버 컴퓨터 파일을 복사해 둔 것
-DNS에 이름이 등록 됨, https 좌물쇠도 붙음! - 배포 플랫폼(본인은 vercel을 추천함)
인터넷은 정말 '구름' 위에 떠 있을까?
땅과 바다에 진짜 장비가 놓여 있다.
'클라우드'(구름)라고 불러도 데이터는 하늘에 있는게 아니라 어딘가의 데이터 센터 하드디스크에 있다.
해저 케이블
바다 밑에 깔린 광케이블이 대륙과 대륙을 이음. 나라 사이 데이터의 약 99%가 이 선을 지나감.
라우터
데이터를 받고 "어느 길로 보내지?"를 정하는 (교통경찰같은 역할을 비슷하게 함). 집 와이파이 공유기도 작은 라우터다.
데이터 센터
서버 컴퓨터가 수만 대가 줄지어 선 거대한 창고이다. 유튜브 영상, 사진, 게시글이 실제로 저장된다. (물리적 + 소프트웨어)
클라이언트와 서버는 무슨 관계?
클라이언트가 주문하고 서버가 내어 준다.
내 브라우저 (손님 = 클라이언트)
클라이언트는 요청(Request)하는 쪽이다. 스마트폰/노트북의 크롬,엣지,사파리
구글 컴퓨터 (주방 = 서버)
서버는 요청(Request)을 받아 응답(Respnse)을 내어주는 쪽이다. 데이터센터에서 24시간 켜져있는 컴퓨터를 생각해보자.
클라이언트와 서버에도 규칙이 있다.
- 클라이언트가 요청하지 않는다면 서버는 응답을 하지 않는다 (항상 요청이 먼저, 그다음 응답 처리.)
- 서버 한 대가 수많은 브라우저에 응답한다. (매우 대단함)
DNS: 이름을 숫자로.
- 내가 치는 것 [naver.com]
- 사람이 기억하기 쉬운 이름 (도메인)이다.
- DNS가 하는 일은?
- 이름 -> 숫자
- 전화번호부에서 이름을 찾아 번호를 알려준다.
- 컴퓨터가 실제로 쓰이는 것
- 223.130.200.104
- 실제로 데이터가 찾아가는 IP 주소
특징
- DNS가 고장나면 "어디로 가야 할지" 몰라 사이트가 열리지 않는다.
-이 과정은 보통 0.1초도 걸리지 않는다.
URL 해부 분석.
웹 주소는 네 조각으로 읽는다.
프로토콜
https://- 통신 규칙."어떤 언어로 말할까" http뒤에 s가 붙으면 잠금(암호화)
도메인 이름
www.naver.com- "어느 식당으로 갈까?" DNS가 IP 숫자로 바꿔 준다
경로
/search- 식당 안 어느 테이블,메뉴판 (서버 안의 어떤 문서인지)
쿼리(질문 값)
?query = 날씨- "주문에 붙이는 요청사항" (? 뒤에 이름 = 값 형태로 조건을 전달한다.)
URL (Uniform Resource Locator)
웹 문서 하나하나의 정확한 주소. 집 주소에 동 / 호수까지 적는 것과 같다.
참고로 주소창에 이 네 조각을 다 적지 않아도 브라우저가 알아서 채워준다 (naver.com만 쳐도)
주소를 치고 화면이 뜨기 까지의 5가지의 과정
- 주소 입력 (naver.com)
- DNS 조회 (이름 -> 숫자로 변환)
- 서버에 request 요청하기 <- (http(s)로 페이지 주세요!)
- 서버가 응답(response) HTML 문서를 돌려보냄.
- 브라우저가 그림. (문서를 읽어서 화면에 표시한다.)
만약 이 5가지 과정 중 하나라도 막히게 되면, "서버에 연결할 수 없음" 오류 창이 뜨게 된다.
인터넷과 웹은 같은말일까?
결론적으로는 인터넷과 웹은 같지가 않다. X
인터넷 (도로망 - 길)
전 세계 컴퓨터를 이어 주는 네트워크의 네트워크. IP 주소로 찾아가고, DNS가 이름 -> 숫자로 바꿔 준다. 케이블/라우터/데이터센터라는게 진짜 장비.
웹 (자동차 - 서비스)
인터넷 위에 달리는 여러 서비스 중 하나.
브라우저(손님)가 요청하고 서버(주방)가 HTML 문서를 응답한다. 이메일 - 게임은 다른 자동차
웹페이지 (자동차에 실린 물건들)
아까 처음에 언급한 HTML(뼈대) CSS(옷 스타일) JavaScript(움직임 - 동작)을 더한다. 내 컴퓨터에만 있으면 나만 볼 수 있고, 서버로 배포하면 누구나 볼 수 있다.
웹 없는 인터넷은 있을 수 있지만, 인터넷 없는 웹은 없다.
TIP
https의 s는 무슨 뜻?
https의 s는 Secure(안전)을 의미한다. 브라우저 주소창 왼쪽에 좌물쇠 아이콘이 있으면 안전하다는 것을 의미한다.
