브라우저 동작원리 ~ 암호화

브라우저 동작 원리

• 통신 : 브라우저가 서버로 요청을 보내면, 서버는 요청에 따라 특정 값을 응답함. 요청은 한 번에 여러번 이루어질 수 있음.

• 렌더링 : 돔(통신을 통한 HTML)을 화면에 그림. 돔은 트리 구조로 이루어짐.

• 스크립트 실행 : JS 실행. 브라우저가 스크립트 태그를 읽으면 실행. 동적인 화면 구성.

변수, 상수, 자료형

• 변수 : 상황의 따라 변하는 값이 아닌 직접 할당한 값을 의미함. var와 let이 있지만 후자를 권장.

• 상수 : 변하지 않는 수. const 사용.

• 자료형 : Number, String, Boolean, Object, Array, Function, Undefined, Null이 존재.

메모리

• 할당 → 사용 → 해제 3가지의 과정을 거침.

• 메모리는 한정되어 있기 때문에 garbage collector(자동 메모리 관리 알고리즘)를 통해 정리함.

• 선언한 변수, 상수는 값이 아닌 메모리 주소를 바라봄. 이때 variable = variable + 1 같이 변수를 조작한다면 새로운 메모리 주소를 할당받아 값을 넣음. JS에서 원시타입은 변경이 불가능하기 때문. 따라서 원시 타입이 변경될 땐 항상 메모리가 새로 할당됨.

• js 엔진은 heap과 callstack으로 이루어진 가상머신으로 구성됨. heap은 참조 타입이, callstack은 원시 타입이 들어감.

원시 타입일 경우

배열일 경우

push()를 사용한 경우

사용 안하는 메모리는?

표현식과 연산자

• 표현식 : 숫자, 문자열, 논리값 같은 원시 값을 포함하여 변수, 상수, 함수 호출 등으로 조합하는 식 = 결과가 계산되는 식.

• 연산자
• 할당 연산자 : x = 10 같이 오른쪽 표현식을 왼쪽 피연산자 값에 할당하는 연산자. x += 1 같은 복합 할당 연산자도 가능.
• 비교 연산자 : x == y 같이 좌측과 우측의 피연산자를 비교함. true 또는 false를 반환함.
• 산술 연산자 : x + y 같이 사칙연산을 하는 연산자. Number를 반환.
• 비트 연산자 : x | y 같이 이진법으로 나타냈을 때 비트를 직접 조작하는 연산자.
• 논리 연산자 : x || y 같이 참과 거짓을 검증하는 연산자. Boolean 반환.
• 삼항 연산자 : x > y ? 100 : 200 같이 조건에 따라 값을 선택하는 연산자.
• 관계 연산자 : "name" in x 같이 객체에 속성이 있는지 확인하기 위한 연산자.
• typeof : 피연산자의 타입을 반환하는 연산자. 문자열로 변환.

흐름 제어

• control flow : 일반적으로 알고 있는 조건문, 반복문이 속함.
• if문의 경우 괄호 안에 undefined, null, 0, NaN, ''(empty string)이 오면 false 처리됨.
• switch의 경우 case 다음 break를 적어주지 않으면 다음 case도 같이 실행됨.

• data flow : 함수형 프로그램 방식으로 구현 가능.

배열과 객체

• 배열 : 연관된 데이터를 연속적인 형태로 저장하는 복합 타입.

//배열 만드는 방법
const arr1 = new Array(); // 빈배열
const arr2 = [];
const arr3 = [1,2,3,4,5];
const arr4 = new Array(5); // [<5 empty items>]
const arr5 = new Array(5).fill(5) // [5,5,5,5,5]

//배열 순회방식
for(let i = 0; i < 6; i += 1) {
	console.log(arr[i]);
} // 옛날 방식
for (const item of arr) {
	console.log(item);
} // 더 직관적이라 이 방식을 추천

• 객체 : 여러 값을 키-값 형태로 결합시킨 복합 타입.

//객체 만드는 방법
const obj1 = new Object(); // 빈배열
const obj2 = {};
const obj3 = {name:'임효성', age: 24};

//객체 추가 방법
obj["email"] = "hyosung0425@naver.com";
obj.phone = '01012345678';

//객체 삭제 방법
delete obj.phone;

//객체 확인 방법
console.log("email" in obj);

//key, value 확인 방법
console.log(Object.keys(obj));
console.log(Object.values(obj));

//객체 순회 방법
for(const key in obj) {
	console.log(key, obj[key]);
}

스코프와 클로저

• 스코프 : 유효 범위. 변수가 어느 범위까지 참조되는 지를 뜻함. global scope와 local scope로 나뉨. 이때 var는 로컬 스코프에 있어도 호이스팅 되어 예상치 못한 오류가 생길 수 있음.

• 클로저 : 함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때도 기억한 스코프에 접근할 수 있게 만드는 문법. 은닉화(내부 변수와 함수를 숨김) 가능.

브라우저에 URL을 입력하면?

1. URL 해석

• scheme : 프로토콜 영역.

• 계정 정보 : FTP, id, pw 등 인증이 요구되는 영역.

2. DNS(Domain Name System) 조회

• DNS는 도메인과 IP 주소를 서로 변환해줌.

• 브라우저는 캐시와 로컬의 hots 파일을 참조하고 정의가 되어있다면 내부적으로 ip를 반환. 둘 다 해당되지 않을 때 DNS에 요청.

• DNS는 root server → TLD server → authoritative server 순서로 탐색.

3. 해당 IP가 존재하는 서버로 이동

• 네트워크 장비 라우터를 통해 이동. 예를 들어 한국에서 미국으로 요청을 할 경우 여러번의 라우터를 거쳐 해당 서버가 존재하는 대역으로 접근함.

• 동적 라우팅을 통해 이동함.

4. ARP(address Resolution Protocol)를 이용하여 MAC 주소 변환

• ARP : 논리 주소인 IP 주소를 물리 주소인 MAC 주소로 변환하는 프로토콜.

• MAC 주소 : 실제 통신을 위한 변하지 않은 고유한(물리적인) 주소.

• 네트워크 내에 ARP를 broadcasting 하면 해당 IP 주소를 갖고 있는 기기가 MAC 주소를 반환함.

• 택배를 보낸다 가정했을 때 : IP주소는 도로명 주소를, MAC은 경도, 위도로 비유할 수 있음. 이때, 라우터는 택배 hub임.

5. TCP 통신을 통해 Socket을 열어야 함

• 실제 소켓을 열어 허락받아야 데이터를 전달할 수 있음. TCP 연결을 허락받기 위해 3 way handshake로 연결을 요청함.

• 요청이 수락되면 기기는 패킷을 받아 처리함.

6. 서버는 응답을 반환함

• 요청에 따른 적절한 응답 값 반환. 보통 URL을 입력하면 HTML이 응답됨.

7. 브라우저 렌더링

• 받은 HTML로 DOM Tree 구축.

• DOM Tree를 기반으로 화면에 렌더링.

• 스크립트가 있다면 스크립트까지 실행.

컴퓨터 시간 원리

• 시간을 고려하는덴 많은 조건들(물리량, 위치, 천문 현상, 문화, 역사, 사회 등)을 고려해야 함.

• 세계가 협의한 협정 세계시(UTC)를 기반으로 관리함.

컴퓨터 시간 표기법

• 특정 시각(Epoch)을 기주능로 시스템 클럭(하드웨어의 시스템)의 틱을 세는 것으로 구현 → 시스템 시간

• 시스템 시간을 값으로 표현한 것을 타임 스탬프라고 부름. 운영체제마다 기준 시간과 단위 상이함.

시스템 클럭 원리

• RTC(Real Time Clock)라는 모듈 사용.

• RTC는 메인보드에 붙어있어 전원을 끄더라도 계속 작동함(컴퓨터를 꺼도 시간이 흐르는 이유).

• RTC는 카운터 회로를 통해 클럭을 발생시킴. 카운터 회로의 핵심 부품인 결정 진동자가 만드는 정확한 주파수를 이용.

Unix Time

• 유닉스 계열 운영체제에서 시간을 표시하는 방법을 Unix Time이라 부름.

• 1970년 1월 1일 0시 0분 0초가 기준 시각임. 이 이전은 음수롤 표현.

• 초 단위로 시간이 증가함.

결국 현재 시간은 어떻게 알아내는데?

• 시스템 시간을 네트워크 타임 프로토콜(NTP)를 통해 동기화함. → 인터넷이 없으면 시간을 받아올 수 없음.

• NTP 서버에 네트워크 요청을 하여 현재 시간을 받음.

• NTP 서버는 트리구조로 이루어져 있으며 그 계층을 Stratum이라 부름. 최상위 계층을 PRC(Primary Reference Clock)이라 부름.

• 시간 관련 모든 데이터 베이스를 저장한 Time Zone 데이터를 이용하여 처리함.

사용 사례

• 순수한 시간 : 생일, 기업 설립일, 기념일, 국경일 등 지역, 문화를 고려하지 않는 순수한 시간 기록

• UTC : 로깅, 감사, 시계열 데이터(주식) 등 사건이 발생한 시각만을 고려할 때 사용.

• Time zone : SNS 포스팅 시간, 결제 시각, 푸시 알림, 캘린더 등 역사, 문화적인 시간을 고려하여 사용자가 이용한 시각을 정확히 알아야할 때 사용.

암호화

• 평문을 해독할 수 없는 암호문으로 변환하는 것.

• 단방향(해싱)과 양방향 암호화가 존재함.

단방향 암호화

• 해시 알고리즘을 이용하여 평문을 복화할 수 없는 형태로 암호화함.

• 사용자 비밀번호 등을 저장할 때 자주 사용.

• 대표적으로 MD5와 SHA 알고리즘이 있음. 다만, MD5와 SHA-0, SHA-1은 해시 충돌이 발생할 수 있는 취약점이 있어 권장하지 않음.
• rainbow table(평문과 해시 함수로 만든 문자열을 모두 저장시켜놓은 표)로 해커들은 미리 평문 데이터를 해시 알고리즘을 통해 데이터 베이스에 저장해둔 것을 사용. 탈취한 데이터를 대입하여 원문을 알아낼 수 있음 → 탈취당하더라도 원문을 알아 낼 수 없도록 조치. Salt, Key stretching

양방향 암호화

• 평문을 복호화 할 수 있는 형태로 암호화하는 방법.

• 대칭키와 비대칭키 알고리즘으로 나뉨.
• 대칭키 : 같은 키를 이용하여 암호화, 복호화 가능 ex) AES(Advanced Encryption Standard)
• 비대칭키 : 암호화(공개키), 복호화(개인키) 키가 다름. 다수를 대상으로 하기 적합함. ex) RSA(소인수 분해 기반 알고리즘)

Follow Up Tasks