기록

Package 설치 npm i @material-ui/core npm i -D @types/material-ui 커스텀 material ui의 버튼 커스텀 theme 설정 src/styles/theme.ts import { createMuiTheme } from '@material-ui/core'; export const theme = createMuiTheme({ overrides: { MuiButton: { root: { background: '#fac499', color: '#ffffff' } } } }); material theme 주입 src/_app.tsx import { ThemeProvider } from '@material-ui/styles'; import type { AppProps }..

Package 설치 npm i -D husky lint-staged 설정하기 npx husky install // husky bash 들어잇는 폴더 생성 npx husky add ./husky/pre-commit // 커밋시 실행할 bash 파일 추가 pre-commit #!/bin/sh . "$(dirname "$0")/_/husky.sh" npm run precommit // 실행할 스크립트 package.json { ... "scripts": { "start": "next start", "dev": "next dev", "build": "next build" "lint:fix": "eslint --fix src", "precommit": "lint-staged" }, "lint-staged": { ..

Prettier 설치 npm i -D prettier Prettier 파일 설정 root에 .prettierrc.js 생성 module.exports = { singleQuote: true, //인용부호 작은 따옴표 사용 semi: true, //모든 문법 끝에 세미콜론 추가 useTabs: false, tabWidth: 2, //탭 공백 넓이 trailingComma: 'none', //후행 쉼표 제거 printWidth: 80, //줄바꿈 넓이 bracketSpacing: true, // 브라켓 간격 arrowParens: 'avoid', //arrow function 매개변수 하나일때 괄호 제거 jsxSingleQuote: true //jsx 인용부호 작은 따옴표 사용 }; ESLint 파일 설정 ..

프로젝트 생성 npx create-next-app --typescript 프로젝트 구조 왼쪽 - 프로젝트 설치시 기본 구조 오른쪽 - 기존 리액트 프로젝트에서 src폴더에 파일들을 관리했었기때문에 익숙한 구조로 구조변경 당장에 사용하지않는 파일 및 폴더 삭제 public 폴더는 남겨놔야한다 안에 들어가있는 favicon 404 에러가 표출된다... Babel 설정 프로젝트 root에 .babelrc 파일생성 { "presets": ["next/babel"] } 프로젝트 실행 npm run dev or npm run build && npm start