basic about internet

7705 단어 basicbasic

비전공자인 나는 가끔 회사에서 업부를 하다 개발쪽 관련 지식이 아닌 기본적인 컴퓨터에 대한 지식부족으로 한번식 엉뚱한 부분에서 힘들어 할때가있다.
그래서 기본적 cs관련이나 컴퓨터,인터넷관련 지식을 한번씩 basic이란 시리즈로 정리해보려한다.

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

인터넷은 웹의 핵심기술로 컴퓨터들이 서로 통신을 가능한 거대 네트워크이다. 우리는 다른 컴퓨터와 연결할 때 물리적인 방법( 이더넷 케이블 ) 또는 무선(블루트스, 와이파이) 로 연결을 하게된다. 만약 두개의 컴퓨터를 연결할 때 우린 어떻게 연결될까?

위와 같은 그림이 될것이다. 그렇다면 10개의 컴퓨터는 어떻게 연결될까?

위와 같은 형태로 되게 될 것이다. 유선케이블이라 생각하지말고 무선네트워크 상황또한 동일한 방식이다. 우리는 이런 복잡한 연결을 피하기위해 라우터라는 소형컴퓨터에 연결하게 된다. 이 라우터는 주어진 컴퓨터에 보낸 메세지가 올바른 대상 컴퓨터에 도착했는지 확인합니다. 이런 라우터를 이용하면 진짜 네트워크가 형성된 느낌을 받는다. 컴퓨터를 라우터에 연결하고 라우터에서 라우터로 무한적으로 확장할 수 있다.

하지만 이렇게 되면 주변사람들과의 네트워크만 가능하지 아주 먼곳에 케이블을 연결할 수도 없을 것이고 한정적인 네트워크가 되는 문제가 생긴다.

이러한 문제를 해결하는데 있어 이미 어디서나 사용중인 전화기 배선을 이용하게되었다. 전화 기반 시설은 이미 어느 세계 어떤 곳이던 연결이 되어있고 이를 연결하기 위해 우리는 모뎀이란 특수장비를 사용하게된다. 그래서 우리의 네트워크는 전화 시설에 연결되어 네트워크에서 수신해야하는 네트워크로 메세지를 보내고 이러한 작동을 하기위해 네트워크를 인터넷 서비스 제공업체 영어로하면 Internet Service Provider 즉 우리가 많이 들었던 ISP에 연결한다

이렇게 하여 현재 우리가 사용하고있는 네트워크망이 형성되었고 이를 우린 인터넷이라 합니다.

마지막으로 인터넷의 어원을 이해하면 위의 내용이 정리가 될 것이다.

인터넷의 어원은 1973년 TCP/IP를 정립한 빈턴 서프, 로버트 칸이 네트워크와 네트워크를 구현하여 모든 컴퓨터를 하나의 통신망 안에 연결(International Network)하고자 하는 의도에서 이를 줄여 인터넷이라 처음 명명했다는 것에 어원은 두고있다.

🧤브라우저의 동작원리

지금까지 프론트엔드 개발을 해오면서 브라우저 동작원리를 알아야하나란 생각을 많이한다. HTML/CSS/JAVSCRIPT만 알면 우린 개발을 하는데 큰 문제가 없으며 브라우저는 웹서버 내용을 자동으로 렌더링을 해준다. 하지만 개발을 하다보면 웹상의 기능이 다양해짐에 따라 브라우저 호환성 이슈가 많아졌다.

실제 작업하면서도 IE, Firefox, Chrome, Samsung Internet, Safari 다들 미세하지만 서로 다르게 결과를 출력할 떄가 있다.

[출처] : https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

웹브라우저 구조에대해 알아보자.

  • User Interface

버튼을 포함한 유저에게 보여지는 출력물을 담당하는 user interface

  • Browser engeine

UI와 렌더링 엔진사이에서 중간 역할을 수행

  • Rendering engeine

웹서버로부터 응답받은 내용을 UI상에 나타내주는 역할을 한다.

  • networking

웹서버와 통신이 가능하게 해주는 역할

  • javascript interpreter

javascript코드를 파싱하고 실행시켜주는 역할

  • data persistence

쿠키와 같은 로컬 데이터를 저장하는 데이터 스토리지

[출처] : https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

위의 사진은 렌더링 엔진 작동방식에 대한 흐름에대해 이해를 돕기 위한 사진이다.

맨처음 렌더링엔진은 전달받은 HTML문서를 맨처음 네트워크 계층에서 불러옵니다. 그 후 동작은

  • HTML파싱후 DOM트리 만들기

렌더링 엔진이 네트워크 계층을 통해 받은 HTML소스 코드를 파싱하여 각각의 요소들을 DOM노드로 전환하게 됩니다. 여기서 DOM(Document Object Model)은 마크업 형태인 HTML을 오브젝트 모델로 바꾸는 것 입니다.

<html>
	<body>
		<p>Hello Market</p>
		<div><img src="img주소" alt="" /></div>
	</body>
</html>

위와 같은 구성이 DOM Tree로 전환되면 아래 사진의 구조가 된다.

  • render tree 생성

HTML파싱하여 DOM트리를 구성후에 렌더링엔진은 CSS데이터를 파싱하고 CSS데이터로 렌더 트리를 생성합니다. 위의 DOM트리에서 웹페이지에 출력할 내용을 구성한다 생각하면 렌더트리에서는 시각적인 요소를 정하게 됩니다.

  • render tree 레이아웃 생성

이 단계에서 각 노드들에게 어느 공간에 위치해야하는지를 부여합니다.

  • render tree painting

렌더 트리가 생성되어 레이아웃이 구성이 되었다면 UI적인 화면 배치가 마무리 되었다. 여기서 더 나은 UX를 위해 렌더링 엔진은 각 컨텐츠를 최대한 빠르게 스크린에 띄워야한다. 그렇기에 한번에 모든 html을 파싱해서 출력 하는게 아니라 일부를 먼저 트리 과정을 진행하여 출력하고 나머지는 순차적인 방식으로 출력하게된다.

🧤DNS 작동원리

DNS란?

DNS의 이름은 Domain Name System의 줄인말이다. 사람이 읽을 수 있는 도메인 이름 을 머신이 읽을 수 있는 IP주소로 변형하는 것이다.

예로들면 www.hellomarket.com이라는 사람이 읽을수있는 이름을 192.0.2.44(예시)과 같이 머신이 읽을 수 있게 IP주소로 변환합니다.

인터넷의 DNS시스템은 이름과 숫자 간의 매핑을 관리하여 쉽게 생각하면 전화번호부와 같은 기능이라 생각하면된다. DNS서버는 이름에 대한 요청을 IP주소로 변환하여 사용자가 도메인 이름을 웹 브라우저에 입력시 사용자에게 어떤 서버를 연결할지를 제어하는데 이러한 요청을 우리는 쿼리라고 한다.

DNS의 트래픽을 보면서 작동원리 이해하기

[출처] : https://aws.amazon.com/ko/route53/what-is-dns/

  1. 사용자가 www.example.com이란 url을 입력하고 엔터를 누릅니다.
  2. 위의 요청은 위의 내용에서 언급한 ISP(internet service provider)로 라우팅 됩니다.
  3. ISP DNS해석기는 요청을 DNS 루트 이름 서버로 전달합니다.
  4. ISP DNS해석기는 요청을 이번엔 .com 도메인의 서버에 다시 전달합니다.
  5. ISP DNS해석기는 www.example.com에 대한 요청을 해당 이름 서버로 전달합니다.
  6. 서버에서 example.com 호스팅에서 레코드를 찾아 서버 IP주소 192.0.2.44라는 값을 받고 DNS해석기에 반환 합니다.
  7. 여기서 머신에서 인식가능한 주소를 확보하였고 다음에 누군가 이런 요청을 할 때 빠르게 응답을 하기 위해 IP주소를 캐싱합니다.
  8. DNS해석기에서 얻은 IP주소로 www.example.com에 대한 요청을 전송합니다. 여기가 컨텐츠가 저장되어있는 곳 입니다.
  9. 웹브라우저에서 페이지를 출력합니다.

🧤도메인 네임은 무엇일까요?

넓은 의미로는 네트워크에서 컴퓨터를 식별하는 것이며
좁은 의미로는 DNS에 등록된 이름을 의미한다.

쉽게 생각해IP는 사람이 기억하기 어렵기에 이를 위해 각 IP에 이름을 부여할 수 있게 하는 것을 도메인이라한다.

도메인 네임의 사용형태를 보자

www.이름.co.kr과 같은 경우는 대부분 국내 회사들이 사용합니다.

www.이름.com과 같은 경우는 상업적인 회사들이 사용합니다.

www.이름.org와 같은 경우는 비영리 단체들이 사용합니다.

🧤호스팅은 무엇일까요?

호스팅은 정보 집약체인 서버의 전체나 일부를 이용할 수 있게 임대해주는 서비스이다. 이런 서버를 관리하기 위해선24시간 안정적인 전원공급도 해주어야하고 빠르며 안정적인 인터넷 회선을 사용해야한다. 또한 보안 시스템역시 갖추고 있어야하기에 개인이 관리하기보단 전문업체의 호스팅 서비스를 사용하는 것이 일반적이다.

호스팅 종류에 대하여 알아보자.

  • 웹 호스팅

웹 호스팅이란 여러 고객이 하나의 서버를 함께사용하는 겁니다. 하나의 서버를 나눠 쓰다보니 저렴하게 이용이 가능하고 업체의 관리를 받기 편합니다. 단점으로는 하드웨어가 제한적이라는 겁니다.

  • 서버 호스팅

고객이 단독으로 서버를 사용하는 형태입니다. 넓은 하드웨어를 혼자 사용하고 운영이나 관리에 권한을 가질수 있고 빠른 데이터 전송속도를 누릴수 있다는 장점이있지만 단독사용이다보니 비용이 높습니다.

  • 클라우드 서버

서버 호스팅을 가상화하여 가상서버를 단독으로 사용할 수 있습니다. 유연하게 서버 자원을 늘리거나 축소하여 사용할 수 있다는 장점이 있지만 하나의 가상서버에 문제가 생기면 다른 가상서버에도 문제가 생길 수 있다는 단점이 있습니다.

animation, perspective
vuejs를 이용한 모바일 웹 프론트 엔드 구축기 (1)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage