색상표현을 중심으로 비트마스킹, 시프트연산자를 활용하면 가장 효율적으로 색상의 표현을 변경할 수 있습니다. 이를 통해 쉽게 접할 수 없었던 비트마스킹과 시프트연산자에 대해 이해해볼 수 있습니다.
들어가며
프로젝트 내에서 색상을 palette 변수에 저장해서 필요한 곳에서 사용하고 있었습니다. 주로 Hexadecimal(16진수)로 표현된 값으로 저장하였는데요, 예를 들어 palette.white = '#ffffff' 이런식입니다.
특정 상황에서 엘리먼트에 색상이 제대로 반영되었는지 확인하기 위한 테스트 코드도 존재하였습니다. 아래의 예시에서는 element의 글자색상이 #ffffff인지 검사합니다.
// 엘리먼트에 포함된 CSS 속성들을 가져옵니다.
const styles = getComputedStyle(element)
expect(styles.color).toBe(palette.white)
그러나 테스트는 실패하게 되는데요. 왜냐하면 브라우저에서는 주어진 색상을 RGB로 변환하여 화면에 렌더링하기 때문입니다. 따라서 선언한 값(palette.white)과 계산된 값(styles.color)이 다르다는 테스트 결과를 받게됩니다.