기록

기존에 React, Redux로 3년은 더 된 회사의 프로젝트를 다시 재구성하여 작업을 진행할 기회가 생겨 프로젝트 설정부터 완료까지 혼자 진행한 회고록이다. 1. 기술 스택 설정 - 기존에 사용하던 스택으로는 React, Redux, Redux-Saga, Antd, Styled-Component, Typescript 였고 presentational & container 패턴을 이용하여 제작을 주로 사용하였다. 다른 기술들과 비교점을 찾아가며 협업과 개발에 더 편리한 스택을 찾기 위해 새로운 기술 스택을 도입하였다. React 프레임워크인 Next를 채택하였고 상태 관리로 Mobx, UI프레임워크로 MetarialUI를 사용하였다. 컴포넌트를 더 세분화하고 재사용성을 더 높이기위해 Atomic디자인 패턴..

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