[Web] Web 동작원리

Web 개발 엔지니어가 된다고 마음먹었지만, 정작 프론트 / 백의 존재여부만 알지 이들이 어떻게 작동하는지는 (req, res) 가 지식의 전부다.

멘토님의 지도가 없는 세션이다보니, 영상과 PPT를 더 몰입해서 공부하고 블로그 포스팅하면서 이번 기회에 확실히 짚고 넘어가야겠다.

---

🧑‍💻 Session : How the Web Works

📍About

• 웹은 어떻게 동작할까?
• 프론트? 백앤드? 서버? 배포?
• 어떻게 내가 만든 코드가 서버에 올라가서 남들도 볼 수 있는 것일까?

🚀 What You Will Learn

• 웹이 어떻게 동작하는지 기본적으로 설명할 수 있다.
• 배포, 호스팅, ip주소, 서버, url, 프론트, 백앤드 등의 용어를 명확히 이해한다.

 

✍️ Note

요청 (HTTP 통신요청) - 응답 (wecode 서버)

 

1. Hosting (호스팅, Web Hosting Service)

 

인터넷에 띄운다는 것은 홈페이지 구성 파일들(HTML, CSS, Javascript)이 인터넷에 항상 연결되어 있고, 절대 꺼지지 않는 호스트 컴퓨터(웹서버)에 저장했다가 사용자가 요청을 하면 언제든지 응답을 하는 체계

 

- 호스트 서버 : 서버 컴퓨터 전체 혹은 일정 공간을 이용할 수 있도록 임대해주는 서비스를 활용한다. (AWS ec2/S3, cafe24 호스팅센터 등)

 

 

2. IP(Internet Protocol)

 

인터넷으로 통신하는 각 Device(컴퓨터, 통신장비)에 부여된 고유한 값.

즉, 내가 사용하는 컴퓨터, 핸드폰뿐만 아니라 호스트 서버 컴퓨터들까지 모두 고유의 IP 주소를 가지며, 인터넷상에서 모든 컴퓨터는 이 IP주소(숫자)를 사용하여 서로를 찾고 통신한다.

 

- IP 구조

* IPv4 : 8bits 숫자 4자리(총 32bits) 숫자로 이루어져 있다. 총 경우의 수는 2^32(43억)

* IPv6 : 위 경우의 수의 소진이 도래하여, 128bits의 IP주소를 사용한다. 

       ex) 2400:cb00:2048:1::c629.:d7a2 

 

 

 

 

 

 

 

3. Domain (Domain Name)

 

문자(string)으로 된 고유 주소. 수많은 IP 주소를 사람이 외워서 접속할 수 없기 때문에 기억하기 쉽도록 문자형태로 표현.

 ex) www.wecode.co.kr,  www.google.com  

* 등록 가능한 도메인을 구매해서 사용한다. (연당 2만원 가량)

 

- 도메인 구조(문자로 된 고유주소, 식별 문자열로 구성)

• Protocol : 컴퓨터 간 정보교환을 원활하게 하는 통신규약
• Subdomain : 1차 도메인. 도메인 주소들을 카테고리화(www, cafe, m 등). 생략 가능
• domain : 도메인 이름
• Top level domain : 단체정보(회사, 학교, 정부) 혹은 국가구분 등의 약어        * Base URL : protocol ~ top level domain
• Port : 개발 시 기본포트(문)을 설정해서 제작함
• Path : 해당 페이지의 경로를 표현. 초기에는 위처럼 직시적으로 만들었지만, 최근엔 브라우저에서 추상화하여 표현함(특수문자)
• Query String(Parameter) : 제품 카테고리나 프로덕트 ID를 나열함

4. DNS (Domain Name System)

 

도메인 이름(사람이 읽을 수 있는)을 IP주소(컴퓨터가 인식 가능한)로 변환. 이름과 숫자간의 매핑을 관리하는 전화번호부 기능.

  ex) Amazon Route 53, Cafe24 도메인 관리, 가비아 네임서버 관리 등

 

- DNS 서버 : 도메인과 서버를 연결하는 중간 서버. 쿼리를 통해 도메인 주소 -> IP 주소로 변환한다.

• DNS 리커서 : 브라우저 등 애플리케이션을 통해 클라이언트 컴퓨터로부터 필요한 쿼리를 받도록 고안된 서버 (도서관 사서)
• 루트이름 서버 : 도메인을 IP주소로 변환하는 첫 단계. 특정위치를 찾는 색인 역할 (도서관 색인)
• TLD(최상위 도메인) 이름 서버 : 도메인의 TLD(co.kr, com 등) 을 통해 특정 IP주소 검색을 한단계 심화한다 (도서관 책장)
• 권한 있는 이름 서버 : 최종 서버이자 서버쿼리의 종착점. 요청한 레코드에 대한 엑세스 권한이 있다면 IP주소를 리커서로 반환.

 

<결론>

1. 사용자가 브라우저 도메인을 DNS 서버로 요청
2. DNS 서버는 시퀀스를 통해 도메인 주소를 IP 주소로 변환함
3. 변환된 IP 주소에 해당하는 호스트 서버(컴퓨터)에 브라우저가 접근함
4. 해당 호스트 서버에서 웹페이지에 대한 정보를 받아와서 브라우저 상에서 표현

---

🤔 번외

- 배포(Deploy)

배포란, 그동한 개발한 결과물을 인터넷상에 공개하고 모든 사람들이 접근하여 볼 수 있도록 하는 것을 의미. ( -> 호스트 서버)

 

<추가 학습 사이트>
How Browsers Work(번역) : https://velog.io/@devzunky/TIL-no.97-WEB-3-How-Browsers-Work-xck59bsuxf
인터넷이 동작하는 구체적인 원리 : https://parksb.github.io/article/36.html?fbclid=IwAR15UeD4WM0Z0TZ4TTjjKGIfR3qnQiXPdEKWh73_2uPaSP12Qi51QjSm-Dw
DNS란 : https://www.cloudflare.com/learning/dns/what-is-dns/