16진수 색상 코드(hex color)를 유일한 인자로 받는 JavaScript 함수를 작성해야 합니다. 이 함수는 입력으로 전달된 색상의 보색(complementary color)을 계산하여 반환해야 합니다.
보색이란?
보색은 색상환에서 서로 마주 보는 위치에 있는 색을 의미합니다. 16진수 색상 코드에서는 전체 비트를 반전시킨 값, 즉 각 자릿수의 최댓값에서 입력값을 뺀 결과가 보색이 됩니다. 예를 들어 흰색(#ffffff)의 보색은 검은색(#000000)입니다.
입출력 예시
함수의 동작을 확인할 수 있는 몇 가지 입력과 출력 예시는 다음과 같습니다.
getComplementaryColor('#142814') = '#ebd7eb';
getComplementaryColor('#ffffff') = '#000000';
getComplementaryColor('#3399ff') = '#cc6600';예제 코드
이를 구현한 코드는 다음과 같습니다.
const str1 = '#142814';
const str2 = '#ffffff';
const str3 = '#3399ff';
const getComplementaryColor = (color = '') => {
const colorPart = color.slice(1);
const ind = parseInt(colorPart, 16);
let iter = ((1 << 4 * colorPart.length) - 1 - ind).toString(16);
while (iter.length < colorPart.length) {
iter = '0' + iter;
};
return '#' + iter;
};
console.log(getComplementaryColor(str1));
console.log(getComplementaryColor(str2));
console.log(getComplementaryColor(str3));
코드 설명
코드의 동작 방식을 단계별로 살펴보겠습니다.
1. '#' 기호 제거: color.slice(1)을 사용해 문자열 맨 앞의 '#'을 제거하고 순수한 16진수 부분만 남깁니다.
2. 10진수로 변환: parseInt(colorPart, 16)을 호출하여 16진수 문자열을 10진수 정수로 변환합니다.
3. 비트 반전으로 보색 계산: (1 << 4 * colorPart.length) - 1은 입력 자릿수에 해당하는 최댓값, 즉 모든 비트가 1인 값을 만듭니다. 여기서 입력값을 빼면 각 비트가 반전되어 보색이 계산됩니다. 6자리 색상의 경우 0xFFFFFF에서 입력값을 빼는 것과 같습니다.
4. 자릿수 맞추기: toString(16)으로 다시 16진수 문자열로 변환한 뒤, 앞자리 0이 사라진 경우 while 루프를 통해 원래 자릿수만큼 '0'을 채워 넣습니다.
5. 결과 반환: 마지막으로 '#'을 다시 붙여 완성된 보색 코드를 반환합니다.
실행 결과
콘솔에 출력되는 결과는 다음과 같습니다.
#ebd7eb
#000000
#cc6600