[2주차] 정시원 미션 제출합니다 by sebastianrcnt · Pull Request #1 · CEOS-Developers/react-todo-11th

sebastianrcnt · 2020-04-09T09:25:30Z

이번 미션은 지난주 미션보다 난이도가 좀 있었고, 뭘 잘못 건드렸는지 중간에 갑자기 오류가 나서 고치려고 한참을 삽질하다가 결국 해결을 못해서 clone 하고 처음부터 다시 만들긴 했지만 오류 해결을 해보려는 과정에서 의도치 않게 npm과 패키지를 다루는 방법에 대해서 찾아보고 더 공부해보게 되었습니다..... 또한 컴포넌트 스타일링을 할 때 어떻게 하면 반복되는 부분을 정리하고 깔끔하게 코드를 짤 수 있을지를 계속 고민해보고 연습해야 할 것 같습니다. 그리고 Git 에 익숙하지 않아 프로젝트를 할 때 체계적으로 코딩할 단위를 나눠서 하는 것이 아직은 서툰 것 같다고 느꼈습니다.

https://react-todo-11th.sebastianrcnt.now.sh/

greatSumini

고생 많으셨습니다~~
TodoItem 컴포넌트에 React.memo 정말 잘 적용해주셨네요!
TodoList에도 적용해보시면 좋을 것 같습니다 ㅎㅎ
개발자도구에서 style을 복사하는 것보단 직접 작성하시는 연습 해주시면 좋습니다 ㅠㅠ
스타일링에 대한 이해도가 높으면 좋은 컴포넌트 구조를 짜는데 도움이 된답니다.
styled-component 적용 안 된 부분이 많네요!
component의 가독성을 높이기 위해서 return문에선 정말 필수적인 jsx 구조와, prop들만 남겨놓는게 좋아요!
style 같은 부가요소들은 밑쪽에 styled-component로 작성해서 치워놓구요 ㅎ
고생많으셨습니다! 리뷰 확인 및 반영 부탁드릴게요~~

모범 답안도 참고해주세요! 감사합니다 😊
모범답안 링크

greatSumini · 2020-04-11T06:04:49Z

+    const [thisTodo, setThisTodo] = useState({
+    })


Suggested change

const [thisTodo, setThisTodo] = useState({

})

const [form, setForm] = useState({})

thisTodo는 현재 입력중인 todo라는 역할을 잘 설명하지 못 하는 것 같아요!

빈 객체라서 줄바꿈 하지 않아도 될 것 같습니닿

greatSumini · 2020-04-11T06:05:45Z

+    const [thisTodo, setThisTodo] = useState({
+    })
+
+    const inputChangeHandler = (el) => {


함수 이름을 지을때 동사가 맨 앞에 오도록 해주세요!

el이 무엇의 약자인가요..?

Suggested change

const inputChangeHandler = (el) => {

const handleInputChange = (event) => {

greatSumini · 2020-04-11T06:06:15Z

+    })
+
+    const inputChangeHandler = (el) => {
+        const { name, value } = el.target;


destructuring 잘 써주셨네요 👍

greatSumini · 2020-04-11T06:10:39Z

+        if (name === 'dueDate') {
+            if (value.length > 8) {
+                el.target.value = value.slice(0, 8);
+                return;
+            }
+        }
+
+        setThisTodo({
+            ...thisTodo,
+            [name]: value
+        })


Suggested change

if (name === 'dueDate') {

if (value.length > 8) {

el.target.value = value.slice(0, 8);

return;

}

}

setThisTodo({

...thisTodo,

[name]: value

})

setThisTodo({

...thisTodo,

[name]: name === 'dueDate' ? value.slice(0, 8) : value

})

이렇게 리팩토링할 수 있습니다!
slice(0, 8)는 현재 value의 length가 8 미만이면 그냥 안 자르고 그대로 반환하기 때문에 추가로 조건문을 작성할 필요가 없어용

greatSumini · 2020-04-11T06:11:10Z

+            <TimeInput>
+                <p style={{"fontSize":"1.5rem","padding":"0px","margin":"0px"}}>시간</p>
+                <input style={{ "width": "80%", "borderWidth": "1px", "borderStyle": "solid", "borderColor": "rgb(97, 97, 97)", "borderImage": "initial", "padding": "0.5rem 0.8rem" }} name="dueDate" onChange={inputChangeHandler} type="number" placeholder="날짜를 입력하세요 (ex.20200404)"></input>


styled-componet를 사용해주세요 ㅎ ㅠ

greatSumini · 2020-04-11T06:12:36Z

+const areEqual = (prevProps, nextProps) => {
+  return prevProps.id === nextProps.id;
+}
+
+export default React.memo(TodoItem, areEqual);


잘 적용해주셨네요!!! 좋습니다 ㅎ 👍

greatSumini · 2020-04-11T06:13:03Z

-      <TodoItem />
-    </Wrapper>
-  );
+export default function TodoList({ todos, completeTodo }) {


TodoList에도 React.memo를 적용해보세요~

greatSumini · 2020-04-11T06:15:45Z

+    return (
+        <Wrapper>
+            {todos.sort((todo1, todo2) => {
+                return todo1.dueDate < todo2.dueDate ? -1 : todo1.dueDate > todo2.dueDate ? 1 : 0;


sort의 compare 함수는 양수, 0, 음수여부만 판단하기 때문에

Suggested change

return todo1.dueDate < todo2.dueDate ? -1 : todo1.dueDate > todo2.dueDate ? 1 : 0;

return todo1.dueDate - todo2.dueDate;

라고만 해주셔도 됩니다 ㅎ

greatSumini · 2020-04-11T06:16:12Z

+        <Wrapper>
+            {todos.sort((todo1, todo2) => {
+                return todo1.dueDate < todo2.dueDate ? -1 : todo1.dueDate > todo2.dueDate ? 1 : 0;
+            }).map((todo) => (todo.isComplete ? null : <TodoItem key={todo.id} {...todo} completeTodo={completeTodo} />))}


map함수에서 3항연산자를 사용해 선택적으로 return 하는 것 보다 filter함수를 쓰는게 더 좋을 것 같아요!

greatSumini · 2020-04-11T06:16:40Z

+    setCounter(counter + 1);
+    setTodos([
+      ...todos,
+      { id: counter, content, dueDate, isComplete: false }


isComplete 사용하신 것 참신하네요 👍

puba5

전체적으로 너무 멋진 코드였던 것 같아요. 추억이 담긴 미션이네요 ^^

puba5 · 2020-09-12T15:38:52Z

+    }
+
+    // check whether dueDate is valid
+    const dateRegExp = /^\d{8}$/;


정규표현식을 사용해주신 점이 정말 멋있는 것 같아요

puba5 · 2020-09-12T15:39:41Z

+        <div style={{flex:0.3}}></div>
+        <TodoList completeTodo={completeTodo} todos={todos} />
      </Contents>
+      <div style={{position:'fixed', right:0, top:0, padding: '1px', fontSize:'9px', backgroundColor:'grey'}}>CEOS 11기 정시원</div>


style을 inline으로 다는 것은 별로 좋은 습관은 아니랍니다 ㅎㅎ

sebastianrcnt added 5 commits April 9, 2020 00:55

change body font color

bd9e0a2

Modify index.js

7798aad

Modify todo-list.js

a3ce4cb

Modify todo-input.js

a42e455

Modify todo-item.js

5732243

greatSumini self-requested a review April 11, 2020 06:00

greatSumini assigned sebastianrcnt Apr 11, 2020

greatSumini added the mission 귀염뽀짝 미션제출 label Apr 11, 2020

greatSumini reviewed Apr 11, 2020

View reviewed changes

puba5 reviewed Sep 12, 2020

View reviewed changes

	const [thisTodo, setThisTodo] = useState({
	})
	const [form, setForm] = useState({})

	const inputChangeHandler = (el) => {
	const handleInputChange = (event) => {

	return todo1.dueDate < todo2.dueDate ? -1 : todo1.dueDate > todo2.dueDate ? 1 : 0;
	return todo1.dueDate - todo2.dueDate;

Uh oh!

Conversation

sebastianrcnt commented Apr 9, 2020

Uh oh!

greatSumini left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

puba5 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

greatSumini left a comment •

edited

Loading