Skip to content

Commit e291a57

Browse files
ahastudioahastudio
committed
JavaScript + React + usestore-ts 예제
1 parent 4696e58 commit e291a57

23 files changed

+18437
-0
lines changed

‎20221028/react/.eslintignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/node_modules/
2+
/coverage/
3+
/dist/
4+
.parcel-cache

‎20221028/react/.eslintrc.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
es2021: true,
5+
jest: true,
6+
},
7+
extends: [
8+
'airbnb',
9+
'plugin:react/recommended',
10+
'plugin:react/jsx-runtime',
11+
],
12+
parser: '@babel/eslint-parser',
13+
parserOptions: {
14+
requireConfigFile: false,
15+
babelOptions: {
16+
presets: ['@babel/preset-react'],
17+
plugins: [
18+
[
19+
'@babel/plugin-proposal-decorators',
20+
{ decoratorsBeforeExport: true },
21+
],
22+
],
23+
},
24+
legacyDecorators: true,
25+
ecmaVersion: 'latest',
26+
sourceType: 'module',
27+
},
28+
plugins: [
29+
'react',
30+
],
31+
rules: {
32+
indent: ['error', 2],
33+
'no-trailing-spaces': 'error',
34+
curly: 'error',
35+
'brace-style': 'error',
36+
'no-multi-spaces': 'error',
37+
'space-infix-ops': 'error',
38+
'space-unary-ops': 'error',
39+
'no-whitespace-before-property': 'error',
40+
'func-call-spacing': 'error',
41+
'space-before-blocks': 'error',
42+
'keyword-spacing': ['error', { before: true, after: true }],
43+
'comma-spacing': ['error', { before: false, after: true }],
44+
'comma-style': ['error', 'last'],
45+
'comma-dangle': ['error', 'always-multiline'],
46+
'space-in-parens': ['error', 'never'],
47+
'block-spacing': 'error',
48+
'array-bracket-spacing': ['error', 'never'],
49+
'object-curly-spacing': ['error', 'always'],
50+
'key-spacing': ['error', { mode: 'strict' }],
51+
'arrow-spacing': ['error', { before: true, after: true }],
52+
},
53+
};

‎20221028/react/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/node_modules/
2+
/coverage/
3+
/dist/
4+
.parcel-cache

‎20221028/react/.vscode/settings.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"editor.rulers": [
3+
80
4+
],
5+
"editor.codeActionsOnSave": {
6+
"source.fixAll.eslint": true
7+
},
8+
"trailing-spaces.trimOnSave": true
9+
}

‎20221028/react/README.md‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
# React + usestore-ts 예제
2+
3+
참고:
4+
<https://github.com/ahastudio/CodingLife/tree/main/20220726/react>
5+
6+
## 프로젝트 생성
7+
8+
```bash
9+
npm init -y
10+
```
11+
12+
## Git과 ESLint를 위한 무시 파일 생성
13+
14+
```bash
15+
touch .gitignore
16+
touch .eslintignore
17+
```
18+
19+
두 파일 모두 다음과 같이 작성한다.
20+
21+
```txt
22+
/node_modules/
23+
/coverage/
24+
/dist/
25+
.parcel-cache
26+
```
27+
28+
## Visual Studio Code 세팅
29+
30+
기존 파일을 그대로 다운로드헤서 사용한다.
31+
32+
```bash
33+
mkdir .vscode
34+
35+
curl https://raw.githubusercontent.com/ahastudio/CodingLife/main/20211008/react/.vscode/settings.json \
36+
-o .vscode/settings.json
37+
```
38+
39+
## Decoreator 세팅
40+
41+
```bash
42+
touch jsconfig.json
43+
```
44+
45+
```json
46+
{
47+
"compilerOptions": {
48+
"experimentalDecorators": true
49+
}
50+
}
51+
```
52+
53+
## ESLint 세팅
54+
55+
Decorator 지원을 위해 ESLint에서 Babel을 활용.
56+
57+
```bash
58+
npm i -D eslint @babel/eslint-parser \
59+
@babel/preset-react @babel/plugin-proposal-decorators
60+
61+
npx eslint --init
62+
```
63+
64+
`.eslintrc.js` 파일은 적절히 수정한다.
65+
66+
```js
67+
extends: [
68+
'airbnb',
69+
'plugin:react/recommended',
70+
'plugin:react/jsx-runtime',
71+
],
72+
```
73+
74+
```js
75+
parser: '@babel/eslint-parser',
76+
parserOptions: {
77+
requireConfigFile: false,
78+
babelOptions: {
79+
presets: ['@babel/preset-react'],
80+
plugins: [
81+
[
82+
'@babel/plugin-proposal-decorators',
83+
{ decoratorsBeforeExport: true },
84+
],
85+
],
86+
},
87+
legacyDecorators: true,
88+
ecmaVersion: 'latest',
89+
sourceType: 'module',
90+
},
91+
```
92+
93+
```js
94+
rules: {
95+
indent: ['error', 2],
96+
'no-trailing-spaces': 'error',
97+
curly: 'error',
98+
'brace-style': 'error',
99+
'no-multi-spaces': 'error',
100+
'space-infix-ops': 'error',
101+
'space-unary-ops': 'error',
102+
'no-whitespace-before-property': 'error',
103+
'func-call-spacing': 'error',
104+
'space-before-blocks': 'error',
105+
'keyword-spacing': ['error', { before: true, after: true }],
106+
'comma-spacing': ['error', { before: false, after: true }],
107+
'comma-style': ['error', 'last'],
108+
'comma-dangle': ['error', 'always-multiline'],
109+
'space-in-parens': ['error', 'never'],
110+
'block-spacing': 'error',
111+
'array-bracket-spacing': ['error', 'never'],
112+
'object-curly-spacing': ['error', 'always'],
113+
'key-spacing': ['error', { mode: 'strict' }],
114+
'arrow-spacing': ['error', { before: true, after: true }],
115+
},
116+
```
117+
118+
## Jest와 SWC로 테스트 환경 구축
119+
120+
관련 패키지 설치.
121+
122+
```bash
123+
npm i -D jest @types/jest @swc/core @swc/jest \
124+
jest-environment-jsdom \
125+
@testing-library/react @testing-library/jest-dom
126+
```
127+
128+
Jest 환경 설정 파일 생성.
129+
130+
```bash
131+
touch jest.config.js
132+
```
133+
134+
`jest.config.js` 파일 작성.
135+
React와 Decorator를 지원하도록 설정한다.
136+
137+
```js
138+
module.exports = {
139+
testEnvironment: 'jsdom',
140+
setupFilesAfterEnv: [
141+
'@testing-library/jest-dom/extend-expect',
142+
],
143+
transform: {
144+
'^.+\\.jsx?$': ['@swc/jest', {
145+
jsc: {
146+
parser: {
147+
jsx: true,
148+
decorators: true,
149+
},
150+
transform: {
151+
react: {
152+
runtime: 'automatic',
153+
},
154+
legacyDecorator: true,
155+
decoratorMetadata: true,
156+
},
157+
},
158+
}],
159+
},
160+
};
161+
```
162+
163+
## React 설치
164+
165+
```bash
166+
npm i react react-dom
167+
168+
npm i -D @types/react @types/react-dom
169+
```
170+
171+
## Parcel 설치
172+
173+
```bash
174+
npm i -D parcel
175+
```
176+
177+
## usestore-ts 설치
178+
179+
```bash
180+
npm i usestore-ts
181+
```

‎20221028/react/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>React Demo</title>
6+
</head>
7+
<body>
8+
<div id="app">
9+
Loading...
10+
</div>
11+
<script type="module" src="./src/index.jsx"></script>
12+
</body>
13+
</html>

‎20221028/react/jest.config.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
module.exports = {
2+
testEnvironment: 'jsdom',
3+
setupFilesAfterEnv: [
4+
'@testing-library/jest-dom/extend-expect',
5+
],
6+
transform: {
7+
'^.+\\.jsx?$': ['@swc/jest', {
8+
jsc: {
9+
parser: {
10+
jsx: true,
11+
decorators: true,
12+
},
13+
transform: {
14+
react: {
15+
runtime: 'automatic',
16+
},
17+
legacyDecorator: true,
18+
decoratorMetadata: true,
19+
},
20+
},
21+
}],
22+
},
23+
};

‎20221028/react/jsconfig.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"compilerOptions": {
3+
"experimentalDecorators": true
4+
}
5+
}

0 commit comments

Comments
 (0)