기존(310)/🐳React

React, TypeScript, and Tailwind CSS with Vite in a Project Step 1 — 프로젝트 생성npm create vite@latest     Step 2 — Tailwind CSS 생성npm install -D tailwindcss postcss autoprefixer 3단계 - 구성 파일 생성 npx tailwind init -p  이 명령은 tailwind.config.js 및 postcss.config.js 구성 파일을 생성합니다 . 이 파일은 프로젝트와 상호 작용하고 사용자 정의하는 데 도움이 됩니다.4단계 - Tailwind CSS에 대한 소스 경로 구성이제 tailwind.config.js 파일 에 템플릿 파일의 경로를 추가해야 합니다 . 템플릿 파일에..

완성본 1. 간단한 Header 부분만들기 Component 로 된 Button 으로도 넣을수 있어서 유익.. } rightChild={alert("오른쪽 클릭")}/>} /> 1. {내용} 부분에 Button 을 넣어도 정상적으로 작동 완료 const MyHeader = ({headText,leftChild,rightChild}) => { return {leftChild} {headText} {rightChild} } export default MyHeader;

완성본 1. 총 3가지의 버튼을 생성하기 alert("버튼클릭")} type={"positive"} /> alert("버튼클릭")} type={"negative"} /> alert("버튼클릭")} type={"default"} /> 2. MyButton을 컴포넌트화 시켜주기 : 위에서 text , type , onclick 을 파라미터 변수로 받아줘서 * btnType = > positive,negative 이 아닌 다른 값이 들어오면 강제로 "default" 로 변경해주는 함수. * MyButton.defaultProprs = > type값이없으면 "default" 로 만들어준다. const MyButton = ({text,type,onClick}) => { // positive 나 negative 아..

1. React 기본 경로 위치 => /public/** 와 같은역할 const env = process.env; env.PUBLIC_URL = env.PUBLIC_URL || ""; import "./App.css" import {BrowserRouter, Route, Routes} from "react-router-dom"; import Home from "./pages/Home" import New from "./pages/New"; import Edit from "./pages/Edit"; import Diary from "./pages/Diary"; function App() { const env = process.env; env.PUBLIC_URL = env.PUBLIC_URL || ""; r..

1. Path Variable 이런식으로 디테일 화면으로 갈때사용한다.. const {id} = useParams(); // 전달받아서 모아서 객체 🐳 상세페이지 js import {useParams} from "react-router-dom"; const Diary = () => { const {id} = useParams(); // 전달받아서 모아서 객체 console.log(id) return ( Diary 이곳은 일기 상세 페이지 입니다. ); } export default Diary; 🐳 App.js import "./App.css" import {BrowserRouter, Route, Routes} from "react-router-dom"; import RouterTests from './c..

사용하기 1. 설치 npm npm install react-router-dom@6 🐳 App.js 로 돌아가서 import {BrowserRouter} from "react-router-dom"; 🐳 App.js 페이지 import "./App.css" import {BrowserRouter} from "react-router-dom"; function App() { return (