최신 React 환경: SSR과 CSR에 TailwindCSS, Jest, esbuild를 활용한 완벽 설정법
2024-12-30 03:18:13React 19를 활용한 완벽한 프로젝트 설정법
최신 React 19 환경을 구축하면서, Server-Side Rendering(SSR)과 Client-Side Rendering(CSR)의 장점을 모두 활용해 보십시오. 이 글에서는 특히 TailwindCSS와 Jest를 통합하여 스타일링과 유닛 테스트까지 철저히 다루고자 합니다. 기본적인 esbuild 환경을 갖춘 후, 이 강력한 조합을 통해 빠르고 효율적으로 개발할 수 있는 환경을 만듭니다.
목차
- React 프로젝트 설정 개요
- 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 개발의 효율성과 생산성을 높이려면, 본 문서에서 소개한 방법들을 적극적으로 활용해보세요.