1. Repo 생성
이번프로젝트에서는 yarn을 사용하겠습니다.
2. CRA 프로젝트 생성(typescript)
yarn create react-app . --template typescript
3. Eslint, Prettier, Husky 설정
yarn add -D prettier eslint-plugin-prettier eslint-config-prettier
.eslintrc.json
{
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
]
}
.prettierrc.json
useTabs를 사용하면서 코드를 코드블럭(블로그를 쓰기 위한 도구)에 붙여넣으면 너무 보기 힘들어서 이번에는 사용하지 않았습니다.
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"tabWidth": 2,
"bracketSameLine": true,
"jsxSingleQuote": false,
"quoteProps": "as-needed",
"arrowParens": "always",
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "css",
"endOfLine": "lf"
}
husky
yarn -D husky lint-staged
# git hook를 활성화
npx husky install
package.json
package.json에 scripts와 lint-staged를 추가합니다.
"scripts": {
"precommit": "lint-staged",
"prepare": "husky install"
...
},
...
"lint-staged": {
"*.{js,ts,tsx}": [
"eslint --fix",
"prettier --write"
]
},
hook 생성
npx husky add .husky/pre-commit "npx lint-staged"
추가로 프로젝트에서 절대경로를 사용하기 위해서
tsconfig.json에 baseUrl, paths를 추가합니다.
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src"]
}
4. emotion 설치
yarn add @emotion/styled @emotion/react
5. storybook 설치 및 기본 설정
npx -p @storybook/cli sb init
# Run the test runner (Jest) in a terminal:
yarn test --watchAll
# Start the component explorer on port 6006:
yarn storybook
# Run the frontend app proper on port 3000:
yarn start
emtion과 storybook의 버전 충돌로 .storybook/main.js에 아래와 같이 코드를 입력합니다.
const path = require('path');
const toPath = (_path) => path.join(process.cwd(), _path);
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/preset-create-react-app',
],
# 👇 를 emotion의 버전충돌로 추가해야합니다.
webpackFinal: async (config) => ({
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
'@emotion/core': toPath('node_modules/@emotion/react'),
'@emotion/styled': toPath('node_modules/@emotion/styled'),
},
},
}),
# 👆를 emotion의 버전충돌로 추가해야합니다.
framework: '@storybook/react',
core: {
builder: '@storybook/builder-webpack5',
},
};
다음에는 storybook으로 기본적으로 응용할 수 있는 컴포넌트들을 만들어 보겠습니다.