허도경, limewhale

요즘 웹 대부분은 테마가 기본적으로 적용되어 있어서 사용자의 편의에 맞게 다크 모드, 라이트 모드로 화면을 볼 수 있는 편의성을 제공하고 있습니다. React로도 이 두가지 테마 모드를 쉽게 적용할 수 있는데 오늘 이 방법을 정리해보려고 합니다. ✏️ styled-components React에서 다양한 방법으로 테마 모드를 적용할 수 있겠지만 styled-components를 이용하여 테마 모드를 적용하는 방법을 알아보려고 합니다. styled-components 설치 > npm i styled-components > npm i @types/styled-components // typescript 사용시 styled-components가 설치되어 있지 않다면 우선 터미널을 통해 styled-compon..

컴포넌트 기반 프론트엔드 개발 방법이 발전하면서 CSS 개발 방법도 새로운 방법론과 생겨나고 있습니다. 웹이 점점 복잡해지고 CSS를 보다 전문적이고 체계적으로 관리하고 싶은 욕구는 2014년 페이스북 개발자인 개발자인 Christopher Chedeau aka Vjeux 의 발표에서 CSS-in-JS를 세상에 공개했고 이는 CSS 코드 작성의 새로운 대안으로 떠올랐습니다. 이 발표에서 Vjeux는 다음의 항목을 들어 CSS를 작성하는 어려움을 설명하였습니다. Global namespace: 모든 스타일이 global에 선언되어 별도의 class 명명 규칙을 적용해야 하는 문제(클래스 이름 중복 문제) Dependencies: css간의 의존관계를 관리하기 힘든 문제(스타일 상속에 의한 중복 문제) De..