개발자에게는 계속해서 연습하는 것이 중요하기 때문에 혼자서 React와 Typescript를 연습하기 위해서 간단한 TodoList를 만들어보기로 했다.
기획
어플리케이션: TodoList(v1)
기능:
1. Todo를 추가한다.
2. Todo를 삭제한다.
3. Todo를 수정한다.
4. 전체 선택할 수 있다.
기술스택 :React, Typescript, dart-sass
테스팅: Storybook
상태관리: Redux toolkit
배포: AWS, nginx
디자인 시안
디자인 시안도 여러가지 웹을 돌아다니면서 좋은 디자인들도 봤지만, Helevtica Poster의 느낌이 나는 조금은 투박하지만 타이포그래피가 아름답다고 느껴지는 TodoList를 만들기로 했다.
대신 너무 정적으로 보여서 상당히 많은(?) 애니매이션 효과를 주기로 했다. 애니매이션에는 React Spring을 쓰기로 했다.
Project Setting
먼저 기술 스택은 React, Typescript, dart-sass를 쓰기로 했으니 이 세 가지를 먼저 설치해준다.
1. Typescript로 셋팅된 React앱 생성하기
npx create-react-app todolist --template typescript위의 명령어를 명령어창에 입력하자.
2. dart-sass 설치하기
Dart-Sass에 대해서 혹시 모르시는 분들이 계실까봐 적어본다.. 구 sass버전은 node-sass라고 하는데 CRA(create react app) 웹사이트에 가면 sass를 추가할 때 명령어가 node-sass를 추가하도록 한다.
우리는 이때 새로운 dart-sass를 설치 해주기 위해서 todolist 디렉토리로 이동 후 다음의 명령어를 작성한다.
npm i sass이때 주의해야하는 것은 package-lock.json에서 sass-loader가 버전 7.2.0 이상인지 확인하는 것이다. 만약 버전이 낮다면 현재 sass-loader를 7.2.0 이상으로 업데이트 해준 뒤에 sass를 설치해주면 된다.
관련 글은 다음을 참고하도록 하자.
3. Formatting 설정
ESLint + Prettier
CRA를 이용해서 리액트 앱을 구성하는 경우 ESLint가 이미 설치가 되서 오기 때문에 ESLint는 따로 설치해주지 않아도 된다. 그래서 config만 해주면 되는데 우리는 보통 많이 이용하는 airbnb config를 설치해주도록 하겠다.
npm i -D eslint-config-airbnb-typescript그 다음 eslintConfig 설정을 해준다. 디렉토리에 있는 package.json에 다음과 같이 추가해준다.
"eslintConfig": {
"extends": ["airbnb-typescript"]
}그리고 rules를 수정해준다. 이 부분은 다른 분이 설정하신 규칙을 참고하였다.
"rules": {
"react/prefer-stateless-function": 0,
"react/jsx-filename-extension": 0,
"react/jsx-one-expression-per-line": 0,
"react/prop-types": 0,
"jsx-a11y/label-has-associated-control": [
"error",
{
"required": {
"some": [
"nesting",
"id"
]
}
}
],
"jsx-a11y/label-has-for": [
"error",
{
"required": {
"some": [
"nesting",
"id"
]
}
}
]
}그리고나서 개발 환경이 browser라는 것을 설정해준다.
"env": {
"browser": true
}그리고 Typescript로 설정을 해줬기 때문에 eslintConfig에 다음과 같은 설정을 추가해줘야 한다.
"parserOptions": {
"project": "./tsconfig.json"
}또 Storybook을 사용해서 Testing을 진행하기 때문에 storybook 파일은 eslint에서 제외시켜준다.
"ignorePatterns": ["stories.js", "*.stories.js", "*.stories.ts"],이렇게 해주면 eslintConfig의 전체 코드는 다음과 같다.
"eslintConfig": {
"extends": [
"airbnb-typescript",
"prettier"
],
"parserOptions": {
"project": "./tsconfig.json"
},
"ignorePatterns": ["stories.js", "*.stories.js", "*.stories.ts"],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off",
"react/prefer-stateless-function": 0,
"react/jsx-filename-extension": 0,
"react/jsx-one-expression-per-line": 0,
"react/prop-types": 0,
"react/react-in-jsx-scope": 0,
"jsx-a11y/label-has-associated-control": [
"error",
{
"required": {
"some": [
"nesting",
"id"
]
}
}
],
"jsx-a11y/label-has-for": [
"error",
{
"required": {
"some": [
"nesting",
"id"
]
}
}
]
},
"env": {
"browser": true
}
}
]
}Prettier 설정
그럼 eslint설정이 모두 끝났고 Prettier와의 연동만 남겨두고 있다. 다음의 명령어를 실행해서 eslint-config-prettier를 설치해준다.
npm i -D eslint-config-prettier그리고 package.json에 있는 extends에 prettier를 추가해준다.
"eslintConfig": {
"extends": [
"airbnb-typescript",
"prettier"
]
}eslint와 Prettier 각자가 rules가 다르기 때문에 이 차이를 없애기 위해서 프리티어의 rules를 eslint에 맞춘다.
.prettierrc를 생성하고 다음의 코드를 추가해준다.
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"printWidth": 80
}이렇게해주면 모든 설정이 완료되고 이제 즐겁게 component들을 만들기 시작하면 된다.
다음 시간부터는 열심히 Component를 만드는 과정을 적어보도록 하겠다.
