- public/index.html 정리
- package.json 정리
- index.js 정리
- App.js 정리
- index.css 정리
- App.css 제거
- css 폴더 생성/layout.css 생성
- npm 관련 제거(test 등등)
npm install eslint@latest -Dnpm install eslint-config-react-app --save-dev --force- 지금은 최신 버전 mjs 로 진행함.
npx eslint --initnpm i prettier -D- .prettierrc.json 파일 생성
{
"singleQuote": false,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
"arrowParens": "avoid",
"endOfLine": "auto"
}npm i eslint-config-prettier -D
npm i eslint-plugin-prettier -Deslint.config.mjs설정 수정
import js from "@eslint/js";
import pluginReact from "eslint-plugin-react";
import pluginPrettier from "eslint-plugin-prettier";
import globals from "globals";
import { defineConfig } from "eslint/config";
export default defineConfig([
{
files: ["**/*.{js,jsx}"],
languageOptions: {
ecmaVersion: "latest",
sourceType: "module",
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
globals: globals.browser,
},
plugins: {
react: pluginReact,
prettier: pluginPrettier,
},
rules: {
...pluginReact.configs.recommended.rules,
"prettier/prettier": "warn",
"no-var": "warn",
"no-unused-vars": "warn",
},
settings: {
react: {
version: "detect",
},
},
},
]);- VSCode 의 settings.json 에 내용 추가(
Ctrl + ,)
"eslint.useFlatConfig": true- emotion 설치
npm i @emotion/react
npm i @emotion/styled- scss 설치
npm i sass -D- react-router-dom 설치
npm i react-router-dom- App.jsx 에 작성(Router > Routes > Route)