알토르 코딩 0주차 과제

1. 웹 브라우저란 무엇인가?

2. 서버란 무엇인가?

3. 클라이언트란 무엇인가?

4. IP, DNS, DOMAIN, PORT는 무엇인가?

5. 네트워크란 무엇인가?

6. 공유기란 무엇인가?

7. HTTPS란 무엇인가?

8. DOM이란 무엇인가?

9. 브라우저 렌더링이란 무엇인가?

---

질문 1. 웹 브라우저란 무엇인가?

답변 1. 웹 사이트를 검색하고, 볼 수 있게 하는 도구. 오페라, 파이어폭스, 마이크로소프트 엣지, 브레이브, 크롬 등이 존재한다. 일반적으로, 웹 사이트는 HTML, CSS, Javascript의 3가지 구성요소를 갖는다.

 

- HTML은 웹 사이트의 뼈대이다. 웹 사이트가 전달하고자 하는 내용을 포함한다.

 

- CSS는 웹 사이트의 근육이다. 전달할 내용을 어떻게 배치할 것인지, 어떻게 강조할 것인지 등의 시각적인 요소를 맡는다.

 

- Javascript는 웹 사이트의 신경계이다. HTML과 CSS만으로는 웹 사이트의 정보를 표시하는 데 그친다. 뼈대와 근육만으로는 자체적으로 움직이지 못하고 뇌의 명령을 전달할 신경계가 필요하다. Javascript 또한 사용자와 상호작용하여, 웹 사이트를 '움직이게' 만든다.

---

질문 2. 서버란 무엇인가? & 질문 3. 클라이언트란 무엇인가?

답변 2. Servicer의 약어로서, 문자 그대로 서비스를 제공하는 자를 말한다. 

답변 3. Server로부터 서비스를 제공받는 고객을 의미한다. 

Server와 Client는 서로 통신하는데, 이 통신이 어떻게 이루어지는지를 정해놓은 약속/규약이 존재한다.

이 규약을 HTTP/HyperTexT Protocol이라고 한다.

 

- HTTP는 초기에 오직 HTML 파일만을 요청하고 답신하였으나, 현재에는 HTML 파일 뿐만 아니라 CSS 파일, Javascript 파일, 이미지 파일까지 전부 요청하고 답신할 수 있다.

---

질문 4. IP, DNS, DOMAIN, PORT는 무엇인가?

답변 4.

IP: 컴퓨터에게 주어진 집 주소.

IPv4, IPv6 등의 형식이 존재한다. IPv4는 4부분 10진수로 표시하며, IPv6는 8부분 16진수로 표시한다. 전자의 절대량 부족으로 인해 후자가 개발되었다.

 

Domain: 사람의 편의를 위해, 숫자 형태의 집 주소를 문자열 형태로 변환한 것.

사람의 편의를 위한 것이기 때문에, 컴퓨터는 별도의 수단이 없다면 Domain을 인식하지 못한다. 

예시: www.naver.com,  www.google.com  등.

 

DNS: 컴퓨터들의 집 주소인 IP와 해당 IP의 문자열 버전인 Domain을 대응시켜 목록화한 전화번호부.

 

과정 1. 클라이언트가 크롬 검색창에 www.naver.com을 검색한다.

과정 2. 클라이언트의 이 요청은 우선 DNS 서버에 전달된다. 그 후, 해당 도메인에 맞는 IP 주소를 다시 클라이언트에게 반환한다.

과정 3. 클라이언트는 원하는 IP주소를 받았으니, 해당 주소를 가진 서버에게 접근하게 해달라는 요청을 보낸다.

과정 4. Naver의 서버는 이 요청을 받고, 답신한다.

 

PORT: 서버에 접근한 후, 원하는 기능이나 프로그램에 접근할 수 있도록 설계된 번호표.

Naver나 Google은 서로 다른 서버를 갖지만, 공통적으로 웹 서비스를 위해 웹 서버를 갖고 있다.

관례 상, 웹 서버라는 프로그램에는 80이라는 포트 번호/번호표가 배정된다.

---

질문 5. 네트워크란 무엇인가?

답변 5. 특정한 대상과 다른 대상 사이에 통신이 가능한 경우, 이 둘 사이의 관계는 '네트워크가 생성되었다' 라고 말한다.

네트워크란, '연결된 대상 사이에 통신이 가능한 상태'를 말한다.

인터넷은, 통신 가능한 대상의 범위가 극도로 큰 네트워크를 말한다.

---

질문 6. 공유기란 무엇인가?

답변 6.

공유기란, (네트워크를) 공유(하도록 만드는)기기이다.

원칙적으로, 하나의 컴퓨터에는 중복되지 않는 1개의 IP가 배정된다.

그러나 한 명의 개인이 복수의 컴퓨터를 사용할 수 있게 되었다. 기존의 IPv4 기반 IP의 개수는 한정되어 있다.

이 상황을 해결하기 위해 공유기는 다음의 메커니즘을 이용한다.

 

- 첫째, 공유기가 1개의 IP 주소를 할당받는다. 이를 '공인 IP'라고 한다.

- 둘째, 공유기는 해당 공유기를 사용하는 기기들에게, '해당 공유기 네트워크 안에서만 존재하는 IP'를 할당한다.

이를 '사설/가상 IP' 라고 한다.

- 셋째, 이 '사설/가상 IP'는 공유기 네트워크 내부에만 존재하며, 외부/전체 인터넷에는 존재하지 않는다. 

따라서, IP의 중복 금지 원칙이 적용되지 않는다.

---

질문 7. HTTPS란 무엇인가?

답변 7.

보안 처리가 된 HyperTexT Protocol을 말한다.

기존의 HTTP는 보안 체계가 잡혀 있지 않아, 해커가 간섭할 경우 네트워크 이용자의 정보가 유출될 위험성이 있었다. 

이를 방지하기 위해, 전송되는 정보를 암호화하고 전용 전송 포트를 사용하게 하였다.

이를 통해, 일차적으로 해커가 정보를 빼돌리기 어렵게 하고 이차적으로 빼돌린 정보를 알아볼 수 없게 하였다.

---

질문 8. DOM이란 무엇인가?

답변 8.

DOM/Document Object Model이란, Javascript를 위한 HTML 파일의 번역본이다.

 

HTML과 CSS만으로도 웹사이트를 만들 수는 있지만, 이 웹사이트가 제공하는 기능은 제한적이다.

웹사이트가 더 많은 기능을 제공하게 만들려면, 신경계에 해당하는 Javascript를 사용해야만 한다.

그런데, Javascript는 오직 객체들만을 인식하고 처리할 수 있다. 그리고, HTML과 CSS는 객체가 아니다.

따라서, 웹사이트에서 Javascript를 쓰고 싶다면 HTML을 객체화해줄 번역기가 필요하다.

HTML의 헤더, 클래스, div 등의 모든 구성요소가 전부 객체라고 알 수 있게 해줄 번역기가 필요하다.

그 번역기가 바로 DOM이다.

 

또한, HTML 파일을 DOM 트리로 만드는 일련의 과정을 파싱/Parsing이라고 한다.

Parsing은, 하나의 정보/데이터를 다른 객체/프로그램/사용자가 이해할 수 있는 무언가로 변환하는 과정을 말한다.

---

질문 9. 브라우저 렌더링이란 무엇인가?

답변 9. 브라우저 렌더링이란, 서버로부터 HTML, CSS, JS, 이미지 파일등을 받아서 브라우저에 띄우는 행위를 말한다.

 

브라우저 렌더링의 순서는 다음의 그림과 같다.

브라우저 렌더링 과정

 

- 1) 클라이언트가 서버에게 네트워크를 통해 웹 페이지의 정보를 받는다.

- 2) HTML은 DOM으로 Parsing하고, CSS는 CSSOM으로 Parsing한다.

- 3) DOM과 CSSOM, JS를 합쳐 렌더링 트리를 만든다. 렌더링 트리는 웹 사이트에 나타낼 요소들의 위치를 계산한다.

- 4) 렌더링 트리를 통해 웹 페이지의 청사진이 만들어졌다면, 이 청사진을 기반으로 각종 요소들의 스타일과 크기를 계산한다. (= 화면에 드러날 웹 페이지의 구조, 즉 레이아웃을 만든다.) 

- 5) 레이아웃이 만들어졌으면, 레이아웃을 그린다.(= Paint.)

---

참고문헌

1. https://continuous-development.tistory.com/entry/WEB-Javascript%EB%A1%9C-HTML-%ED%83%9C%EA%B7%B8DOM-%EC%A0%91%EA%B7%BC%ED%95%98%EA%B8%B0

[WEB] Javascript로 HTML 태그(DOM) 접근하기

2. https://apost.dev/668/

[javascript] 문서 객체 모델(DOM)과 노드, 그리고 태그의 이해

3. https://m.blog.naver.com/magnking/220972680805

[JavaScript] DOM이란 무엇인가?

4. https://velog.io/@rsuubinn/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC

[네트워크] TCP/IP, 네트워크 계층 모델, HTTP, HTTPS

5. https://velog.io/@timosean/%EC%9B%B9-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81Rendering-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

웹 브라우저의 렌더링(Rendering) 알아보기

6. https://opendeveloper.tistory.com/entry/FrontEnd-%EC%A7%80%EC%8B%9D%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%9B%90%EB%A6%AC%EC%99%80-%EC%88%9C%EC%84%9C%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-%EA%B3%A0%EB%A0%A4%EC%82%AC%ED%95%AD

[FrontEnd 지식] 브라우저 렌더링 원리와 순서(+성능 최적화 고려사항)

7. https://velog.io/@zaman17/%EA%B8%B0%EC%88%A0%EB%A9%B4%EC%A0%91%EB%8C%80%EB%B9%84-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%88%9C%EC%84%9C%EC%99%80-%EC%9B%90%EB%A6%AC