기록

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

혼자 하는 코딩이라면 신경을 안 써도 되는 부분이지만... 협업간에 꼭 필요한 부분이다. lint와 prettier로 맞추어갈수 있다지만 현 회사에서 컨벤션을 맞추기 위해 기록한 부분들을 블로그로 옮겨본다. 1. 네이밍 규칙 1 - 1 파일명 component, enum 관련파일 UpperCamelCase로 표기 ex) MainPage.tsx 그외에 파일들은 lowerCamelCase로 표기한다. ex) index.tsx, 1 - 2 폴더명 component와 container 내부 하위 폴더들은 UpperCamelCase 표기 pages의 하위 폴더는 - 표기 ex) pay-management 1 - 3 변수, 함수 lowerCamelCase로 표기 1 - 4 컴포넌트명, enum명 UpperCamel..

서론 이전 포스트에 이어서 기간을 선택하는 컴포넌트와 셀렉트 박스 컴포넌트를 만들어본다. FormDateRange 컴포넌트 src/enum/DateRange.ts enum으로 기간 선택 시 오늘 최근 7일 한 달을 선택하기 위한 enum과 버튼 텍스트를 반환하는 함수를 만든다. export enum DateRange { ALL = 'ALL', TODAY = 'TODAY', RECENT_WEEK = 'RECENT_WEEK', RECENT_MONTH = 'RECENT_MONTH' } export const DateRangeMethods = { getLabel: (key: string) => { switch (key) { case DateRange.ALL: return '전체'; case DateRange.T..

서론 antd를 이용한 form 컴포넌트 제작. FormItem 하나하나씩 나누어서 만들기. 사용 패키지 yarn add antd @ant-design/icons styled-components yarn add -D @typs/styled-components yarn add -D craco-antd @craco/craco yarn add moment 폴더구조 Craco 이용 antd 테마 커스텀 package.json 에서 start 스크립트를 craco start로 변경해준다. /craco.config.js module.exports = { plugins: [ { plugin: require("craco-antd"), options: { customizeTheme: { "@primary-color": ..

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": { ..