반응형 Front-End/React2 React + Vite + TypeScript 자주 쓰는 셋업 정리 (ESLint + Prettier 포함) 프로젝트를 새로 시작할 때마다 리액트 셋업을 반복하는 일이 많다 보니, 이번에 정리해두기로 했다. 항상 쓰는 조합은 React + Vite + TypeScript, 그리고 코드 스타일을 맞추기 위해 ESLint + Prettier까지 같이 설정해둔다. 처음 설정할 때 헷갈렸던 부분이나 자주 쓰는 옵션들도 같이 정리해본다.1. Vite + React + TypeScript 프로젝트 생성아래 명령어로 Vite 기반 리액트 프로젝트를 만든다.npm create vite@latest입력하면 CLI에서 아래처럼 선택하게 된다.✔ Project name: » my-app✔ Select a framework: » React✔ Select a variant: » TypeScript프로젝트 생성 후:cd my-appnp.. 2025. 8. 5. React Tailwind CSS 다크모드 구현하기 (설정 + 전환 버튼까지) 다크모드 적용 방법 (Tailwind 기반)1. tailwind.config.js 파일에 옵션 추가/** @type {import('tailwindcss').Config} */export default { darkMode: "class", // 이 줄 추가 content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: {}, }, plugins: [],};darkMode: "class"로 설정하면처럼 다크모드 적용 여부를 수동으로 제어할 수 있음2. index.html에 dark 클래스 추가 (기본 다크모드로 시작할 경우)또는 React에서 자동 적용하려면 document.documentElement.classList.a.. 2025. 7. 13. 이전 1 다음 반응형