h34035 No Contents

* Make Beautiful Gradients 아티클을 기반으로 작성한 글입니다. CSS 선형 그라데이션과 gray dead zone CSS linear-gradient() 함수를 이용하여 노란색(R: 255, G: 255, B: 0)부터 파란색(R: 0, G: 0, B: 255)까지의 선형 그라데이션을 나타내 보면 다음과 같다. 이때 그라데이션의 중간 부분이 칙칙한 회색으로 나타나는 것을 볼 수 있다.😨 에릭 케네디(Erik Kennedy)는 이 부분을 'gray dead zone'이라고 부르는데, css 그라데이션을 생성할 때 주의하지 않으면 중간 영역이 채도가 낮은 탁한 색으로 칠해질 수 있다. gray dead zone이 왜 나타나는지, 그리고 색 이론을 통해 칙칙하지 않은, 아름다운 그라데이션..

임의의 수열 {an}의 모든 원소의 순서를 뒤섞어 새로운 수열 {bn}을 만드는 것을 순열(Permutation)이라 한다. {an}의 Next Permutation이란 다음 순열, 즉 {an}의 모든 원소의 순서를 뒤섞어 만들 수 있는 모든 수열들을 사전순으로 나열할 때 {an}의 다음에 오는 수열을 가리킨다. 5개의 원소를 가진 집합 {1, 2, 3, 4, 5}의 원소를 한 번씩만 사용하여 구성할 수 있는 모든 수열을 사전순으로 나열한 일부를 통해 규칙을 발견해 보자. [1, 2, 3, 4, 5] ... [3, 5, 4, 1, 2] [3, 5, 4, 2, 1] [4, 1, 2, 3, 5] [4, 1, 2, 5, 3] [4, 1, 3, 2, 5] [4, 1, 3, 5, 2] [4, 1, 5, 2, 3..

프로젝트를 진행하면서 다음과 같은 고민을 하게 되었다. 위와 같은 화면에서 게임 결과에 따라 마피아의 이름을 동적으로 바꾸어 주어야 하는데, 고양이 이름의 배열과 출력해야 하는 결과는 다음과 같다. const catNames = ['고등어', '샴', '치즈', '삼색이', '네로', '오드아이']; const mafiaName = catNames[0]; console.log(`마피아는 ${mafiaName}였습니다.`}; 이때 고양이의 이름이 '샴'과 같이 받침이 있는 경우에는 '마피아는 샴였습니다.'와 같이 출력되므로 '마피아는 샴이었습니다'와 같이 출력하기 위해서는 조사를 변경해 주어야 한다. 처음에는 다음과 같이 고양이 이름에 조사를 붙여 해결할 수 있지 않을까 생각해 보았다. const catN..

ECMA Script 2015(ES6)에 추가된 Set 객체는 자료형에 관계없이 원시값과 객체 참조 모두 유일한 값을 저장하는 자료구조이다. 수학에서 다루는 집합과 동일한 개념이라고 볼 수 있다. Set 객체는 new 연산자와 함께 Set 생성자함수를 호출하여 생성할 수 있다. const set = new Set(); console.log(set); // Set(0) {} 생성자함수를 호출할 때 인수로 이터러블을 전달하면 해당 이터러블의 중복된 요소를 제거한 Set 객체가 생성된다. const set = new Set([3, 4, 4, 5]); console.log(set); // Set(3) { 3, 4, 5 } Set.prototype.add 메서드를 이용하여 Set 객체에 요소를 추가할 수 있다. ..

Date 생성자함수에 대해 알아본 지난 포스팅에 이어 이번에는 Date 생성자함수의 프로퍼티와 Date 프로토타입 객체의 메서드를 사용하며 궁금했던 점을 알아보고자 한다. 1. Date.UTC는 Date 생성자함수와 무엇이 다를까? 특정 연도, 월, 일, 시, 분, 초, 밀리초를 가지는 시각을 가지는 객체는 Date 생성자함수에 각 인수를 전달하며 만들 수 있다. 매개변수를 통해 받은 값을 각각 연, 월, 일...로 하는 객체를 생성하는데, 이 시간은 로캘 시간으로 해석되며 브라우저는 이를 로캘 시간을 나타내는 문자열로 출력해 준다. 한편 Date 객체의 프로퍼티 Date.UTC에 같은 인수를 전달하며 호출하면 다음과 같이 시간 값을 정수로 반환한다. 즉, Date 생성자함수에 연, 월, 일...을 전달..

0. 자바스크립트의 날짜와 시간 자바스크립트가 측정하고 표기하는 시간은 POSIX의 시간 표기법과 같이 1970년 1월 1일 UTC(협정 세계시) 00:00을 기준으로 시작하며 하루를 86400초로 계산하고, 그레고리력(현재의 양력)을 따른다. 한편 POSIX와 다르게 자바스크립트는 시간을 밀리초(1/1000초) 단위의 정수값으로 나타내며, 시간을 측정하는 시간을 다루는 표준 빌트인 객체인 Date()를 제공한다. Date 객체와 생성자함수에 대해 알아보자. 1. Date 생성자 함수 Date가 생성자함수로서 호출되면 새로운 Date 객체를 생성하고 초기화하며, 일반 함수로서 호출되면 현재의 UTC 시간을 문자열 형식으로 반환한다. 또한 전달되는 인수의 개수에 따라 다르게 동작한다. 1.1 일반 함수로서..

다음과 같은 동작을 하는 함수를 생각해 보자. 정수 요소가 담긴 배열에 대하여 요소의 값이 홀수일 때만 그 값의 제곱을 새로운 배열에 담아 반환하려고 한다. 즉, [2, 5, 3, -1, 9, -5, 8]과 같은 배열을 입력 받아 [25, 9, 1, 81, 25]를 반환하는 함수를 만들려고 한다. 먼저 값이 홀수인 요소만 담아 새로운 배열을 반환하는 함수는 filter로 구현할 수 있다. Array.prototype.filter() 메서드의 구문은 다음과 같다. filter((element, index, array) => { ... } ) filter에 요소값, 요소 인덱스, 순회되는 배열 객체를 매개변수로 받는 콜백함수를 전달하며 호출하면 콜백함수의 반환값이 true인 경우만 요소를 유지하고, 테스트를..

배열 요소의 순서를 정렬할 때 Array.prototype.sort() 메서드를 다음과 같이 사용할 수 있다. const array = [4, 2, 6, 3, 5, 8, 9, 10]; const sorted = array.sort(); console.log(sorted); // [10, 2, 3, 4, 5, 6, 8, 9] console.log(array); // [10, 2, 3, 4, 5, 6, 8, 9] 이때 원본 배열 array 자체의 순서가 변경된 것을 알 수 있다. 즉, sort() 메서드는 mutator method이다. 원본 배열의 순서를 변경하지 않기 위해 다음과 같이 메서드를 사용하겠다. const array = [4, 2, 6, 3, 5, 8, 9, 10]; const sorted =..