1.vite 기반 react 프로젝트 생성
프로젝트 이름은 : dragexpand
>npm create vite@latest dragexpand -- --template react-ts
생성이 완료되면 프로젝트로 이동
>cd .\dragexpand\
>npm install
2.tailwindcss 사용 추가
프로젝트에 tailwindcss 종속성추가
>npm install -D tailwindcss postcss autoprefixer
프로젝트에 tailwindcss 사용 설정 추가
>npx tailwindcss init -p
실행 후에
Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js
두 파일이 추가 됩니다.
생성된 tailwind.config.js파일을 수정합니다.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
tailwindcss 기본 디렉티브 추가
./src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
3.vscode 디버그 연결 설정
.vscode/launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "msedge", /* 에지에서 디버그 */
"request": "launch",
"name": "Debug App",
"url": "http://localhost:5173", /*관찰하게 될 vite가 실행되는 포트*/
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
},
"runtimeArgs": [
"--remote-debugging-port=9222"
],
"sourceMaps": true
}
]
}
launch.json을 작성한 후 프로젝트를 실행합니다.
> npm run dev
vscode에서 npm run dev에서 시작한 포트를 디버그 하도록 실행하면, edge가 실행되면서 http://localhost:5173로 이동합니다. 정상적으로 연결되면 vscode에서 tsx파일을 디버그 할수 있습니다.
1.을 이용해서 디버그 시작
2.디버그가 실행되고 edge가 실행되고 연결된 상태
3.vsocde의 디버그 모드
4.tsx의 브레이크포인트 설정
5.tailwindcss 적용테스트
import { useEffect, useState } from 'react'
import './App.css'
function App() {
const sum =(a, b)=>{
let c = a+b;
return c;
}
useEffect(()=>{
console.log( sum(1,2));
}, []);
return (
<div className='container mx-auto h-screen
border border-solid border-cyan-400'>
</div>
)
}
export default App
참조 링크