기술스택

yarn install
yarn husky install
#입력하면 모든 패키지 설치 가능합니다

요약

• yarn, crate-react-app

• emoiton

• craco

• eslint & prettier

• storybook

• react-router-dom

• axios

• sass

• mui

• stylelint

• husky , commitlint

// package.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@craco/craco": "^6.3.0",
    "@emotion/babel-plugin": "^11.3.0",
    "@emotion/babel-preset-css-prop": "^11.2.0",
    "@storybook/addon-actions": "^6.3.12",
    "@storybook/addon-essentials": "^6.3.12",
    "@storybook/addon-links": "^6.3.12",
    "@storybook/node-logger": "^6.3.12",
    "@storybook/preset-create-react-app": "^3.2.0",
    "@storybook/react": "^6.3.12",
    "eslint": "^7.2.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^1.7.0",
    "prettier": "^2.4.1"
  },
  "resolutions": {
    "babel-loader": "8.1.0"
  }
}

기본

• webpack, babel 등 기본설정으로 유지

# yarn 설치
npm install --global yarn

# 에러 있을 시 권한 설정
sudo chown -R $USER /usr/local/lib/node_modules

yarn create react-app 프로젝트명

패키지

emotion

css in js, jsx를 위한 패키지

yarn add @emotion/react
yarn add @emotion/styled
yarn add --dev @emotion/babel-plugin
yarn add -D @emotion/babel-preset-css-prop # 아래 craco 설정과 연동 

craco

create-react-app-config-override : CRA의 기본환경 설정에 추가로 환경설정을 오버라이딩 하기 위한 패키지

yarn add -D @craco/craco

// craco.config.js
const path = require('path');

module.exports = {
  babel: {
    presets: ['@emotion/babel-preset-css-prop'],
  },
  webpack: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@hooks': path.resolve(__dirname, 'src/hooks'),
      '@contexts': path.resolve(__dirname, 'src/contexts'),
      '@pages': path.resolve(__dirname, 'src/pages'),
    },
  },
};

// package.json에서 아래와 같이 수정

...
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  ...
},
...

eslint & prettier

코드 검사 및 포매팅

# eslint, prettier 패키지 설치
yarn add -D eslint prettier

# airbnb 설정으로 할 시 설치, 우리는 패스!
npx install-peerdeps --dev eslint-config-airbnb

# react의 기본 eslint 패키지 설치
yarn add -D eslint-config-react-app

# prettier eslint 플러그인 및 설정 패키지 설치
yarn add -D eslint-config-prettier eslint-plugin-prettier

eslint 설정

// .eslintrc.json

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
		// stories.jsx 파일서 export default {...} 사용하기 위함
    "import/no-anonymous-default-export": "off"
  }
}

1. eslint-plugin-prettier 를 활성화

2. prettier/prettier rule을 error로 설정

3. eslint-config-prettier 를 적용

💡 참고 eslint를 무시하고자 하는 파일이 있다면 해당 파일 상단에 /* eslint-disable */ 을 추가하면 eslint규칙이 적용되지 않습니다.

prettier 설정

// .prettierrc.js

module.exports = {
  // 코드 한줄이 maximum 80칸
  printWidth: 80,
  // 문자열은 홀따옴표(')로 formatting
  singleQuote: true,
  //코드 마지막에 세미콜론이 있게 formatting
  semi: true,
  //탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
  useTabs: false,
  // 들여쓰기 너비는 2칸
  tabWidth: 2,
  // 객체나 배열을 작성 할 때, 원소 혹은 key-value의 맨 뒤에 있는 것에도 쉼표를 붙임
  trailingComma: 'all',
	// 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략
  arrowParens: 'avoid',
  // 대괄호 {} 사이 공백
  bracketSpacing: true,
  // JSX 요소 > 줄바꿈
  jsxBracketSameLine: true,
  // EOL 자동추가
  endOfLine: 'auto',
};

vscode 설정

1. vscode에서 eslint, prettier 확장 설치

2. vscode의 사용자 설정에서 아래와 같이 옵션 추가하기

// settings.json

{
	...
	"editor.defaultFormatter": "esbenp.prettier-vscode", // 에디터의 기본 포매터를 prettier로 설정
	"[javascript]": {
    "editor.formatOnSave": true // js파일 저장시 포매팅
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true // jsx파일 저장시 포매팅
  },
	...
}

// 궁금증
// 아래 설정은 추가하지 않아도 됩니다!

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true // ## ES Lint 저장 시 자동 fix 설정
},
"eslint.autoFixOnSave": true, // ## document formatting 자동 fix 설정

// 이 설정들은 뭘까? => 은찬 : 저장할 때 고쳐주는 필요한 코드인 것 같아요!

Storybook

UI 컴포넌트와 페이지 빌딩 툴

npx -p @storybook/cli sb init

React + Storybook 의 종속성 문제

해결

// package.json

...
"resolutions": {
 "babel-loader": "8.1.0" // react-scripts에서 요구하는 버전
}
...

스토리북 alias bug fix

stories 파일 내부에서는 `craco`에서의 별칭을 사용할 수 없었습니다. (ex. @components , @hooks) 이유는 리액트앱은 craco로 실행되지만 stories 파일은 그렇지 않기 때문입니다. 따라서 storybook의 별칭 설정을 추가로 해야합니다. storybook은 따로 webpack setting을 필요로해서 .storybook/main.js에 추가적인 webpack alias를 명시했습니다.

// .storybook/main.js

// 파일 경로가 ..으로 시작하는 이유는 최상위 route에 위치하고 있습니다. 
// 해당 폴더를 기준해서 탐색하기 때문입니다.

webpackFinal: async (config) => {
    config.resolve.alias["@components"] = path.resolve(__dirname, "../src/components");
    config.resolve.alias["@hooks"] = path.resolve(__dirname, "../src/hooks");
    config.resolve.alias["@contexts"] = path.resolve(__dirname, "../src/contexts");
    config.resolve.alias["@pages"] = path.resolve(__dirname, "../src/pages");
    return config
}

Axios

axios를 사용하기 위한 패키지

yarn add axios # axios 라이브러리 설치

# cors 관련 문제 발생 x

react-router-dom

리액트 라우터 기능을 사용하기 위한 패키지 추가 설정 없이 바로 사용.

yarn add react-router-dom

Sass

Sass(scss)를 사용하기 위한 패키지 추가 설정 없이 바로 사용.

yarn add node-sass

MUI

MUI를 사용하기 위한 패키지 @emotion/react 와 @emotion/styled 패키지에 의존 MUI 공식 홈페이지 에서 사용법을 참고하면서 사용하세요. MUI 사용법 참고

yarn add @mui/material
yarn add @material-ui/icons # SVG 아이콘 사용을 위함

# emotion관련 패키지를 설치하지 않았다면 아래 명령어로
yarn add @mui/material @emotion/react @emotion/styled

husky, lint-staged, commitlint

yarn add husky --dev 
yarn husky install

# husky 설치 후 아래 명렁어 쉘에 입력하면 .husky 폴더 생성
# 내부에는 commit-msg 파일이 생성되어 있음
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

# commitlint 설치
yarn add --dev @commitlint/config-conventional @commitlint/cli

# 설치 후 루트 디렉토리에 commitlint.config.js 파일 생성 후 아래 코드 추가
module.exports = { extends: ['@commitlint/config-conventional'] };

# 다시 .husky 폴더 내부의 commit-img 파일을 아래와 같이 변경

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn commitlint --edit $1

stylelint

# 패키지 설치
yarn add stylelint stylelint-config-standard stylelint-scss stylelint-order stylelint-config-prettier stylelint-config-recess-order

• stylelint-config-standard :

• stylelint-scss :

• stylelint-order :

• stylelint-config-prettier :

• stylelint-config-recess-order :

• stylelint-config-styled-components :

• stylelint-processor-styled-components :

stylelint Extension 추가

// vs code settings.json에서 아래 코드 추가
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true, // 안 넣어도 됨
    "source.fixAll.stylelint": true
},
"stylelint.enable": true

// 루트 폴더에 .stylelintrc.json 파일 추가 후 아래 코드 작성
{
  "extends": [
    "stylelint-config-standard", //
    "stylelint-config-recess-order", //
    "stylelint-config-prettier" //
  ],
  "plugins": ["stylelint-scss", "stylelint-order"]
}