CSS 2

어떻게 CSS file을 JS file 안에 불러올 수 있을까?

main.js import '../styles/global.css'; js에서 특정 엘리먼트 또는 전역적인 스타일이 필요할 때 위와 같이 js파일 안에 css파일을 직접 로드하여 사용해본 적이 있을겁니다. 최근의 프론트엔드에서는 React, Vue 등 라이브러리나 프레임워크를 주로 사용해서 프로젝트를 진행하게 되는데요. 보통은 Create React App, Vue cli 등의 CLI 도구를 통해서 보일러 플레이트를 내려받아 추가적인 구현을 하게 되기 때문에 위 처럼 css파일이 로드되는 것이 자연스럽게 느껴질 수 도 있겠습니다. 그러나 원래 되는 것은 없습니다. 보일러 플레이트 안에 포함된 Webpack, Vite, Parcel 등의 모듈 번들러가 그 역할을 대신해주고 있을 뿐입니다. css-loade..

JS, TS 2023.12.17

자바스크립트 비트연산자 시프트 활용하기 (Hex to RGB 컬러변환)

문제의 발견 프로젝트 내에서는 사용되는 컬러값을 pallete 상수에 저장해서 CSS in JS로 불러오고 있었습니다. 특정 상황에서 엘리먼트의 CSS 컬러 값이 제대로 반영되었는지 테스트하였는데요. // 테스트코드 중 일부 const styles = getComputedStyle(element) await expect(styles.backgroundColor).toBe(theme.pallete.white) 그러나 다음과 같이 테스트는 실패하게 됩니다. 브라우저에서는 컬러값을 RGB로 변한 후 화면에 렌더링하기 때문에 #FFFFFF(흰색)이 RGB(255, 255, 255)로 변환되어 테스트가 진행된 것입니다. 따라서 Hexadecimal(16진수)로 표현된 컬러 값을 RGB로 변환 후에 테스트를 진행해..

JS, TS 2023.09.08