최신 React 환경: SSR과 CSR에 TailwindCSS, Jest, esbuild를 활용한 완벽 설정법

2024-12-30 03:18:13

webdevreactesbuildtutorial

React 19를 활용한 완벽한 프로젝트 설정법

최신 React 19 환경을 구축하면서, Server-Side Rendering(SSR)과 Client-Side Rendering(CSR)의 장점을 모두 활용해 보십시오. 이 글에서는 특히 TailwindCSS와 Jest를 통합하여 스타일링과 유닛 테스트까지 철저히 다루고자 합니다. 기본적인 esbuild 환경을 갖춘 후, 이 강력한 조합을 통해 빠르고 효율적으로 개발할 수 있는 환경을 만듭니다.

React 프로젝트 설정 개요

React 프레임워크의 최신 기능을 최대한 활용하는 방법에 대해 토론합니다. 신규 변화를 적극 반영하며, React 19와 react-router-dom 7, esbuild를 사용해 보다 간결하고 강력한 개발 환경을 구축해 보겠습니다.

React: 동적 UI 관리를 위한 모던 프레임워크입니다.
React DOM: SSR 콘텐츠를 Hydration하여 클라이언트 환경에 맞춥니다.
React Router DOM: 라우팅 관리를 통해 SPA 네비게이션을 돕습니다.
Express: 서버 설정과 간단한 REST API, 정적 파일 서비스에 사용합니다.

TailwindCSS로 스타일링 자동화하기

TailwindCSS를 통해 빠르고 유연한 스타일링을 적용할 수 있습니다. PostCSS와 함께 esbuild 플러그인을 작성하여 프로젝트의 CSS 파일을 처리하는 방법을 알아봅니다. 기본적으로 다음과 같은 패키지를 설치해야 합니다:

npm i --save-dev postcss tailwindcss autoprefixer

esbuild 플러그인 작성 및 설정

아래 코드를 통해 TailwindCSS 기능을 esbuild에 통합합니다. 이는 포스트CSS를 활용한 플러그인입니다.

import { readFile } from 'node:fs/promises';
import postcss from 'postcss';

export const postcssPlugin = ({ plugins = [] } = {}) => {
  return {
    name: 'postcss',
    setup(build) {
      build.onLoad({ filter: /\.css$/ }, async (args) => {
        const raw = await readFile(args.path, 'utf8');
        const source = await postcss(plugins).process(raw.toString(), {
          from: args.path,
        });
        return {
          contents: source.css,
          loader: 'css',
        };
      });
    }
  };
};

export default postcssPlugin;

TailwindCSS 초기 설정 구성

tailwind.config.ts 파일에 다음과 같이 설정을 추가합니다:

import type { Config } from 'tailwindcss';

const config: Config = {
  content: ['./src/**/*.{ts,tsx,svg}'],
  theme: {
    extend: {
      colors: {
        background: 'var(--background)',
        foreground: 'var(--foreground)',
      }
    }
  }
};

export default config;

Jest를 이용한 효율적인 유닛 테스트

Jest는 React 컴포넌트의 유닛 테스트에서 필수적인 도구입니다. 이 유틸리티를 @testing-library와 함께 사용하여 효율적으로 사용할 수 있습니다. 이를 위해 다음과 같은 패키지들을 설치합니다:

npm i --save-dev jest jest-environment-jsdom @testing-library/jest-dom @testing-library/react @types/jest

Jest 구성 설정

Jest와 esbuild를 통합하기 위해, TypeScript 및 JSX를 transpile할 트랜스포머를 작성해야 합니다.

import { transformSync } from 'esbuild';
export default {
  process(src, filename) {
    if (/\.(ts|tsx|js|jsx)$/.test(filename)) {
      const result = transformSync(src, {
        loader: filename.endsWith('ts') || filename.endsWith('tsx') ? 'tsx' : 'jsx',
        format: 'esm',
        sourcemap: 'inline',
        target: 'esnext',
        tsconfigRaw: {
          compilerOptions: {
            jsx: 'react-jsx',
          },
        }
      });
      return { code: result.code, map: result.map };
    }
    return src;
  },
};

환경 설정 파일

한층 더 발전하기 위해 @testing-library의 jest-dom을 import 합니다.

import '@testing-library/jest-dom';

전체 Jest 설정

jest.config.json 파일을 설정하여 커스텀 esbuild 변환기 및 설정 파일을 사용할 수 있게 합니다.

{
  "testMatch": ["<rootDir>/**/?(*.)+(test).(ts|tsx)"],
  "transform": {
    "^.+\\.(ts|tsx)$": "<rootDir>/scripts/testTransformer.js"
  },
  "setupFilesAfterEnv": ["<rootDir>/scripts/testSetup.ts"],
  "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
  "extensionsToTreatAsEsm": [".ts", ".tsx", ".svg"],
  "transformIgnorePatterns": ["/node_modules/"],
  "testEnvironment": "jsdom"
}

참고할 만한 자료들

이상으로 React 19 기반의 최신 개발 환경을 구축하는 방법을 다뤄보았습니다. Web 개발의 효율성과 생산성을 높이려면, 본 문서에서 소개한 방법들을 적극적으로 활용해보세요.

R_11