tailwind.config.ts 파일 설치가 안되는 문제

tailwindcss@3.4.17을 Next.js@14 에 적용할 때 ,Next.js 에 타입스크립 적용 환경인가 그냥 JS 환경인가에 따라 tailwind.config.js 와 postcss.config.js 파일 코드가 다릅니다. tailwindcss 공식 문서 사이트에서는 Next.js 와 react-js 환경에서 설치하는 방법(install Tailwind CSS with Next.js)이니 그걸 참고하시고요.Next.js 와 react-ts 환경에서는 다음과 같은 방법으로 설치합니다.npm install -D tailwindcss@3 postcss autoprefixernpx npx tailwindcss init -ptailwind.config.ts 파일 내용import type { Config } from "tailwindcss"; const config: Config = { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "var(--background)", foreground: "var(--foreground)", }, }, }, plugins: [], }; export default config;postcss.config.mjs/** @type {import('postcss-load-config').Config} */ const config = { plugins: { tailwindcss: {}, }, }; export default config;globals.css@tailwind base; @tailwind components; @tailwind utilities; 🌟 그런데 만일 nextjs 실행에서 문제가 아니라 vscode 에서 lint 에러라면. Tailwind intelliSense 와 PostCSS 플러그인 설치되어 있는지 확인하시고요. 아니면 settings.json 파일에 다음과 같은 옵션을 주어 css 파일을 tailwindcss 파일로 연결해야 합니다. "file.associations": { "css" : "tailwindcss" },

(ToDoList 실습) ! 연산자에 대해

삼항연산자를 보면 clickedId 가 참일 때, 기존 aTodo 객체를 그냥 리턴하고거짓일 때 기존 aTodo 객체에서 todoDone 의 값을 ! 을 이용해서 boolean 값을 반대로 설정하여 새로운 aTodo 객체를 반환하도록 하고 있습니다. !true -> false , !false -> true

tailwindcss를 vite에서 이용하는 방식이 바뀐것 같습니다.

tailwindcss v4.0 이 되면서 vite에서 사용 방식이 바뀐것으로 보입니다.이전 tailwindcss v3.x 를 설치하여 사용하려면 다음과 같이 하시면 됩니다.# 1. vite로 리액트 프로젝트를 생성합니다. npx create-vite@latest my-project --template react cd my-project npm install # 2. Tailwind CSS v3.x를 설치합니다. npm i -D tailwindcss@3 postcss autoprefixer npm tailwindcss init -ptailwind.config.js 파일 설정/** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }./src/index.css 파일 수정@tailwind base; @tailwind components; @tailwind utilities;

빨간 밑줄 질문이요..

props 에 빨간줄은 해당 파라미터를 컴포넌트 안에서 사용하지 않고 있기 때문에 나오는 eslint 에러표시입니다. 컴포넌트 내에서 사용하지 않으면 props 를 제거하시거나.다음 강의에서 해당 props를 호출하는 내용이 있으면 빨간줄은 자연히 지워질 겁니다. 혹시 props를 사용해도 props 에 빨간줄이 나오면 eslin.config.js 파일 또는 eslintrc 파일 rules 부분에 "react/prop-types": "off" 옵션을 추가해 주세요. PS: JSX 문법에서는 class 속성은 className 이라고 표기하는 게 맞습니다.이유는 자바스크립트에 class 키워드는 예약어라서 class 속성으로 사용할 수 없어요.

vite를 통해 프로젝트 생성 시 React Router 는 무엇일까요?

나중에 react-router, react-router-dom 패키지 설치할 때 따로 설치하지 않아도 되는 경우입니다.리액트 라우팅 , 페이지 라우팅 배우실 때 아실 겁니다.

jsx 실습 관련 오류 npm start를 해도 강사 화면처럼 안떠요.

npm start 실행하려는 폴더 내에 package.json 을 읽을 수 없다는 오류입니다.npm install 로 노드 모듈 패키지를 설치하지 않았거나, package.json 파일이 없는 경로에서 프로그램을 실행하려고 해서 그런 것으로 보입니다.

npx create-react-app my-app 명령어 반응없음

vite 빌드 도구를 이용해 보세요.# 리액트 프로젝트 생성 npm create vite@latest my-react-app -- --template react # 해당 프로젝트 폴더로 이동 cd my-react-app # 관련 패키지 설치하기 npm install # 리액트 프로젝트 실행 npm run dev

create-react-app my app 실행 시 에러

react@19.0.0 가 @testing-library/react@13.4.0 와 호환성 충돌하는 이슈가 있습니다. 이 오류가 수정되기 전까지는 안될것 같습니다. (create-react-app 지원 중단이라..)다른 대안으로 yarn 으로 설치 방법과, vite 빌드 도구로 설치하는 방법을 사용하세요.npm i -g yarn yarn create react-app cd yarn startnpx create-vite@latest --template react cd npm install npm run dev

Failed to load module script 에러가 뜹니다

혹시 jsx 문법이 들어간 컴포넌트 파일의 확장자가 .js 인가요?그렇다면 .jsx로 변경해 보세요. vite 개발 환경에서는 jsx 를 반환하는 코드 파일은 반드시 확장자가 jsx 이거나 타입스크립트 에서는 tsx 로 되어 있어야 합니다.

npx create-react-app mall 에러가 납니다

React 가 19버전이 되면서 npx create-react-app 으로 프로젝트 생성 시 오류가 발생하고 있네요.CRA 깃허브 사이트에서도 해당 이슈에 따른 질문이 많습니다.이것에 대한 해결방법은 yarn 으로 create-react-app 을 설치하거나 vite 를 사용하여 설치하는 것을 권장하고 있습니다.npm install --global yarn yarn create react-app my-project-app cd my-project-app yarn startnpx create-vite@latest my-project-app --template react cd my-project-app npm install npm run start