들어가기에 앞서 필자는 노드 버전 v20.10.0을 사용하였으며
Next.js는 v14.0.4를 사용함

Next.js 설치

먼저 StyleX를 적용하기 위해 Next.js를 먼저 설치해준다.

npx create-next-app@latest .

그 다음부터는 공식문서를 보고 따라했다.
StyleX 설치 공식문서

StyleX 패키지 설치

npm install --save @stylexjs/stylex

위 명령어를 실행하여 StyleX에 대한 패키지를 설치해준다.
그리고 Babel을 별도로 설정해주어야 한다.

여기서 바벨이란?
=> 바벨은 크로스 브라우징 이슈를 최소화하기 위해 ES6+ 버전의 자바스크립트나 타입스크립트, JSX 문법 등을 모든 브라우저에서 호환 가능하도록 변환시켜주는 역할을 한다.
따라서, 크로스 브라우징 이슈와 밀접한 관계가 있는 프론트엔드 개발자에게 바벨 설정의 능력이 요구되고는 한다.

StyleX도 자신만의 표현을 브라우저가 알아들을 수 있게 번역(?)해줄 필요가 있는데 바벨 설정을 통해 해결할 수 있다.
현재 Rollup, Webpack 등 모듈 번들러에 대한 바벨 플러그인을 별도로 지원하는데,
맨 아래 보면 Next.js 전용으로 지원하는 플러그인이 존재해 이를 사용할 예정이다.

Babel Plugin 설정

공식문서에 따르면 babel.config.js 파일과 .babelrc.js 파일 두 가지를 제공하고 있는데
둘 다 바벨 설정이 가능한 파일이라 하나만 골라 쓰면 된다.

위에서 언급했듯이 필자는 Next.js 용으로 제공되는 .babelrc.js 설정을 통해 바벨 플러그인을 설정하였다.

npm install --save-dev @stylexjs/nextjs-plugin

먼저 패키지를 설치해주고 나서
.babelrc.js 파일을 작성한다.

//.babelrc.js
module.exports = {
  presets: ['next/babel'],
  plugins: [
    [
      '@stylexjs/babel-plugin',
      {
        dev: process.env.NODE_ENV === 'development',
        runtimeInjection: false,
        genConditionalClasses: true,
        treeshakeCompensation: true,
        unstable_moduleResolution: {
          type: 'commonJS',
          rootDir: __dirname,
        },
      },
    ],
  ],
};

그 다음 next.config.js 파일을 수정한다.

//next.config.js
const stylexPlugin = require('@stylexjs/nextjs-plugin');

module.exports = stylexPlugin({
  rootDir: __dirname,
})({});

여기까지만 설정해도 StyleX는 적용된다.

StyleX 코드 작성 및 실행

폴더 구조는 아래와 같으며 page.tsx에는 스타일을 확인하기 위한 코드를 작성했다.

여기서 하나 주의할 점이 있는데, app 디렉토리 하위에 globals.css는 layout.tsx에 import 되어있어야 한다.
(globals.css가 없으면 오류는 발생하지 않지만 스타일 적용이 되지 않는다… 이거 찾느라 5시간 정도 걸린 것 같다…!)

저 코드를 작성하고 npm run dev를 실행시키면 스타일이 잘 적용된 것을 볼 수 있다.

이전 포스트에서 처음에 StyleX를 소개하길 JS Object 형태로 스타일을 정의하나
서버 코드로 동작시킬 수 있다고 언급했었는데 크롬 설정에 자바스크립트를 꺼놓고 확인을 해보았다.

마무리

StyleX 설치 및 동작에 대해 알아보았다. 중간에 막히는 부분이 있었지만 다행히 다음 Step으로 넘어갈 수 있었다.
현재까지는 겉핥기 수준이라 좋은지 아닌지는 잘 모르겠다. StyleX에서 지원하는 강력한 기능들이 있는데 직접 써보고 별도 포스팅을 할 예정이다.

-끝

(혹시 제가 작성한 내용에 오류가 있어 수정이 필요한 부분을 친절히 알려주시면 정말 감사드리겠습니다…!)