어김없이 돌아온 디자인 시스템 3주 차 회고이다. 1,2주 차를 거치며 회의만으로는 모두 성에 안 차서 주에 2회 스크럼을 추가했다.
스크럼에서는 지난주 조사를 하며 새로 알게 되었거나 부족했던 점을 보충하고 디자인 시스템을 하면서 필요한 정보에 대해 사전 조사를 하는 시간을 가졌다. 하지만 스크럼을 진행하다 보니 이야기가 끝도 없이 길어져서 다음부터는 스크럼 2번 대신 온라인 회의를 한 번 더 진행하는 방식으로 바뀌었다 ㅋㅋㅋ
아무튼 이제 3주 차 회고를 시작해 보도록 하겠다. 3주 차에는 각자 스타일링 라이브러리에 대해 조사해 오는 시간을 가졌다. 나는 StyleX를 맡아 이에 대해 조사해 보았다.
StyleX란?
- 웹앱을 스타일링하기 위한 간단하고 사용하기 쉬운 자바스크립트 구문 및 컴파일러
- 인라인 스타일과 정적 CSS 두 개의 강점은 합치고 약점은 뺀 라이브러리
- atomic CSS를 사용하여 최적화된 스타일을 빌드함
StyleX는 CSS-in-JS 라이브러리이면서 atomic CSS를 사용한다고 나와있다. 이 부분에 대해서 팀원이 의아해했고 다음 온라인 회의 때 다같이 조사해 보기로 했다.
특징
모든 특징말고 강조하는 것 위주로 작성해 보겠다.
빠르다
런타임이 아닌 컴파일 타임에 빌드되기 때문에 최적화가 된다.
공식 문서에서 스타일링을 하고자 하는 파일 내부에 StyleX를 선언하고 사용하게 된다면 비용이 0이 든다고 한다. 하지만 prop으로 컴포넌트에 넘겨서 사용하게 된다면 약간의 비용이 발생하게 된다고 한다.
타입 안정성이 있다
Type-safe한 API를 제공함으로써 style에 올바르지 않은 값이 들어가지 못하도록 도와준다.
주요 원칙
Co-location - 스타일을 같은 파일 내에 작성
StyleX에서는 DRY 코드가 좋긴 하지만 스타일을 작성할 때는 그렇지 않다고 생각한다. 스타일을 읽을 수 있도록 작성하는 가장 좋은 방법으로는 마크업으로 같은 파일 내에 작성하는 것이라고 한다.
주의사항
동적 스타일링보다는 조건부 스타일링
모든 스타일을 컴파일 시점에 생성하기 때문에 동적으로 스타일링을 하는 것을 StlyeX에서는 신중하게 생각하고 사용하라고 한다. 동적 스타일링을 하는 대신 조건부 스타일링을 하라고 추천하기도 한다.
기본 사용 방법
React Native를 사용해 보았다면 React Native의 StyleSheet와 거의 비슷하다.
// App.tsx
import * as stylex from "@stylexjs/stylex";
import MyComponent from "./MyComponent";
const styles = stylex.create({
header: {
color: "#ffffff",
backgroundColor: "#131313",
},
});
function App() {
return (
<>
<h1 {...stylex.props(styles.header)}>Hello</h1>
<MyComponent style={styles.header} />
</>
);
}
export default App;// MyComponent.tsx
import * as stylex from "@stylexjs/stylex";
import type { StyleXStyles } from "@stylexjs/stylex";
interface StyleProps {
color: string;
backgroundColor: string;
}
interface MyComponentProps {
style: StyleXStyles<StyleProps>;
}
export default function MyComponent({ style }: MyComponentProps) {
return <h1 {...stylex.props(style)}>It's me</h1>;
}stylex.create()
스타일을 정의할 때 사용된다. 의사 클래스도 아래와 같이 사용할 수 있다.
const styles = stylex.create({
button: {
backgroundColor: {
default: "#131313",
':hover': '#ffffff',
},
},
});이 외에도 ::placeholder나 @media와 같은 것들도 사용할 수 있다.
stylex.props()
생성한 스타일을 적용할 때 사용된다. 만약 스타일을 컴포넌트에 넘겨서 사용하게 된다면 다음과 같이 사용해야 한다.
// 단일 style
<MyComponent style={styles.header} />
// 다수의 style
<MyComponent style={[styles.header, styles.button]} />실습하며 겪은 오류
Vite로 프로젝트 생성 후 pnpm dev로 서버를 시작하니 다음과 같은 에러가 발생했다.
해당 오류는 공식 문서를 조금 더 찾아보니 별도의 라이브러리를 설치 후 추가로 설정을 해주어야 했다. 라이브러리를 설치 후 vite.config.ts를 아래와 같이 수정하면 해결된다.
// vite.config.ts
import styleX from "vite-plugin-stylex";
export default defineConfig({
plugins: [react(), styleX()],
});이번 주 회고
다른 팀원들이 준비해 온 Panda CSS, Stitches, Tailwind CSS도 정말 좋았다. 발표를 들으며 아직도 내가 모르는 스타일링 라이브러리가 많다고 느꼈다.
우리는 각자 조사해온 것 중 디자인 시스템에 적용할 라이브러리로 Panda CSS를 선택했다! 이유는 2024년 03월 16일 기준으로 Next.14에서 원활하게 지원될 수 있는 CSS 라이브러리 선정이 필요했고 이에 Panda CSS가 적합하다고 생각했다. 라이브러리를 선정했으니 디자인 시스템에 적용하기 위해 Panda CSS를 공부해야겠다.
다음 주까지 할 일
참고
- StyleX 공식 문서
