Dev

브라우저 렌더링 과정 및 사이드 이펙트 살펴보기

렌더링이란? HTML, CSS, JS 문서가 브라우저에 출력되는 과정을 말합니다. 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있는데, 크롬은 블링크(Blink), 사파리는 웹킷(Webkit), 파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용합니다. 렌더링 순서는 다음과 같습니다. HTML 파일과 CSS 파일을 파싱해서 각각 Dom Tree와 CSSOM Tree를 만든다. (Parsing) 두 Tree를 결합하여 Render Tree를 만든다. (Style) Render Tree에서 각 노드의 위치와 크기를 계산한다. (Layout) 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만든다. (Paint) 레이어를 합성하여 실제 화면에 나타낸다. (Composite) Par..

모던 웹 브라우저 - 크롬 브라우저 뜯어보기

구글 디벨로퍼 사이트의 글을 참고하여 작성된 글입니다 :) 브라우저가 동작하는 환경을 이해하기 위해서는 CPU, GPU, 메모리, 프로세스에 대한 이해가 있어야 합니다. 컴퓨터나 스마트폰에서 어플리케이션을 시작하면 운영체제의 메커니즘에 따라 CPU와 GPU가 앱을 실행합니다. 앱을 실행하면 프로세스가 생성되고, 프로그램은 해당 작업을 위해 스레드를 생성할 수도 있습니다. OS는 프로세스에 메모리 한 조각을 줘서 앱의 모든 상태 정보를 고유 메모리 공간에 저장할 수 있게 합니다. 앱을 종료하면 프로세스도 사라지고 OS가 메모리를 해제합니다. 프로세스는 다른 프로세스를 돌려서 별도의 작업을 수행하도록 OS에 요청할 수 있습니다. 두 프로세스 간 통신이 필요하다면 IPC(Inter Process Communi..

Typescript에서 undefined 값 다루기

Typescript로 개발할 때, undefined나 null이 예상되는 값일 경우 접근하거나 대입할 때 컴파일 에러를 마주칠 수 있습니다. ~ is possibly 'undefined'. 또는 Type 'undefined' is not assigniable to type ~ . 와 같은 메세지를 종종 마주할 수 있는데요, 5가지의 방법으로 이 상황을 다룰 수 있습니다. const setValue = (value: number) => value; const handleValue = (value?: number) => { setValue(value); }; 와 같은 코드가 있다고 해봅시다. number 타입의 인자만을 받아야 하는 함수에 number|undefined 타입을 넣으려고 하니 당연히 컴파일 에..

[알고리즘] 프로그래머스 / 정렬 / H-Index - Javascript

문제 설명 H-Index는 과학자의 생산성과 영향력을 나타내는 지표입니다. 어느 과학자의 H-Index를 나타내는 값인 h를 구하려고 합니다. 위키백과에 따르면, H-Index는 다음과 같이 구합니다. 어떤 과학자가 발표한 논문 n편 중, h번 이상 인용된 논문이 h편 이상이고 나머지 논문이 h번 이하 인용되었다면 h의 최댓값이 이 과학자의 H-Index입니다. 어떤 과학자가 발표한 논문의 인용 횟수를 담은 배열 citations가 매개변수로 주어질 때, 이 과학자의 H-Index를 return 하도록 solution 함수를 작성해주세요. 제한사항 과학자가 발표한 논문의 수는 1편 이상 1,000편 이하입니다. 논문별 인용 횟수는 0회 이상 10,000회 이하입니다. 입출력 예 citations retu..

[알고리즘] 프로그래머스 / 정렬 / 가장 큰 수 - Javascript

문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요. 제한 사항 numbers의 길이는 1 이상 100,000 이하입니다. numbers의 원소는 0 이상 1,000 이하입니다. 정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다. 입출력 예 numbers return [6, 10, ..

[알고리즘] 프로그래머스 / 해시 / K번째수 - Javascript

문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한사항 array의 길이는 1 이상 100 이하입니다. a..

[알고리즘] 프로그래머스 / 해시 / 베스트앨범- Javascript

문제 설명 스트리밍 사이트에서 장르 별로 가장 많이 재생된 노래를 두 개씩 모아 베스트 앨범을 출시하려 합니다. 노래는 고유 번호로 구분하며, 노래를 수록하는 기준은 다음과 같습니다. 속한 노래가 많이 재생된 장르를 먼저 수록합니다. 장르 내에서 많이 재생된 노래를 먼저 수록합니다. 장르 내에서 재생 횟수가 같은 노래 중에서는 고유 번호가 낮은 노래를 먼저 수록합니다. 노래의 장르를 나타내는 문자열 배열 genres와 노래별 재생 횟수를 나타내는 정수 배열 plays가 주어질 때, 베스트 앨범에 들어갈 노래의 고유 번호를 순서대로 return 하도록 solution 함수를 완성하세요. 제한사항 genres[i]는 고유번호가 i인 노래의 장르입니다. plays[i]는 고유번호가 i인 노래가 재생된 횟수입니..

[알고리즘] 프로그래머스 / 해시 / 위장 - Javascript

문제 설명 스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다. 예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다. 종류 이름 얼굴 동그란 안경, 검정 선글라스 상의 파란색 티셔츠 하의 청바지 겉옷 긴 코트 스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요. 제한사항 clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다. 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다. 같은 이름을 가진 의상은 존재하지 않습니다. cloth..