나를 괴롭히고 있는 이슈

어제 나를 괴롭게 했던 이슈. 마음은 급한데 마음처럼 되지 않아서 스트레스를 받았다.정확히 뭐가 어려웠냐? 고 물으면 또 조리있게 말을 못하겠다. 머릿속이 혼란할 때 특징이다. 찬찬히 머릿속을 좀 정리해보자.

(독자분들이 이해할 필요는 없을 거 같다.. ㅋㅋ)

CSS는 UI에 스타일을 입힐 때 사용하는 기술이다.

CSS를 입히는 기술은 여러가지가 있다.

그 중 CSS-in-JS 라는 것이 있다. 자바스크립트 코드 안에다가 style을 작성한다. (css prop이나 styled 방식) 그러면 이 친구는 runtime에 자바스크립트 코드가 UI를 생성할 때 이 코드를 읽어서 최종적으로 적용할 style의 class name을 만든다. HTML 내부에 직접 style을 주입해 넣는다.

UI 상태에 변화에 따라서, styling을 동적으로 쉽게 바꿀 수 있는 점이 매력적이다.

그리고 UI를 뜻하는 React 컴포넌트 안에 같이 styling을 같이 인라인으로 둘수 있어서 이해하기가 쉽고 응집도가 올라간다.

반면에 다른 방법으로는 CSS 파일 자체를 빌드 타임에 만드는 방법이 있다. 클래스 이름을 직접 컴포넌트 안에 작성한다. 빌드를 하는 시점, 그러니까 서버에 코드가 업로드가 되기 전에 Tailwind 같은 솔루션이 그것을 CSS로 바꿔놓는다. 그러면 브라우저는 자신이 css를 생성하는 게 아니라, 서버에서 css 파일 자체를 받아온다. Style을 생성하기 위한 자바스크립트가 필요없다.

토스는 Emotion이라고 하는 CSS-in-JS 방식을 쓰고 있다. 말했듯이 이 녀석은 Runtime에 스타일을 생성한다.

문제는 최근에 리액트 서버 컴포넌트라고 하는 최신 기술을 도입하면서, 이 스타일링 방식이 쓰기 어려워졌다. 서버 컴포넌트는 말 그대로 서버에서 실행된다. 그리고 브라우저에서는 아무런 JS도 실행되지 않는다. 그래서 runtime 스타일링 방식을 사용할 수 없다.

그치만 도입하고 싶은 페이지에 Dynamic한 스타일링이 들어가 있는 경우가 많고, 애초에 Tailwind 같은 녀석들은 문법 자체가 다르기 때문에, 최소 수정을 하기 위해서는 emotion styling을 억지로라도 그대로 옮기고 싶었다.

하지만 애초에 Server component의 정신과 emotion의 정신 자체가 좀 충돌한다. emotion과 app router를 둘 다 쓰면서, 잘 해결하려고 해봤는데 자꾸 에러가 났다. 그 에러의 메시지는 친절하지 않아서 정확히 무엇이 문제인지 이해하기가 힘들었다. 서버에서 emotion cache를 유지해줘야 한다고?

검색해보니 meta에서 만든 styleX라는 다른 대안이 있다고 한다. 시도했는데 이것은 또 방식이 완전 달라서 직관적으로 이해가 되지 않았다. 이리저리 해보고 나서 기존에 있었던 nested selector 같은 것을 그대로 지원하지 않는다는 사실을 알게 되었다.

—

삽질을 하면서 내가 css 의 원리에 대해서 잘 모른다는 사실을 알았다. 그냥 예전에는 있는 그대로 갖다 쓰는데만 익숙해서. 근데 뭔가 바닥부터 교체하는 공사를 하다보니 나의 지식을 시험받는 기분이다. 빨리 해야하는데 계속 막혀서 머리가 아프다.