stylex란?

stylex는 Facebook에서 개발한 CSS-in-JS 라이브러리로, React 애플리케이션에서 스타일을 효율적으로 관리하기 위해 설계되었다.

stylex를 사용하게 된 이유?

별다른 이유는 없다.

프론트엔드를 맡아주실 팀원이 들어왔는데, 기존에 tailwind를 사용해서 만든 프로젝트가 유지보수면에서 좋지 못하고, 가독성이 떨어지기 때문에 객체형으로 style을 만들어서 관리하고 싶다고 하셨다.

나야 앞으로 프론트엔드를 크게 맡지 않을 생각이기 때문에 편한대로 하시고, 업무를 도와드리게 되면 내가 맞추겠다고 했다.

동료분께선 기존에 emotion이라는 css라이브러리를 사용했다고 하셨고, 나중에 내가 배우더라도 어렵지 않게 배울 수 있을 것 같았다.
https://emotion.sh/docs/introduction

사수님께 변경되는 css라이브러리에 대해 말씀드리니 최근에 stylex가 핫하다던대, 써보는건 어떻냐고 하셨다.

동료분께선 stylex의 버전이 낮아 아직 불안정할 것이라고 하셨지만, 사수님께선 이왕 하는거면 새로운 기술도 써보고 도입까지는 아니더라도 시도는 해봤으면 좋겠다고 하셨다.

나와 동료분은 알겠다고 했고, 나는 내가 그동안 작업한 내용들을 동료분께 전달해야하기 때문에 작업을 정리하고, 동료분은 stylex를 설치해보기로 했다.

작업을 어느정도 정리하고 동료분께 잘 되가시냐고 여쭤봤는데 콘솔엔 빨간 오류가 떠있었고, 브라우저는 백지였다. 동료분께선 stylex가 불안정해서 설치도 제대로 안된다며 사수님께 말씀드릴까요??라고 했지만, 같이 조금만 더 보자고 말씀드렸다. 이렇게 오래걸릴줄은 몰랐지만..!

stylex를 설치하면서 겪은 오류

1. stylex.create should never be called. It should be compiled away

stylex는 12월 29일에 버전 0.4.1이 릴리즈 되었다. yarn으로 설치한 stylex는 당연히 가장 최신버전인 0.4.1로 설치되었고, 그때부터 오류가 발생하기 시작했다.

맨 처음 발생한 오류는

stylex.create should never be called. It should be compiled away

였다. 음.. 평소같으면 지피티에게 물어보면 금방 해결됐겠지만, 12월 29일 업데이트 후 발생한 오류였다.

오류를 해결하기 위해 구글에 검색했지만, 관련된 오류에 대한 내용은 단 두개 뿐이었다.😭

옆에있는 gpt는 stylex.create를 삭제하라고한다..ㅋㅋㅋ

오류를 해결하기 위해 공식 github의 issue들을 뒤져봤지만, 별다른 해결책은 나오지 않았다.

이슈 로그를 보니 next.js에서의 오류들은 하나씩 잡혀가는 것 같은데 cra사용자는 거의 없었기에

cra프로젝트에서 발생한 오류는 잘 해결되지 않는 것 같았다. 아래의 issue에서 같은 오류로 고생하고있는 사용자가 있었지만, 0.4.1 버전을 올린 개발자님께서 해결되지 않은 채로 issue를 닫아버렸다.

https://github.com/facebook/stylex/issues/289

적어도 사용정도는 해보고싶어서 다른 레퍼런스는 없을까 한참 찾아봤다. stylex 공식홈페이지에서 설치하는 온갖 방법을 다 해봤지만 여전히 같은 오류가 발생했다.

마지막으로 github에서 stylex 0.4.1버전으로 생성한 cra 프로젝트는 없는지 찾아보기로 했다.

https://github.com/duchnv-vn/stylex-learning
다행히 하나의 레포지토리가 있었다.

해당 레포지토리에선 babel.config와 webpack.config를 모두 적용하여 프로젝트를 만들었고, 우리 프로젝트에도 사용해보기로 했다.

2. Build시 type 오류

위의 프로젝트를 참고하여 파일을 구성하니 stylex가 정상적으로 작동했다.🥳

동료분께선 build까지 잘 되는지 보자고 하셨고, yarn build를 입력하자마자 오류가 발생했다.

build오류는 대부분 babel에 필요한 패키지들을 설치하라는 내용이었다. 해당 오류들을 해결하고 나니 type오류가 발목을 잡았다.

타입 오류도 평소같았다면 gpt에게 물어보고 말았겠지만, 우리 gpt는 새로운걸 잘 모른다.

위의 stylex 타입으로 인한 오류들은 라이브러리의 문제이기 때문에 stylex를 놓아줘야하나 싶었다.

여기서 빌드가 안되면 참고한 프로젝트도 build도 되지 말아야하는데 참고한 프로젝트에선 build를 입력하자마자 깔끔하게 빌드가 완료됐다.

진행중인 프로젝트와 참고한 프로젝트의 차이점을 한참 고민하고 있으니 사수님께서 뭐가 잘 안되냐고 여쭤봐주셨고, 문제점을 말씀드렸다.

사수님과 함께 프로젝트의 다른점을 살펴보다가 종속성 패키지들을 다시 살펴보니 타입스크립트의 버전이 달랐다.

진행중인 프로젝트는 타입스크립트 버전5를 사용하고있었지만, 참고한 프로젝트는 타입스크립트 버전 4.9.5를 사용하고 있었다.

다른 종속성 패키지들은 전부 버전이 같지만, 타입스크립트만 버전이 낮은걸로 봐선 stylex가 아직 타입스크립트 버전을 완벽하게 따라가지 못하는 것 같았다.

따라서 기존 프로젝트의 타입스크립트 버전을 4.9.5로 낮추고 설치 후 yarn build를 입력하니 build가 잘 되는것을 확인할 수 있었다.

3. 앞으로 해야할 것

stylex를 사용하는데에 있어 타입스크립트 버전을 낮춰야 하는 점은 프로젝트를 진행하는데에 있어 문제가 발생할 수도 있다.

따라서 아래의 항목들에 대해 알아보고 stylex를 도입할지 말지 결정해야 한다.

1. 타입스크립트 버전4와 5의 차이점
2. stylex와 emotion 라이브러리의 차이점

이에 대해선 내일 동료분과 함께 알아보고, 더 이점이 많은 라이브러리를 선택하기로 했다.