사랑하기 위해 필요한 것들

1. Vite 프로젝트 초기화
   npm create vite@latest my_project
   cd my_project

2. tailwindcss 설치
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

3. tialwindcss 설정 파일 변경
   => tailwind.config.js
   module.exports = {
   content: ["./index.html", "./src/*/.{js,ts,jsx,tsx}"],
   theme: {

    extend: {},

   },
   plugins: [],
   }

4. src/index.css tailwind 지시어 추가
   @tailwindcss base;
   @tailwindcss components;
   @tailwindcss utilites;

react 프로젝트 생성 실행 순서

1. npm create-react-app projectName --template typescript

2. chance luxon @fontsource/material-icons 설치
   npm i chance luxon

3. 개발 의존성
   npm i -D @types/chance @types/luxon

4. tailwindcss 설치
   postcss, autoprefixer도 함꼐 설치 해 준다.
   npm i -D postcss autoprefixer tailwindcss@3

5. tailwindcss 구성
   npx tailwindcss init -p

6. daisyui 설치
   tailwindcss는 저수준 CSS 컴포넌트를 지원하지 않으므로, daisyui를 설치
   npm i -D daisyui@3

7. @tailwindcss/line-clamp 설치
   npm i -D @tailwindcss/line-clamp

8. tailwind.config.js 설정

   1) content 설정
   content:["./src/*/.{js.jsx,ts,tsx}"]

   2) safelist, plugins 설정
   /*
   line-clamp로 시작하는 클래스 이름을 동적으로 조합하더라도
   정상으로 동작하도록 트리 쉐이킹 대상에서 제거하는 코드
   */
   safelist : [{pattern:/^line-clamp-(\d+)$/}]
   3) line-clamp, daisyui 플러그인 등록
   plugins : [require('@tailwindcss/line-clamp'), require('daisyui')]

   /* @type {import('tailwindcss').Config} _/
   module.exports = {
   content: ["./src/*/_.{js.jsx,ts,tsx}"],
   theme: {
   extend: {},
   },
   safelist:[{pattern:/^line-clamp-(\d+)$/}]
   plugins: [require('@tailwindcss/line-clamp'), require('daisyui')],
   }

9. index.css에 tailwindcss 기능 반영
   index.css 상단에 base, components, utilities 추가
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

10. 타입 스크립트 코드 작성

1. 터미널 열기: 프로젝트 디렉토리에서 터미널을 열거나 VS Code와 같은 IDE에서 터미널을 사용합니다.
2. npm list 명령어 실행: 터미널에 npm list를 입력하고 엔터 키를 누릅니다.
3. 결과 확인: 명령어 실행 결과로 설치된 모듈 목록이 표시됩니다. 만약 특정 모듈이 목록에 없다면, 해당 모듈은 설치되지 않은 것입니다.

참고사항

• npm list --depth=0: 최상위 레벨의 모듈만 표시합니다.
• npm list --depth=1: 한 단계 아래의 모듈까지 표시합니다.
• npm list --depth=2: 두 단계 아래의 모듈까지 표시합니다.

1. 리액트 프로젝트 생성
   npx create-react-app [생성할 리액트명]

2. VSCode 설치
   https://code.visualstudio.com/Download

3. 프로젝트 내에서 vscode 실행
   d:\work\frontend\testapp>code .

4. VSCode 터미널에서 리액트 프로젝트 실행
   npm start

5. tailwind CSS 설치
   npm install -D tailwindcss@3.4.17 postcss autoprefixer

npx tailwindcss init -P