전체 글

클램프 (Clamp) 란? feat. 컴퓨터 과학, 그래픽스 용어

클램프 (clamp) 란? 컴퓨터 과학에서 사용하는 용어이다. 값의 집합이나 범위를 한정하는 연산 혹은 함수이다. 보통 최소, 최대 값을 받아 값의 범위를 한정시킨다. 보통 컴퓨터 그래픽에서 많이 사용된다. 예로 게임의 캐릭터가 화면 밖으로 나가지 않도록 만든다. 예제 코드 1 function clamp(value, min, max) { return Math.min(Math.max(value, min), max); } console.log(clamp(999999, 1, 10)); // 10 console.log(clamp(-1929, 1, 10)); // 1 예제 코드 2 const arr = new Uint8ClampedArray([256, -1, 100]); console.log(arr[0]); //..

모던 자바스크립트, ES2019 의 stable 내장 정렬 (Array.prototype.sort)

Array.prototype.sort() 의 변화 배열을 정렬할 때 많이 사용되는 메서드이다. ES2019 이후에 큰 변화가 있었다. ES2019 이전의 Array.prototype.sort() ES2019 이전의 스펙에서는 stable 한 정렬이 요구사항이 아니었다. 정렬 조건이 동일한 엘리먼트가 정렬 이전의 순서를 지키지 않아도 됐다는 뜻이다. 이러한 스펙은 몇몇 경우에 예상치 못한 결과를 초래했다. ES2019 과 그 이후의 Array.prototype.sort() 정렬 조건이 동일한 엘리먼트가 정렬 이전의 순서를 지켜야만 하는 것이 요구사항이 됐다. 이를 위해 Tim Sort 라는 정렬 알고리즘이 도입되었다. 병합 정렬과 삽입 정렬이 혼합된 것이다. 작은 배열이나 큰 배열 둘 다 성능이 좋다. 이..

모던 자바스크립트, 편의 유틸 배열 메서드

새로운 배열 함수 추가 ES2015+ 이후에 배열에서 새로운 메서드가 많이 추가되었다. Array.of() 이산 인수로 전달한 값을 배열로 만들어 반환해준다. const arr = Array.of("a", "b", "c"); console.log(arr); // ['a', 'b', 'c'] 기능은 알겠는데, 언제 유용할까? 사실 배열 리터럴([]) 이 더 간략하다. 서브 클래스로의 활용 class MyArray extends Array { print() { console.log(`[${this.join(", ")}]`); } sum() { return this.reduce((ac, cur) => ac + cur, 0); } } const myArray = MyA..

모던 자바스크립트, 편의 유틸 문자열 메서드

새로운 문자열 함수 추가 모던 자바스크립트에 들어서며 유용한 문자열 함수가 많이 생겼다. 잘 알아두면 코드의 양과 질에 큰 기여를 할만큼 좋은 것들이 많다. String.raw() console.log("안녕\n\n하세요"); /* 출력결과: 안녕 하세요 */ console.log(String.raw`안녕\n\n하세요`); /* 출력결과: 안녕\n\n하세요 */ 이스케이프 시퀀스를 그대로 출력하고 싶을 때 사용할 수 있다. 실무 예제: 파일 경로 표현하기 console.log(String.raw`C:\Users\jakeSeo\files\my_excel.xlsx`); /* 출력결과: C:\Users\jakeSeo\files\my_excel.xlsx */ 보통 윈도우즈의 경로를 표현할 때 \ 가 Escape..

모던 자바스크립트, UTF-16 이슈 해결에 관련된 문자열 함수

UTF-16 과 관련된 변화 사항 자바스크립트는 UTF-16 인코딩을 통해 문자를 표현한다. 인코딩 방식에서 생기는 여러 이슈들이 있었는데, ES2015 이후에 이를 해결하기 위해 바뀐 것들이 몇가지 있다. 코드 포인트 이스케이프 시퀀스 (Code point escape sequence) 유니코드 6.0 부터 이모지가 유니코드에 추가되었다. 이모지는 8비트의 코드 유닛 2개로 표현된다. 코드 포인트 이스케이프 시퀀스는 2개의 코드 유닛을 이용한 문자를 작성하기 위해선 번거로웠던 부분을 해결한다. console.log("\uD83D\uDE0A"); // 😊 console.log("\u{1F60A}"); // 😊 String.fromCodePoint() 코드 포인트를 숫자로 전달받아 해당하는 유니코드 문자열..

자바스크립트 replace 메서드 정규식 특수 대체 패턴

정규표현식 특수 대체 패턴 (Special Replacement Patterns) 이란? String.prototype.replace() 에서 사용 가능한 특수한 대체 패턴이다. 패턴 살펴보기 $&: 매칭된 문자를 삽입하고 싶을 때 사용하는 패턴이다. $`: 매칭된 문자의 앞 부분을 삽입하고 싶을 때 사용하는 패턴이다. $': 매칭된 문자의 뒷 부분을 삽입하고 싶을 때 사용하는 패턴이다. $n: n 번째 캡쳐링 그룹을 삽입하고 싶을 때 사용하는 패턴이다. $$: $ 자체를 삽입하고 싶을 때 사용하는 패턴이다. 활용 예제 살펴보기 아래에 나오는 [ㄱ-힣] 은 한글 유니코드를 전부 매치시킬 수 있는 정규표현식이다. $& "hello. 안녕 world. 세상".replace(/[ㄱ-힣]+/g, "($&..

UTF (Unicode Transformation Format) 인코딩이란?

UTF 란? 약자를 해석하자면, Unicode Transformation Format 즉, 유니코드 변환 포맷을 말한다. 쉽게 설명하자면, 유니코드를 변환할 때 그 기준이 되는 표를 말하는 것이다. ex) U+0041 는 대문자 A 로 치환되고, U+0042 는 대문자 B 로 치환될 수 있도록 표를 제공하는 것이다. 유니코드가 생겨난 이유 요약하자면, 컴퓨터는 모든 것을 비트로 받아들이기 때문에 생겼다. 숫자에 의미부여를 해서 문자로 만들 수 밖에 없었다. 초기엔 알파벳 대소문자와 숫자정도만 만들어놨다. 이것이 바로 ascii (아스키 코드) 영문 말고 다른 문자를 쓰는 국가들이 등장했다. euc-xx 라는 인코딩이 등장했다. euc-xx 는 해당 국가 언어에서는 잘 동작하나, 제3외국어가 끼면 이상해졌..

이스케이프 시퀀스 (Escape Sequence) 란?

이스케이프 시퀀스 (Escape Sequence) 란? 과거에 프린트 할 수 없는 특수한 문자를 표현하려고 사용하기 시작됐다. 초기 ASCII 코드에는 글자나 숫자같은 프린트 가능한 문자만 다뤘다. 종이에 쓸 수는 없어도 분명 개념상 있는 문자를 다룬다. 이를테면 개행 (new line), 탭 (tab), 캐리지 리턴 등이 있다. 프로그래밍에서 문자열을 취급할 때 역 슬래시(\)를 이스케이프 캐릭터로 사용한다. 이스케이프 캐릭터는 이스케이프 시퀀스의 시작을 알리는 용도이다. 자바스크립트 예제 \n: 개행 \t: 탭 \b: 백스페이스 \r: 캐리지 리턴 \': 작은 따옴표 \": 큰 따옴표 console.log(String.raw`원본: a\nb`); console.log("a\nb"); conso..

모던 자바스크립트, 템플릿 리터럴과 템플릿 태그 함수

템플릿 리터럴 정규표현식 리터럴(//g), 문자열 리터럴(""), 배열 리터럴([]) 처럼 리터럴의 한 종류이다. 백틱( ` )으로 구분되는 리터럴이며, 악센트(accent)라고도 한다. 리터럴 중간에 Place Holder (${}) 를 이용하여 표현식을 리터럴에 삽입할 수 있다. 문자열을 이용할 때 "myName = " + name 과 같은 행위를 편하게 만들어준다. 이스케이프 시퀀스는 일반 문자열과 동일하게 동작한다. \n 가 중간에 온다면, 동일하게 개행으로 취급되는 것을 볼 수 있다. 리터럴이란, 더이상 쪼갤 수 없는 값의 표현이다. 심볼(Symbol()) 도 리터럴이다. 기본 사용법 const name = "jake"; console.log(`my name is ${name}`); const ..

자바스크립트가 문자열을 표현하는 방식 (feat.UTF-16)

자바스크립트의 문자열 표현 방식 UTF-16 자바스크립트 문자열은 유효하지 않은 대리쌍을 허용하는 일련의 UTF-16 코드 유닛이다. 위의 글을 읽었는데 어떤 의미인지 이해했다면, 더이상 아래의 글을 읽을 필요가 없다. UTF-16 이란? 자바스크립트 문자열의 표현 방식이다. 흔히 볼 수 있는 문자열 인코딩 방식이다. UTF-8 이 더 많이 쓰이긴 한다. 우리가 사용하는 문자를 비트 (bits) 로 나타낸 것이다. 16비트 코드 유닛 1개 혹은 2개로 문자를 표현한다. 1개로 표현되는 경우를 Basic Multilingual Plane 내부에 있다고 한다. 2개로 표현되는 경우를 Basic Multilingual Plane 외부에 있다고 한다. Basic Multilingual Plane (BMP) Ba..

자바스크립트 정규표현식, named capturing group 이란?

Named Capturing Group 이란? 정규표현식의 한 기능으로 패턴에 매칭된 그룹에 특정한 이름을 주는 것이다. (?pattern) 와 같은 문법으로 사용 가능하다. 예제 코드 (자바스크립트) 코드 /(?\d{4})-(?\d{2})-(?\d{2})/.exec("2002-07-28"); 콘솔 결과 (4) ['2002-07-28', '2002', '07', '28', index: 0, input: '2002-07-28', groups: {…}] 0: "2002-07-28" 1: "2002" 2: "07" 3: "28" groups: day: "28" month: "07" year: "2002" index: 0 input: "20..

자바스크립트 정규 표현식, exec() 메서드란?

RegExp.prototype.exec() 메서드란? 인자로 받은 문자열 (str) 에서 match 를 찾아내고 result array 혹은 null 을 반환한다. 자바스크립트 정규표현식을 다룰 때 쓴다. 코드 예제 검색 성공 사례 const regex1 = RegExp("foo*", "g"); const str1 = "table football, foosball"; let array1; while ((array1 = regex1.exec(str1)) !== null) { console.log("array1", array1); console.log(`Found ${array1[0]}. Next starts at ${regex1.lastIndex}.`); } /* array1 ['foo', ..