프론트엔드 로드맵 스터디 #1 #인터넷

so ez·2021년 12월 1일
1

인터넷

인터넷이란 무엇인가?

  1. 웹의 핵심적인 기술
  2. TCP/IP 통신 프로토콜을 이용해 서로 데이터를 주고 받로록 한 네트워크
    • TCP : 클라이언트와 서버간에 데이터를 신뢰성있게 전달하기 위해 만들어진 프로토콜
    • IP : 인터넷에 접속할 때 부여받는 컴퓨터의 주소(고유번호). 4바이트로 이루어져있음
  3. 모든 컴퓨터를 하나의 통신망 안에 연결하고자 하는 의도

정리하자면 사람들이 컴퓨터의 고유번호로 서버와 소통해서 데이터를 주고받는 것을 인터넷이라고 할 수 있겠다.
다음!

🌼 인터넷은 어떻게 작동될까?

1. 모든 컴퓨터를 유선으로 연결..?
10개의 컴퓨터가 데이터를 주고받기 위해 서로 선을 연결해야한다고 생각해보자.
오마이까쉬,, 열 대만 해도 벌써 노답이다.
2. 중간 연결책!
그 10개의 컴퓨터를 서로 연결하는 것이 아니라, 한대의 라우터에 연결한다고 가정해보자.
(라우터는 A 컴퓨터에서 B 컴퓨터로 데이터를 전달하는 소형 컴퓨터)
1에서 생각해본 상황보다 훠어얼씬 깔끔하다
3. 중간 연결책끼리 연결
라우터도 컴퓨터이기 때문에 서로 연결해서 네트워크를 확장할 수 있다.
6개의 컴퓨터와 연결된 라우터와, 4개의 컴퓨터가 연결된 라우터를 서로 연결하여 네트워크를 확장할 수 있다.
4. 여기까진 이해했다. 그렇다면 장거리는?
우리 모두의 집엔 이미 전력과 전화같이 연결된 케이블이 있다.
전화 기반 시설은 세계 어느 곳과도 연결 되어있어서 이 것을 활용할 수 있다.
우리는 네트워크를 전화시설과 연결하기 위해 모뎀이라는 특별한 장비가 필요하다.
모뎀은 네트워크 정보를 전화 시설에서 처리 할 수 있는 정보로 변환해!
5. 모뎀에서 모뎀 사이, ISP
컴퓨터 -> 라우터 -> 모뎀을 거쳐 전화시설에서 처리 할 수 있는 정보가 생성됐다.
그리고 그 정보를 주고받기 위해서 인터넷 서비스 제공업체 ISP에 연결이 필요하다.
(ISP는 모두가 연결되어 있는 몇몇 특수한 라우터를 관리하고, 다른 ISP 라우터에도 엑세스 할 수 있는 회사! 예를들어 한국에는 KT, SKT, LG U+등의 통신사가 있음)
이 ISP를 통해 우리의 네트워크 메시지는 우리가 원하는곳으로 흘러간다.

정리하자면,

컴퓨터 A -(데이터)->
모뎀 -(가공 데이터)->
ISP -(가공데이터)->
모뎀 -(데이터)->
컴퓨터 B

(컴퓨터가 많아지면 중간에 라우터 추가)
이렇게 인터넷이 작동됩니다!
다음!

🌼 HTTP는 무엇일까?

http는 Hyper Text Transfer Protocol의 두문자어로, 인터넷에서 데이터를 주고받을 수 있는 프로토콜이다.
(뚝배기는 머리고 프로토콜은 규칙입니다)

우리가 홈페이지, 또는 특정 메뉴 등에 진입할 때 서버에 정보를 달라고 요청을 보내고, 그 값을 받아서 원하는 페이지가 뜨는 것이다.

요청을 보낼 때 요청에 대한 정보를 담아서 보내는데 이 정보들이 담긴 메시지를 HTTP 메시지 라고 한다.
HTTP 메시지는 시작줄, 헤더, 본문으로 구성된다.

🌼 브라우저와 동작 원리

브라우저란 웹에 접근하기 위한 하나의 소프트웨어이다.
종류로는 파이어폭스, 크롬, 사파리 등이 있다.
익스형은 들어가 멀리 안나간다,,

자 그럼 동작원리를 이해해보자!

내가 이제 막 브라우저를 켜서 네이버에 들어갈라고 주소를 입력하면
1. 브라우저는 서버에 요청을 땋!
2. 서버는 요청에 대한 응답을 땋!
그 응답 데이터가 html, css, 이미지 등의 웹을 구성하는 데이터다~ 이거에요~~~!
(이렇게 요청과 응답에 대한 규칙이 http)
3. 그럼 브라우저가 응답받은 데이터를 html,css 명세에 따라 해석해서 화면에 표시하고, 나는 원하는 네이버 화면을 볼 수 있게 된다!
(명세는 웹 표준화 기구인 W3C에서 정한답니다~!)

대략 설명하자면 이렇고 자세하게 알아보ㅈr,,(피곤)


브라우저에 대해 검색하면 제일 많이 보이는 이미지다

그림에 있는 요소들을 하나씩 이해해보자

  1. 사용자 인터페이스
    주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등.
    요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
    (html 외 부분)
  2. 브라우저 엔진
    사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
  3. 렌더링 엔진
    요청한 콘텐츠를 표시.
    예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
  4. 통신
    HTTP 요청과 같은 네트워크 호출에 사용됨.
    이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
  5. 자바스크립트 해석기
    자바스크립트 코드를 해석하고 실행.
  6. UI 백엔드
    콤보 박스와 창 같은 기본적인 장치를 그림.
    플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
  7. 자료 저장소
    이 부분은 자료를 저장하는 계층이다.
    쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다.
    HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

🌼 DNS와 작동 원리

헐 나지금 이거 공부하면서 알게 된 사실
DNS 도메인 네임 서비스인 줄 알았는데 도메인 네임 시스템이었다(Domain Name System)

암튼 DNS란! 이 글의 시작에서 인터넷이 무엇인지에 대해 알아볼 때 ip를 언급했었다.
인터넷에 접속할 때 부여받는 컴퓨터의 주소라고 했는데.
예를들면 172.217.161.174 이런식의 숫자로 구성된 주소다.(실제 구글 ip주소)
근데 우리가 네이버나 구글 등을 들어갈 때 저 숫자들을 다 외워서 주소창에 칠 순 없지 않은가,,
그래서 저 숫자로 구성된 ip 주소를 우리가 이해하기 쉬운 도메인 주소로 변환해서 사용하곤 하는데,(www.google.com 같이)
이렇게 입력된 도메인주소를 다시 숫자인 ip주소로 변환하는 과정을 담당하는 시스템이 DNS 이다!

DNS가 뭔지는 알았고, 작동 원리는 무엇인지 알아보자.

1. 사용자가 도메인 주소 입력
2. Local DNS가 Root DNS로 'www.naver.com' query 날림
3. Root DNS가 'com DNS'를 관리하는 TLD(Top-Level Domain)의 정보를 Local DNS에게 전달
4. TLD에 ('com DNS' 관리자) 'www.naver.com' query 날림
5. TLD에서 'naver.com DNS'의 정보를 Local DNS에게 전달
6. 'naver.com' 도메인을 관리하는 DNS 서버에 'www.naver.com' query 날림
7. 'naver.com' 도메인을 관리하는 DNS 서버는 Local DNS 서버에게 'www.naver.com'에 대한 IP 주소 '222.122.195.6'를 응답
8. Local DNS는 www.naver.com에 대한 IP 주소를 캐싱을 하고 Browser PC로 IP 주소 정보 전달

🌼 도메인 네임은 무엇일까?

도메인 네임에 대해 알아보ㅈ,,r,,
(자고싶다 솔직히 스터디 안하면 벌금내기로 한 것만 아니엇으면 벌써 잤다)

도메인(도메인 네임)

도메인은 한마디로 딱 정리해서! 인터넷상에서의 (알아보기 쉬운)주소다.
풀어보자면 인터넷에 연결된 컴퓨터를 사람이 쉽게 기억하고 입력할 수 있도록 문자(영문, 한글, 숫자 등)로 만든 인터넷 주소이다.
법률상으로도 '인터넷에서 인터넷 프로토콜(ip) 주소를 사람이 기억하기 쉽도록 하기 위하여 만들어진 것' 이라고 명해져있다고 한다.

도메인 네임의 구조

도메인 네임은 점(dot)으로 구분하여 계층적으로 이루어져 있다.
각 단계는 오른쪽에서 왼쪽으로 1단계, 2단계, 3단계 도메인이라고 불린다.
(역트리 구조로 구성되어있다고 말하며, 단계가 높아질수록 도메인의 범위가 작아진다.)


위의 이미지를 참고하되, 예시는 www.google.co.kr로 들어보겠다.

1. 1단계 도메인/최상위 도메인(TLD, Top Level Domain)

  • 국가도메인
  • 위의 예시에서는 kr이 1단계 도메인에 해당한다.

2. 2단계 도메인(SLC, Second Level Domain)

  • 도메인의 성격
  • 위의 예시에서는 co가 2단계 도메인에 해당한다.
    (co로 인해 사업체의 도메인이라는 것을 알 수 있음)

3. 3단계 도메인

  • 사용자가 지정한 이름

그리고 맨 앞의 www는 도메인 네임에 포함되지 않는 '호스트명' 이라고 칭한다.

🌼 호스팅은 무엇일까?

호스팅
호스팅이란 정보의 집약체인 서버 컴퓨터의 전체 혹은 일부를 이용할 수 있도록 임대해 주는 서비스이다.
서버를 관리하기 위해서는 24시간 내내 안정적으로 전기를 공급해야 하고, 빠르고 안정적인 인터넷 회선을 사용해야 하며, 철저한 보안 시스템을 갖추고 있어야 한다.
따라서 개인이 서버를 관리하기보다 전문 업체의 호스팅 서비스를 사용하는 것이 일반적이다.

호스팅의 종류
호스팅의 종류는 웹 호스팅, 서버 호스팅, 클라우드 호스팅으로 나뉜다.
아래 그림으로 각 호스팅의 차이를 알아보자.

  • 웹 호스팅
    하나의 서버를 여러 고객이 사용하는 형태이다.
    서버를 나누어 쓰기 때문에 저렴하게 이용할 수 있고, 호스팅 업체의 통합 관리를 받기에 서버나 인프라 구축을 할 필요가 없어 편리하다.
    그러나 서버 관리 권한이 없고 자원이 제한적이라는 단점이 있다.

  • 서버 호스팅
    하나의 서버를 단독으로 고객이 단독 사용하는 형태이다.
    서버의 모든 자원을 활용하기 때문에 넓은 하드웨어 공간을 사용할 수 있고, 서버 운영/관리에 대한 직접적인 권한도 가질 수 있다.
    데이터 전송 속도도 빠르며 보안상으로도 유리하다.
    하지만 구축에 시간이 걸리며 단독으로 사용하는만큼 가격이 비싸다.

  • 클라우드 서버
    서버 호스팅을 가상화한 것으로, 가상 서버를 단독으로 사용할 수 있는 형태이다.
    고객이 필요할 때마다 서버 자원을 늘리거나 축소하여 유연하게 서버를 이용할 수 있다. 또한 사용한 만큼 지불하는 후불제 형식으로 매우 경제적이다.
    하지만 하나의 가상 서버에 문제가 생기면 다른 가상 서버에도 문제가 생길 수 있다는 단점이 있다.

profile
여기 프론트엔드 개발자 죽어가요

0개의 댓글