ALL

1. UX에 관심이 있다면 읽어봐야 할 책, (사용자를) 생각하게 하지 마! (1/2)

이 책의 키워드는 ‘사용성’이다. 사용성은 기술이 아니라 사람에 대한 것이고 사람이 사물을 이해하고 사용하는 방법에 대한 것이다. 전문가 사용성 리뷰: 사용자가 하고 싶어 할 만한 것을 수행하고 막힐 법한 부분을 기록 사용성 평가: 다른 사람이 사용하는 모습을 관찰하며 어디에서 막히는지 기록 사용성이 뛰어나다 = 평범한 혹은 평균 이하의 능력과 경험을 가진 사람이 어떤 사물을 사용해서 무언인가 하려고 할 때 사용법을 스스로 알아낼 수 있다. 단 투입한 수고에 비해 얻은 가치가 더 커야 한다. 1. 사용자를 고민에 빠뜨리지 마라! 사용자가 찰나의 순간이라도 클릭 여부를 고민하는 데 쓰게 하지 마라. 모든 물음표는 인지적 부하를 더하는 주의 분산 요인이 된다. 명백하게 만들기 어렵다면 최소한 설명을 추가할 ..

2. 타입스크립트의 타입 시스템(1/2) | 이펙티브 타입스크립트 2장

6. 편집기를 사용하여 타입 시스템 탐색하기 타입스크립트를 설치하면 다음 두 가지를 실행할 수 있다. 타입스크립트 컴파일러(tsc) 단독으로 실행할 수 있는 타입스크립트 서버(tsserver) 타입스크립트 서버 또한 '언어' 서비스를 제공한다는 점에서 중요하다. 언어 서비스에는 코드 자동 완성, 명세 검사, 검색, 리팩터링이 포함된다. 편집기에서 타입스크립트 언어 서비스를 적극 활용해야 한다. 편집기를 사용하면 어떻게 타입 시스템이 동작하는지, 타입스크립트가 어떻게 타입을 추론하는지 개념을 잡을 수 있다. 타입스크립트가 동작을 어떻게 모델링하는지 알기 위해 타입 선언 파일을 찾아보는 방법을 터득해야 한다. 7. 타입이 값들의 집합이라고 생각하기 변수에는 다양한 종류의 값을 할당할 수 있고, 코드가 실행되..

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

구글 디벨로퍼 사이트의 글을 참고하여 작성된 글입니다 :) 브라우저가 동작하는 환경을 이해하기 위해서는 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 타입을 넣으려고 하니 당연히 컴파일 에..

1. 타입스크립트 알아보기 | 이펙티브 타입스크립트 1장

1. 타입스크립트와 자바스크립트의 관계 이해하기 타입스크립트는 자바스크립트의 상위집합이다. .js 파일에 있는 코드는 이미 타입스크립트라고 할 수 있다. .ts로 바꾼다고 해도 달라지는 것은 없다. 이는 기존의 자바스크립트 코드를 타입스크립트로 마이그레이션하는 데 엄청난 이점이 된다. 다시 말해, 모든 자바스크립트 프로그램은 이미 타입스크립트 프로그램이다. 반대로, 타입스크립트는 별도의 문법을 가지고 있기 때문에 일반적으로는 유효한 자바스크립트 프로그램이 아니다. 예를 들어, 다음 코드는 유효한 타입스크립트 프로그램이지만 단순 node로 실행할 경우 오류를 출력한다. function greet(who: string) {} // SyntaxError: Unexpected token : 타입스크립트 컴파일러..

[알고리즘] 프로그래머스 / 정렬 / 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..