https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Developer Tools - Chrome 웹 스토어Adds React debugging tools to the Chrome Developer Tools. Created from revision 3cde211b0c on 10/20/2025.chromewebstore.google.com 해당 사이트에서 devtools 확장프로그램 추가 App.jsximport Counter from "@/components/Counter";import UserCard from "@/components/UserCard";function App..
플러그인 선택후 eslint 설치 eslint.config.jsimport js from '@eslint/js'import globals from 'globals'import reactHooks from 'eslint-plugin-react-hooks'import reactRefresh from 'eslint-plugin-react-refresh'import { defineConfig, globalIgnores } from 'eslint/config'export default defineConfig([ globalIgnores(['dist']), { files: ['**/*.{js,jsx}'], extends: [ js.configs.recommended, reactHoo..
vite.config.jsimport { defineConfig } from "vite";import react from "@vitejs/plugin-react";import { resolve } from "path";export default defineConfig({ plugins: [react()], resolve: { alias: { "@": resolve("src"), }, },}); 루트디렉터리에 jsconfig.json 생성- vite.config.js만 생성하도 컴파일 에러가 나지않지만, Eslint 설정이 빡세게 되어있거나, idel에서 에러가 날경우가 있어서 아래 추가 jsconfig.json{ "compilerOptions": { "baseU..
노드 설치 및 확인vsCode를 실행한후 아래 명령어를 실행한다.node -vnpm -v - 설치가 되어있지않으면 node js 설치를 한다.https://nodejs.org/en/ Node.js — Run JavaScript EverywhereNode.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.nodejs.org 프로젝트 설정vsCode 터미널에서 프로젝트를 생성할 폴더로 이동후 아래 명령어를 작성한다.npm create vite@latest 프로젝트명 - React 선택 - ..
npm install vue bootstrap bootstrap-vue-3 - VsCode에 해당 명령어를 입력해서 bootstrap을 install 합니다. main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import BootstrapVue3 from 'bootstrap-vue-3'; import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue-3/dist/bootstrap-vue-3.css' const app = createApp(App) app.use(BootstrapVue3) app.use(router) app.moun..
이번 게시글에는 VsCode에서 작성한 소스를 깃허브와 연동하고 커밋하는것을 해보겠습니다. - VsCode 좌측하단에 해당 버튼을 눌러서 깃허브를 로그인합니다. - private로 할지 public으로 할지 선택후 클릭합니다. - access token을 입력하라는 창이뜹니다. access token 확인하는방법 - 깃허브 로그인후 프로필 - settings - 왼쪽 메뉴에 Developer Settings 클릭 - Tokens (classic)후 Generate new Token (classic) 클릭 - 토큰명과 repo 체크후 Generate Token 클릭 - 해당키 복사후 위에 토큰 입력창에 넣습니다. - 깃허브에 확인해보면 제가 지정한 vue froject 이름으로 repository가 생성이..