개발하고 싶은 초심자

220321(22) D+63(64) 컴퓨터 공학 기초, 운영체제, 가비지 컬렉션, 캐시 본문

기술개념정리(in Javascript)

220321(22) D+63(64) 컴퓨터 공학 기초, 운영체제, 가비지 컬렉션, 캐시

정새얀 2022. 3. 22. 18:21

1. 컴퓨터 공학 기초

① 문자열

‣ 유니코드(Unicode)

→ 유니코드 협회가 제정하는 전 세계의 모든 문자를

컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준.

→ 인코딩과 디코딩의 기준(문자열 세트 / 문자셋(charset))의 국제 표준.

→ 현존하는 모든 문자 인코딩 방법을 모두 유니코드로 교체하는 것이 유니코드의 목적이다.

이 표준에는 ISO 10646 문자 집합, 문자 인코딩, 문자 정보 데이터베이스,

문자를 다루기 위한 알고리즘 등을 포함하고 있다.

 

✷ 인코딩(Incoding / 부호화)

: 어떤 문자나 기호를 컴퓨터가 이용할 수 있는 신호로 만드는 것.

→ 신호를 입력하는 인코딩과 문자를 해독하는 디코딩을 위해서 미리 정해진 기준을 바탕으로 처리되어야 하는데,

    이러한 기준을 문자열 세트(문자셋(charset))이라고 한다.

 

② ASCII 문자 (American Standard Code for Information Interchange)

: 영문 알파벳을 사용하는 대표적인 문자 인코딩, 7비트로 모든 영어 알파벳을 표현할 수 있다.

→ 52개의 영문 알파벳 대소문자, 10개의 숫자, 32개의 특수 문자, 하나의 공백 문자.

 미국에서 만든거라 한글이나, 유럽어 등 다른 문자체들이 없어

각 나라마다 각자의 문자열 셋을 만들었고, 문자열 셋이 다르기때문에 컴퓨터 언어로의 의사소통이 어려웠다.

 이를 통일하기 위해 ASCII를 확장한 형태가 유니코드이다.

 

③ UTF-8(Universal Coded Character Set + Transformation Format -8-bit)

‣ UTF-16에 의해 바이트 순서(엔디언)를 따지지 않고, 순서가 정해져 있다.

→ 네트워크를 통해 전송되는 텍스트는 주로 UTF-8을 이용한다.

 

‣ 가변 길이 인코딩

→ 유니코드 한 문자를 나타내기 위해 1byte(=8 bits)~4 bytes까지의 가변 길이를 가진다.

⇒ 네트워크를 통해 전송되는 텍스트는 주로 UTF-8로 인코딩된다.

사용된 문자에 따라 더 작은 크기의 문자열을 표현할 수 있기 때문(ASCII 문자는 1 바이트만으로 표현 가능)이다.

⇒ UTF-8은 ASCII 코드의 경우 1 byte, 크게 영어 외 글자는 2byte, 3byte, 보조 글자는 4byte를 차지한다.

    이모지는 보조 글자에 해당하기 때문에 4byte가 필요하다.

 

예를 들어, 코 라는 문자의 유니코드는 U+CF54 (16진수, HEX)로 표현된다.

이 문자를 이진법(binary number)으로 표시하면, 1100-1111-0101-0100 이 된다.

이 문자를 UTF-8로 표현하면, 다음과 같이 3byte의 결과로 표현된다.

(UTF-8에서 한글은 보통 3바이트를 사용한다)

// UTF-8로 표현된 '코'
1110xxxx 10xxxxxx 10xxxxxx # x 안에 순서대로 값을 채워넣습니다.
11101100 10111101 10010100

 

let encoder = new TextEncoder(); // 기본 인코딩은 'utf-8'
encoder.encode('코') // Uint8Array(3) [236, 189, 148]

(236).toString(2) // "11101100"
(189).toString(2) // "10111101"
(148).toString(2) // "10010100"


let encoder = new TextEncoder()
encoder.encode('컴') // Uint8Array(3) [236, 187, 180]

 

ASCII 코드는 7비트로 표현되고, UTF-8에서는 다음과 같이 1 byte의 결과로 만들 수 있다.

// b 라는 문자를 UTF-8로 인코딩한 결과
0xxxxxxx
01100010

 

// UTF-8로 표현된 'b'
encoder.encode('b') // Uint8Array [98]
(98).toString(2) // "1100010"

 

 

④ UTF-16

‣ 코드 그대로 바이트로 표현 가능 / 바이트 순서가 다양함

→ BMP(다국어 기본 평면)에 속하는 문자열은 UTF-16을 이용할 때에 16비트로 표현이 가능하다.

→ 유니코드 코드 대부분(U+0000부터 U+FFFF; BMP)을 16 bits로 표현한다.

→ 기타 문자는 32 bit(4 bytes)로 표현하므로 UTF-16도 가변 길이라고 할 수 있으나,

    대부분은 2 바이트로 표현한다.

→ U+ABCD라는 16진수를 있는 그대로 이진법으로 변환하면 1010-1011-1100-1101 이다.

이 이진법으로 표현된 문자를 16 bits(2 bytes)로 그대로 사용하며,

바이트 순서(엔디언)에 따라 UTF-16의 종류도 달라진다.

 

⇒ UTF-8에서는 한글은 3 바이트, UTF-16에서는 2 바이트를 차지한다.

 

✷ 이진 파일과 텍스트 파일의 차이점

→ 텍스트 파일이 아닌 파일은 전부 이진 파일로 취급한다.

→ 대표적인 이진 파일로는 비트맵 이미지 파일이나 사운드 파일, 또는 실행 가능한 파일 등이 있다.

→ 메모장으로 파일을 열었을 때 깨져 보이는 경우는 인코딩 문제이거나 해당 파일이 이진 파일이기 때문이다.

→ 텍스트 파일은 운영체제별로 개행 문자 처리가 다르다.

 

 

그래픽

  비트맵(래스터) 벡터
정의 각 픽셀에 저장된 비트 정보가 집합된 것 그래픽의 형태들이
수학적 공식으로 이루어져 있음.
점, 선, 면의 기본적 벡터 그래픽 요소들이 모여 벡터 그래픽을 만듦.
기반 기술 픽셀 기반 수학적으로 계산된 Shape 기반
특징 사진과 같이 색상의 조합이 다양한 이미지에 적합 로고, 일러스트와 같이
제품에 적용되는 이미지에 적합
확대 확대에 적합하지 않음.
보다 큰 사이즈의 이미지가 필요할 때
사용하려는 크기 이상으로 생성하거나 스캔해야 함
품질 저하 없이 모든 크기로 확대 가능하며,
해상도의 영향을 받지 않음
크기(dimension)에 따른
파일 용량(file size)
큰 크기의 이미지는 큰 파일 사이즈를 가짐 큰 크기의 벡터 그래픽은
작은 파일 사이즈를 유지할 수 있음
상호 변환 이미지의 복잡도에 따라
벡터로 변환하는 것에 오랜 시간이 걸림
쉽게 래스터 이미지로 변환 가능
대표적인 파일 포맷 jpg, gif, png, bmp, psd svg, ai
웹에서의 사용성 jpg, gif, png 등이 널리 쓰임 svg 포맷은 현대의 브라우저에서 대부분 지원

⇒ 현대의 웹 브라우저는 svg 포맷을 표현할 수 있고,

해상도에 의존적인 비트맵 이미지는 <canvas> 태그를 이용해 표현한다.

 

벡터를 비트맵으로 변환하는 것은 그 반대에 비해 컴퓨터 자원을 덜 사용한다.

 

 

ex) 비트뱁(래스터)와 벡터의 예시

 

 

 

2. 운영체제

: 하드웨어에게 일을 시키는 주체.

사용자가 컴퓨터를 사용하기 위해 필요한 소프트웨어.

→ 하드웨어를 구성하는 일을 하는 CPU, 자료를 저장하는 RAM, 디스크 등의 시스템 자원을 관리하는 주체

일반적으로 컴퓨터를 사용하면서 실행한 모든 프로그램들은 운영체제에서 관리하고 제어한다.

 

✷ Program Files(x86)

: 32비트 운영체제 내에서 실행되도록 제작된 프로그램

 

① 운영체제가 하는 일

‣ 시스템 자원 관리

: 운영체제가 없다면, 응용 프로그램이 실행될 수 없다.

응용 프로그램은 컴퓨터를 이용해 다양한 작업을 하는 것이 목적이고,

운영체제는 응용 프로그램이 하드웨어에게 일을 시킬 수 있도록 도와준다.

 

운영체제의 구조 모식도

프로세스 관리(CPU)

메모리 관리

I/O(입출력) 관리 (디스크, 네트워크 등)

 

node.js의 Event loop는 싱글 스레드로 작동되지만, Worker pool은 멀티 스레드로 작동된다.

즉, node.js의 초기화와 callback은 Event loop라는 하나의 프로세스, 하나의 스레드에서 작동되지만

I/O intensive, CPU intensive한 모듈은 Worker pool에서 작동한다.

⇒ node.js는 싱글 스레드로만 작동하지 않는다.

 

 

‣ 응용 프로그램 관리

→ 응용 프로그램: 운영체제를 통해 컴퓨터에게 일을 시키는 것.

 

→ 응용 프로그램은 권한에 대한 관리와 더불어

여러 사람이 하나의 기기를 사용하는 경우 사용자를 관리하는 일도 매우 중요하다.

⇒ 응용 프로그램이 실행되고, 시스템 자원을 사용할 수 있도록 권한사용자를 관리한다.

 

→ 응용 프로그램이 운영체제를 통해 컴퓨터에게 일을 시키려면

컴퓨터를 조작할 수 있는 권한을 운영체제로부터 부여받아야 하고,

권한을 부여받고 난 후에 운영체제가 제공하는 기능을 이용할 수 있다.

 

→ 응용 프로그램이 운영체제와 소통하기 위해 운영체제가 응용 프로그램을 위해 인터페이스(API)를 제공해야 한다.

워드프로세서 프로그램이 프린터를 사용해서 인쇄하기 위해서는

워드프로세서 프로그램은 운영체제로부터 프린터 사용에 대한 권한을 부여받아야 한다.

응용 프로그램이 프린터 사용에 대한 권한을 획득한 후 프린터를 사용할 때 필요한 API를 호출해야 하고,

이 API는 시스템 콜로 이루어져 있다.

 

⇒ 시스템 콜(system call)

: 응용 프로그램이 시스템 자원을 사용할 수 있도록, 운영체제 차원에서 다양한 함수를 제공하는 것

 

 

② 프로세스(process)

: 실행 중인 하나의 애플리케이션.

→ 사용자가 애플리케이션을 실행하면

운영체제로부터 실행에 필요한 메모리를 할당받아 애플리케이션의 코드를 실행하는데,

이때 실행되는 애플리케이션을 프로세스라고 부른다.

→ 하나의 애플리케이션은 다중 프로세스를 만들기도 한다.

 

프로그램: 우리가 작성하는 코드

프로세스: 명령어를 작성하고 실행하는 행위 자체

라고 생각하면 쉽다.

 

// 서버를 켰을 때
// 하나의 코드에서 두 개의 서버를 실행시켰기 때문에
// 프로세스 두 개를 실행했다고 말할 수 있다.
listen('B: 3000', () => {})
listen('A: 3001', () => {})

 

macOS의 활성 상태창(윈도우의 작업관리자와 같은 것)

위의 사진에서 확인할 수 있는 항목 하나하나가 전부 프로세스이다.

 

 

③ 스레드(thread)

프로세스와 스레드 구성

: 한 가지 작업을 실행하기 위해 실행한 코드. 프로세스 내에서 실행되는 하나의 흐름.

→ 한 프로세스 내에 스레드가 두 개라면 코드가 실행되는 흐름이 두 개 생긴다는 뜻이다.

→ 각 스레드마다 콜 스택(call stack: 실행 중인 서브루틴을 저장하는 자료 구조) 존재

→ 다른 스레드와 독립적으로 동작

스레드는 프로세스 내에서 각각 Stack만 따로 할당받고 Code, Data, Heap 영역은 공유한다.

 

‣ 멀티 스레드(multi-thread)

: 애플리케이션 내부에서의 멀티 태스킹.

→ 대용량 데이터의 처리 시간을 줄이기 위해 데이터를 분할하여 병렬로 처리하는 데에 사용할 수 있음.

→ UI를 갖고 있는 애플리케이션에서 네트워크 통신을 하기 위해 사용할 수 있음.

→ 여러 클라이언트의 요청을 처리하는 서버를 개발할 때 사용됨.

 

listen('B: 3000', () => {})
listen('A: 3001', () => {
  // 여러 스레드를 사용했다고 말할 수 있다
  Promise.all([readFile(), readFile(), readFile(), readFile()])
})

 

✷멀티 태스킹: 두 가지 이상의 작업을 동시에 처리하는 것.

운영체제는 멀티 태스킹을 할 수 있도록 프로세스마다 CPU 및 메모리 자원을 적절히 할당하고 병렬로 실행한다.

(멀티 태스킹은 멀티 프로세스뿐만 아니라 하나의 프로세스 내에서 멀티 태스킹을 할 수 있는 것도 포함

 멀티 프로세스: 애플리케이션 단위의 멀티 태스킹)

 

 

프로세스와 멀티 스레드 예시

 

‣ 장점

→ 메모리 공간과 시스템 자원의 소모가 줄어든다.

 

→ 프로세스 간 통신 방법(IPC)에 비해 스레드 간의 통신 방법이 간단하다.

스레드 간의 통신이 필요한 경우에도 별도의 자원을 이용하는 것이 아니라,

전역 변수의 공간 또는 동적으로 할당된 공간인 Heap 영역을 이용한다.

 

→ 시스템의 처리량(throughput)이 향상되고 자원 소모가 줄어들어 프로그램의 응답 시간이 단축된다.

⇒ 여러 프로세스로 할 수 있는 작업을 하나의 프로세스에서 스레드로 나누어 수행한다.

 

✷ 메모리

→ 메모리 주소는 16진법으로 표현한다.

→ 32비트 운영체제에서는 최대 4GB만을 사용할 수 있다.

→ 하드디스크보다 읽기 / 쓰기 속도가 빠르다(실행하는 코드는 메모리에 저장하므로 읽기 / 쓰기가 빠르다).

→ 32비트 운영체제와 64비트 운영체제의 포인터의 크기는 다르다.

32bit 운영체제와 64bit 운영체제는 처리할 수 있는 데이터의 단위가 32bit, 64bit로 차이가 나기 때문에

사용할 수 있는 최대 메모리의 용량도 다르고, 메모리 주소의 값의 크기도 다르다.

 

‣ 단점

→ 멀티 프로세스 기반으로 프로그래밍할 때는 프로세스 간 공유하는 자원이 없어

동일 자원에 동시 접근하는 일은 없지만, 멀티 스레딩 기반 프로그래밍은 공유하는 자원에 대한 고민이 발생한다.

⇒ 서로 다른 스레드가 같은 데이터에 접근하고, 힙 영역을 공유하기 때문에

서로 다른 스레드가 서로 사용 중인 변수 / 자료구조에 접근하여 엉뚱한 값을 읽어오거나 수정하는 일이 발생한다.

⇒ 동기화를 통한 작업 처리 순서와 공유 자원에 대한 접근을 제어한다(동기화 작업).

 

 

④ 시분할(동시성 / 병렬성)

싱글 코어와 멀티 코어

✷ 싱글 코어에서 동시에 돌릴 수 있는 스레드 수는 한 개뿐이다.

동시에 돌릴 수 있는 스레드 수는 컴퓨터에 있는 코어 개수로 제한된다.

 

시분할

: 운영체제(가상 머신)가 각 스레드를 시간에 따라 분할하여

여러 스레드가 일정 시간마다 돌아가면서 실행되도록 하는 방식.

 

‣ 동시성(병행성 / concurrency): 여러 개의 스레드가 시분할 방식으로 동시에 수행되는 것처럼 착각을 불러일으킴.

‣ 병렬성(parallelism): 멀티 코어 환경에서 여러 개의 스레드가 실제로 동시 수행됨.

 

‣ context switching

: 다른 태스크(프로세스, 스레드)가 시작할 수 있도록 이미 실행 중인 태스크를 멈추는 것.

 

 

⑤ 가비지 컬렉션

: 프로그램에서 더 이상 사용하지 않는 메모리를 찾아서

  자동으로 정리하고 회수하는 것.

(자바, 자바스크립트, C# 등이 이 기능을 가진다)

개발자가 직접 메모리를 다룰 때에 생길 수 있는 메모리 누수를 방지할 수 있다

 

✷ 가비지 컬렉션의 대표적인 방법

‣ 트레이싱

: 한 객체에 flag를 두고, 가비지 컬렉션 사이클마다 flag에 표시 후 삭제하는 mark and sweep 방법.

→ 객체에 in-use flag 방법을 두고 사이클마다 메모리 관리자가 모든 객체를 추적하여

사용 중인지 아닌지 mark(표시)한 후 표시되지 않은 객체를 sweep(삭제)하는 단계를 통해 메모리를 해제한다.

 

‣ 레퍼런스 카운팅

: 한 객체를 참조하는 변수의 수를 추적하는 방법.

→ 객체를 참조하는 변수는 처음에는 특정 메모리에 대해 레퍼런스가 하나뿐이지만,

변수의 레퍼런스가 복사될 때마다 레퍼런스 카운트가 늘어난다.

객체를 참조하고 있던 변수의 값이 바뀌거나, 변수 스코프를 벗어나면 레퍼런스 카운트는 줄어들고,

레퍼런스 카운트가 0이 되면, 그 객체와 관련한 메모리는 비울 수 있다.

⇒ 레퍼런스 카운트가 0이 된다는 말은 아무도 그 객체에 대한 레퍼런스를 가지고 있지 않다는 말과 같다.

 

자바스크립트 엔진(v8) 특징

 

자바스크립트는 어떻게 동작하는가-1

 

자바스크립트는 어떻게 작동하는가-2

 

✷ 자바스크립트는 가비지 컬렉션을 하기 때문에 사용하지 않는 변수는 자동으로 메모리에서 제외한다.

⇒ 가비지 컬렉션이 되기 어려운 전역 변수 사용은 최소화하는 것이 좋다.

    꼭 사용해야 한다면 사용해야할 이유를 생각해보고 사용할 것.

 

⑥ 웹 서비스에서의 캐시

캐시

: 많은 시간이나 연산이 필요한 작업의 결과를 일시적으로 저장해두는 것.

→ 컴퓨팅에서 일반적으로 일시적인(temporarily) 데이터를 저장하기 위한 목적으로 존재하는

    고속의 데이터 저장 공간.

→ 첫 작업 이후에 이 데이터에 대한 요청이 있을 경우,

데이터의 기본 저장 공간에 접근할 때보다 더 빠르게 요청을 처리할 수 있다.

캐싱을 사용하면 이전에 검색하거나 계산한 데이터를 효율적으로 재사용할 수 있다.

 

‣ 캐시의 일반적인 작동원리

→ 캐시의 데이터는 일반적으로 RAM(Random Access Memory)과 같이

빠르게 액세스 할 수 있는 하드웨어에 저장되며, 소프트웨어 구성 요소와 함께 사용될 수도 있다.

 

→ 캐시는 기본 스토리지 계층(SSD, HDD)에 액세스 하여

데이터를 가져오는 더 느린 작업의 요구를 줄이고 데이터 검색 성능을 높인다.

 

⇒ 완전하고 영구적인 데이터가 있는 데이터베이스와 대조적으로

속도를 위해 용량을 절충하는 캐시는 일반적으로 데이터의 하위 집합을 일시적으로 저장한다.

(드물게 저장이 되는 경우도 있지만, 대부분의 경우 일시적으로 저장한다

=== 배터리 없으면 컴퓨터 꺼지면서 저장 안되는것과 같은 것)

 

✷ 변수는 메모리에, 유저 정보 100만개는 데이터베이스(하드디스크)에,

빨리 조회해야 하는데 중요하지는 않은 정보라면 메모리에 저장하고, 그것을 캐시라고 부른다.

 

‣ 캐시의 장점

• 애플리케이션 성능 개선

: 메모리는 디스크보다 훨씬 속도가 빠르기 때문에 인메모리 캐시에서 데이터를 읽는 속도가 매우 빨라

훨씬 더 빠른 데이터 액세스는 애플리케이션의 전반적인 성능을 개선한다.

⇒ 메모리를 활용한 캐싱으로 데이터베이스의 부하를 줄일 수 있다.

 

• 데이터베이스 비용 절감

: 단일 캐시 인스턴스는 수십만 IOPS를 제공할 수 있으며,

수많은 데이터베이스 인스턴스를 대체할 수 있으므로 총비용이 절감된다.

 

• 백엔드 부하 감소

: 캐싱은 reading load의 상당 부분을 백엔드 데이터베이스에서 인메모리 계층으로 리디렉션함으로써

데이터베이스의 로드를 줄이고 로드 시 성능 저하 / 작업 급증 시 작동이 중단되지 않도록 보호할 수 있다.

⇒ 메모리를 활용한 캐싱으로 데이터베이스의 부하를 줄일 수 있다.

 

• 예측 가능한 성능

: 높은 처리량의 인메모리 캐시를 활용함으로써

데이터베이스에 대한 로드가 증가할수록 데이터를 가져오는 지연 시간이 길어지고

전반적인 애플리케이션 성능 예측 불가능의 문제를 완화할 수 있다.

 

• 데이터베이스 핫스팟 제거

: 가장 자주 사용되는 데이터의 처리량 요구 사항에 맞추어 데이터베이스 리소스를 초과 프로비저닝해야 할 수 있다.

인메모리 캐시에 공통 키를 저장하면 가장 자주 액세스하는 데이터에 대해 예측 가능한 빠른 성능을 제공하는 동시에

초과 프로비저닝의 필요성을 줄일 수 있다.

 

✷ 프로비저닝(provisioning)

: 사용자의 요구에 맞게 시스템 자원을 할당, 배치, 배포해 두었다가

필요시 시스템을 즉시 사용할 수 있는 상태로 미리 준비해 두는 것

 

• 읽기 처리량(IOPS) 증가

(읽기 처리량 / Input,Output operations Per Second

: HDD, SSD 등의 컴퓨터 저장 장치의 성능 측정 단위)

→ 인메모리 시스템은 지연 시간을 줄일 뿐만 아니라

유사한 디스크 기반 데이터베이스에 비해 훨씬 높은 요청 속도(IOPS)를 제공한다.

분산형 사이드 캐시로 사용되는 단일 인스턴스는 초당 수십만 건의 요청을 처리할 수 있다.

 

‣ 웹사이트에서 캐시가 적용되는 예제

• 클라이언트: HTTP 캐시 헤더, 브라우저

 네트워크: DNS 서버, HTTP 캐시 헤더, CDN, 리버스 프록시

 서버 및 데이터베이스: 키-값 데이터 스토어(e.g. Redis), 로컬 캐시(인-메모리, 디스크)

 

✷ CDN(Content Delivery Network)

: 네트워크 단계에서 콘텐츠를 보다 빠르게 제공하기 위한 서비스

→ 전 세계 곳곳에 분산되어 있는 데이터 센터에 콘텐츠가 저장(캐싱)되어 있으며,

    지리적으로 가까운 데이터 센터로 접근할 수 있도록 만들어준다.

 

function logA() { console.log('A') }
function logB() { console.log('B') }
function logC() { console.log('C') }

logA();
setTimeout(logB, 0);
logC();

// A
// C
// B

logA, setTimeout, logC 작업이 call stack에 차례로 push 된다.
setTimeout 호출 시 logB 작업은 task queue에 enqueue된다.
logC의 실행이 완료되고 call stack에 아무 작업도 남지 않으면, 
event queue의 head에 있는 logB 이벤트가 call stack에 push 된다.

 

 

Comments