![]()
안녕하세요! 오늘은 리액트에서 사용되는 CSS-in-JS 라이브러리인 styled-components에 대해 소개하려고 합니다. styled-components는 리액트 컴포넌트를 스타일링하는 데에 사용되며, 매우 인기 있는 라이브러리입니다. styled-components를 사용하면 CSS 파일을 작성하거나 클래스 네임을 사용하지 않고도 리액트 컴포넌트에 스타일을 적용할 수 있습니다. 이 라이브러리는 템플릿 리터럴 문법을 사용하여 컴포넌트 스타일을 작성하므로, 일반적인 CSS와 매우 유사한 문법을 가지고 있습니다. styled-components를 사용하면 다음과 같은 이점을 얻을 수 있습니다: 유지보수 용이성: CSS와 관련된 모든 코드를 컴포넌트 내부에 작성하기 때문에, 코드베이스의 일관성과 유..
![]()
React, Vue, Angular, Svelte 4대장을 계속 쓰다 보면 기본적인 css 속성만 알고,css에 대해 무감각해져가고 성능 최적화, 코드 개선에 대해서 공부하다 보면 css에 대해 무감각해져가고 css 속성에 대해 이해도가 떨어지고 구글링, chatgpt 에 의존하게 됩니다.(저 또한 그랬구요...)그래서 기초부터 하나하나 적으면서 정리를 하려고 합니다. Flexdisplay: flex;위와 같은 속성을 가장 많이 사용하실겁니다. 1차원적인 레이아웃을 작성할 때 사용된다고들 하죠. 가로, 세로 정렬justify-content: center; ->컨테이너에서 가로축을 기준으로 가운데 정렬합니다.justify-content: flex-start (default); -> 요소들을 컨테이너의 왼쪽..
![]()
디자인 시스템이란?애플리케이션을 구성하는 UI 요소와 규칙들을 재사용 가능한 형태로 컴포넌트화 하거나 패턴화 한 표준의 모음.디자이너와 개발자 모두 UI 컴포넌트를 다루기 때문에, 디자인 시스템은 두 분야를 연결하는 다리이기도 합니다. 또한 조직의 공용 컴포넌트에 대한 "단일한 진실의 원천(source of truth)"이다.예시 Accessibility at GitHub | PrimerGet started with accessibility at GitHub.primer.style 디자인 시스템이 없을 때 "이 페이지는 레이아웃 디자인이 조금 달라요""파란색 텍스트들을 조금 덜 파란색으로 모두 바꿔주세요""이 버튼에 마우스를 올리면 색이 진해지나요?"디자인 시스템이 있을 때"이 페이지도 표준에 맞추어 ..
