reactJs 확장프로그램 devtool 설치

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..

• format_list_bulleted frontend/react
• · 2025. 12. 15.
• textsms

reactJs vsCode eslint 플러그인 설정

플러그인 선택후 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..

• format_list_bulleted frontend/react
• · 2025. 12. 15.
• textsms

reactJs 프로젝트 경로 src '@' 설정

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..

• format_list_bulleted frontend/react
• · 2025. 12. 15.
• textsms

react 프로젝트 세팅

노드 설치 및 확인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 선택 - ..

• format_list_bulleted frontend/react
• · 2025. 12. 15.
• textsms