[알토르] #0 IT 기초 키워드 정리

Hyungjun·2024년 5월 7일

목록 보기

1/23

시작

안녕하세요. AI스쿨의 알토르 과정을 시작하게 되었습니다. 매주 나오는 과제를 해결하기 위해 조사하고 오류를 해결해나가는 과정을 담아 보겠습니다. 매주 블로그 글을 쓰고 발표를 하는 과정이니 설명하는 방식으로 쓰고자 노력하겠습니다.

첫번째 과제 : [IT 기초 키워드 정리] 부터 시작하겠습니다.

웹 브라우져

웹 브라우져는 크롬,사파리 등과 같이 웹 페이지를 볼 수 있도록 해주는 응용프로그램이다.
초기 웹페이지는 HTML 문서로만 형성된 글 페이지였는데, 버튼 등과 같은 기능을 넣기위해 javascript라는 언어를 만들고, 페이지를 더 이쁘게 디자인하기 위해 CSS를 만들었다.

서버

서비스를 제공하면 서버이다. 웹 서버, DB 서버, DNS 서버 등이 있다. 이들은 또한 다 컴퓨터다.

클라이언트

서비스를 요청하면 클라이언트이다.
컴퓨터는 서버와 클라이언트 모두가 될 수 있다. 서버와 클라이언트가 HTML, 이미지, js코드 등을 주고받는 통신 방법을 HTTP라고 한다.

IP

집주소와 같다. 컴퓨터의 주소이다. 0~ 255 사이의 수 4개로 이루어져 있다. 컴퓨터를 찾기 위한 주소이다.

도메인

IP가 숫자로 이루어져있는데, 사람은 문자가 편하기 때문에 IP를 문자화 시킨것이 도메인이다.
URL은 도메인을 포함한 경로이다.

DNS

domain name server. 즉, 문자로된 도메인을 숫자로 된 IP주소로 바꿔서 클라이언트에게 서비스한다.

PORT

DNS 서버를 통해 IP주소를 받아서 서버 컴퓨터의 서비스를 받고자 할때, 하나의 컴퓨터가 다양한 서비스를 갖고있을 수 있기 때문에 PORT라는 서비스 번호가 필요하다. 한 컴퓨터 안에서 제공하는 서비스를 PORT번호로 찾는 것이다.
너무 가짓수가 많아지면 사용이 불편하기에 많이 사용되는 서비스 번호를 정해놓았다. 예를 들어 유명한 포트 번호로는 80번은 HTTP 서버, 52번은 DNS 서버가 있다.

네트워크

통신이 가능하면 네트워크다. 예를 들어, 카페에 2명의 (테이블)네트워크, 맞은편의 4명의 (테이블)네트워크가 있을때, 실 전화기로 두 (테이블)네트워크를 통신가능하게 할 수 있다. 여기서 실 전화기의 역할이 네트워크 연결 역할을 합니다. 실제로는 전 세계에 깔려있는 광케이블이 네트워크들이 다 연결되어있다. 이렇게 전세계적으로 통신을 할 수 있게 만들어진 네트워크 시스템을 인터넷이라고 한다. Inter-network(네트워크들을 하나로), 우리나라는 광케이블을 KT에서 관리하고 있다.

공유기

하나의 네트워크 망을 만들어주는 기능, 공인IP와 사설IP 사이에서 변환을 해주는 기능이 있는 기기
IP주소는 총 40억개의 가짓수를 가질 수 있다. 하지만 전세계 인구가 80억명이기에 IP의 가짓수가 모자르다. 그래서 인터넷 안에서 사용되는 공인IP와 인터넷 밖에서 사용되는 사설IP로 나누었다. 개인이 사용하는 사설IP는 겹쳐도 상관없기에 가짓수 문제를 해결할 수 있었다.

HTTPS는 뒤에 Sec이 붙은건데, 공공 공유기에 해커가 연결해 자신의 컴퓨터가 공유기라고 속인다. 클라이언트는 해커의 컴퓨터를 통해 데이터를 주고받게 되고 정보를 해킹당하는 일이 빈번했다. 그래서 데이터를 암호화하여 통신하는 HTTPS로 업그레이드 하였다.

DOM

document object model로 문서 객체 모델이다. html문서의 태그를 js가 이용할 수 있는 객체로 만든 것을 문서객체라 한다. 그러니 문서 객체 모델은 문서 객체를 인식하는 방식, 문서 객체의 집합 등으로 해석할 수 있다.

DOM은 트리 구조로 형성되어 있다.

정적으로 문서객체 만들기
웹 브라우져가 HTML 문서를 읽으면 문서객체가 생성된다.
동적으로 문서객체 만들기
js를 이용해 HTML에 없는 문서객체를 동적으로 만들 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 문서객체 모델(DOM)</title >
<script type= "text/javascript">
    window.onload = function(){
       //1. 문서 객체 생성
       var header = document.createElement('h2'); //h2 태그를 생성해주는 것
       var textNode = document.createTextNode('Hello DOM');

       //2. 노드(요소/텍스트)를 연결.
       header.appendChild(textNode);

       //3. body 문서 객체에 header 문서 객체를 추가.
       document.body.appendChild(header);
    };
</script>
</head>
<body>
   <h1 id ="header_1" name= "" >HEADER-1 </h1 >
   <div >
      <h1 id = "header_2">HEADER-2</h1 >
   </div >
   <hr >
   <h1 id = "clock"></h1>
</body>
</html>

브라우져 랜더링 과정

랜더링 : 클라이언트가 선택한 자원을 서버로부터 받아 브라우져에 표시하는 것

불러오기 - Loader가 서버로부터 전달받은 리소스 스트림을 읽는 과정
DOM, CSSOM 생성 - 웹 엔진의 HTML/XML parser가 문서를 파싱해 DOM tree를, CSSOM parser가 CSSOM을 만듬
DOM과 CSSOM으로 Render tree 생성
CSS, 레이아웃 - Render tree를 토대로 그려질 노드와 스타일, 크기를 계산함. 그 후 객체의 위치와 크기를 정함
그리기 - Render tree의 각 노드를 실제 픽셀로 변환