Skip to content

Commit 0ce861e

Browse files
velopertvelopert
committed
Updates Chapter 10 source code
1 parent 45e1d59 commit 0ce861e

File tree

13 files changed

+631
-1001
lines changed

13 files changed

+631
-1001
lines changed

‎10/todo-app/jsconfig.json

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

‎10/todo-app/package.json

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
"private": true,
55
"dependencies": {
66
"classnames": "^2.2.6",
7-
"node-sass": "^4.11.0",
7+
"node-sass": "^4.12.0",
88
"react": "^16.8.6",
99
"react-dom": "^16.8.6",
10-
"react-icons": "^3.2.2",
11-
"react-scripts": "^3.0.1"
10+
"react-icons": "^3.7.0",
11+
"react-scripts": "3.0.1"
1212
},
1313
"scripts": {
1414
"start": "react-scripts start",
@@ -19,10 +19,16 @@
1919
"eslintConfig": {
2020
"extends": "react-app"
2121
},
22-
"browserslist": [
23-
">0.2%",
24-
"not dead",
25-
"not ie <= 11",
26-
"not op_mini all"
27-
]
22+
"browserslist": {
23+
"production": [
24+
">0.2%",
25+
"not dead",
26+
"not op_mini all"
27+
],
28+
"development": [
29+
"last 1 chrome version",
30+
"last 1 firefox version",
31+
"last 1 safari version"
32+
]
33+
}
2834
}

‎10/todo-app/public/index.html

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,11 @@
33
<head>
44
<meta charset="utf-8" />
55
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta
7-
name="viewport"
8-
content="width=device-width, initial-scale=1, shrink-to-fit=no"
9-
/>
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
107
<meta name="theme-color" content="#000000" />
118
<!--
12-
manifest.json provides metadata used when your web app is added to the
13-
homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
9+
manifest.json provides metadata used when your web app is installed on a
10+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1411
-->
1512
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
1613
<!--

‎10/todo-app/src/App.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
.App-logo {
66
animation: App-logo-spin infinite 20s linear;
77
height: 40vmin;
8+
pointer-events: none;
89
}
910

1011
.App-header {

‎10/todo-app/src/App.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useRef, useState, useCallback } from 'react';
1+
import React, { useState, useRef, useCallback } from 'react';
22
import TodoTemplate from './components/TodoTemplate';
33
import TodoInsert from './components/TodoInsert';
44
import TodoList from './components/TodoList';

‎10/todo-app/src/components/TodoInsert.js

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
1-
import React, { useState } from 'react';
1+
import React, { useState, useCallback } from 'react';
22
import { MdAdd } from 'react-icons/md';
33
import './TodoInsert.scss';
44

55
const TodoInsert = ({ onInsert }) => {
6-
const [value, setValue] = useState(''); // input 상태
7-
const onChange = e => setValue(e.target.value); // input 변경 이벤트
8-
const onSubmit = e => {
9-
// submit 이벤트는 브라우저에서 새로고침을 발생시킵니다.
10-
// 이를 방지하기 위하여 이 함수를 호출합니다.
11-
e.preventDefault();
12-
// onInsert 호출 후 input 값 초기화
13-
onInsert(value);
14-
setValue('');
15-
};
6+
const [value, setValue] = useState('');
7+
8+
const onChange = useCallback(e => {
9+
setValue(e.target.value);
10+
}, []);
11+
12+
const onSubmit = useCallback(
13+
e => {
14+
onInsert(value);
15+
setValue(''); // value 값 초기화
16+
17+
// submit 이벤트는 브라우저에서 새로고침을 발생시킵니다.
18+
// 이를 방지하기 위하여 이 함수를 호출합니다.
19+
e.preventDefault();
20+
},
21+
[onInsert, value],
22+
);
23+
1624
return (
1725
<form className="TodoInsert" onSubmit={onSubmit}>
1826
<input

‎10/todo-app/src/components/TodoList.js

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,19 @@ import React from 'react';
22
import TodoListItem from './TodoListItem';
33
import './TodoList.scss';
44

5-
const TodoList = ({ onToggle, onRemove, todos }) => {
6-
const list = todos.map(todo => (
7-
<TodoListItem
8-
todo={todo}
9-
key={todo.id}
10-
onRemove={onRemove}
11-
onToggle={onToggle}
12-
/>
13-
));
14-
return <div className="TodoList">{list}</div>;
5+
const TodoList = ({ todos, onRemove, onToggle }) => {
6+
return (
7+
<div className="TodoList">
8+
{todos.map(todo => (
9+
<TodoListItem
10+
todo={todo}
11+
key={todo.id}
12+
onRemove={onRemove}
13+
onToggle={onToggle}
14+
/>
15+
))}
16+
</div>
17+
);
1518
};
1619

1720
export default TodoList;

‎10/todo-app/src/components/TodoListItem.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import cn from 'classnames';
88
import './TodoListItem.scss';
99

1010
const TodoListItem = ({ todo, onRemove, onToggle }) => {
11-
const { text, checked, id } = todo;
11+
const { id, text, checked } = todo;
12+
1213
return (
1314
<div className="TodoListItem">
1415
<div className={cn('checkbox', { checked })} onClick={() => onToggle(id)}>

‎10/todo-app/src/components/TodoListItem.scss

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
.TodoListItem-virtualized {
2-
& + & {
3-
border-top: 1px solid #dee2e6;
4-
}
5-
}
61
.TodoListItem {
72
padding: 1rem;
83
display: flex;
@@ -12,7 +7,7 @@
127
}
138
.checkbox {
149
cursor: pointer;
15-
flex: 1; // 차지 할 수 있는 영역 모두 차지
10+
flex: 1; // 차지할 수 있는 영역 모두 차지
1611
display: flex;
1712
align-items: center; // 세로 중앙 정렬
1813
svg {
@@ -21,8 +16,9 @@
2116
}
2217
.text {
2318
margin-left: 0.5rem;
24-
flex: 1; // 차지 할 수 있는 영역 모두 차지
19+
flex: 1; // 차지할 수 있는 영역 모두 차지
2520
}
21+
// 체크되었을 때 보여줄 스타일
2622
&.checked {
2723
svg {
2824
color: #22b8cf;
@@ -43,4 +39,9 @@
4339
color: #ff8787;
4440
}
4541
}
42+
43+
// 엘리먼트 사이사이에 테두리를 넣어줌
44+
& + & {
45+
border-top: 1px solid #dee2e6;
46+
}
4647
}

‎10/todo-app/src/components/TodoTemplate.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.TodoTemplate {
22
width: 512px;
3-
// width 가 주어진 상태에서 좌우 중앙정렬
3+
// width가 주어진 상태에서 좌우 중앙 정렬
44
margin-left: auto;
55
margin-right: auto;
66
margin-top: 6rem;

‎10/todo-app/src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@ ReactDOM.render(<App />, document.getElementById('root'));
88

99
// If you want your app to work offline and load faster, you can change
1010
// unregister() to register() below. Note this comes with some pitfalls.
11-
// Learn more about service workers: http://bit.ly/CRA-PWA
11+
// Learn more about service workers: https://bit.ly/CRA-PWA
1212
serviceWorker.unregister();

‎10/todo-app/src/serviceWorker.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
// resources are updated in the background.
99

1010
// To learn more about the benefits of this model and instructions on how to
11-
// opt-in, read http://bit.ly/CRA-PWA
11+
// opt-in, read https://bit.ly/CRA-PWA
1212

1313
const isLocalhost = Boolean(
1414
window.location.hostname === 'localhost' ||
@@ -43,7 +43,7 @@ export function register(config) {
4343
navigator.serviceWorker.ready.then(() => {
4444
console.log(
4545
'This web app is being served cache-first by a service ' +
46-
'worker. To learn more, visit http://bit.ly/CRA-PWA'
46+
'worker. To learn more, visit https://bit.ly/CRA-PWA'
4747
);
4848
});
4949
} else {
@@ -71,7 +71,7 @@ function registerValidSW(swUrl, config) {
7171
// content until all client tabs are closed.
7272
console.log(
7373
'New content is available and will be used when all ' +
74-
'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
74+
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
7575
);
7676

7777
// Execute callback

0 commit comments

Comments
 (0)