개발/React(3)
-
# [react]테일윈드 css 리액트 프로젝트 만들기
3.2 테일윈드 css 리액트 프로젝트 만들기1. tailwind CSS 사용(1) postCSS, autoprefixer, 테일 윈드 설치✅ 2025.2월 18일 더이상 tailwind v4 는 init 명령이 존재하지 않는다. 이전 버전을 설치해야.bin 에 tailwind 가 생긴다.참고 npx tailwindcss init -p를 실행할 수 없습니다 - "실행할 실행 파일을 결정할 수 없습니다 npm install -D tailwindcss@3 postcss autoprefixernpm install -D postcss autoprefixer# npm install -D tailwindcss @tailwindcss/vitenpm 할때마다 package.json 에 잘설치됬는지 확인 필요 postc..
2025.02.19 -
# [React] 1. Vite +react + typescript + tailwind Setting
🚶♂️ Vite + react + Tailwindcss 4 Setting2025.1.22 일 이후 tailwind 4.0 이 발표되면서 설치와 실행이 매우 간단해졌다. (1) vite 프로젝트 생성, tailwind 설치## basic setting check node -v # 22.14.0npm -v # 10.9.2## npm create vite@latest my-tailwind-app --templatecd my-tailwind-appnpm install tailwindcss @tailwindcss/vite아직 npm run dev 를 하면 안된다..(2) vite.config.js 에 플러그인 추가vite.config.jsimport { defineConfig } from 'vite'impor..
2025.02.19 -
#[React] 컴포넌트 CSS 스타일링
chapter 03 컴포넌트 css 스타일링CSS 를 사용한 리액트 컴포넌트 스타일링 방법컴포넌트 스타일링리액트 컴포넌트는 어떤 시점에서 html 요소로 바뀌므로 컴포넌트의 스타일링 또한 CSS를 사용해야함.index.html 파일에 html 코드를 작성하고 script 태그안에 자바스크립트 코드를 작성하는 일반적인 웹 프런트 엔드 개발과 다르지 않음.부트스트랩 사용css 는 부트스트랩과 같은 css 프레임워크를 사용할 때가 많음.http://getbootstrap.comcss 경로js 경로npm installnpm install bootstrap@5.3.3public/index.html 부트스트랩 컴포넌트 구현부트 스트랩 구문 > Forms > Overview > html 코드 복사 > Boots..
2025.02.10