[2주차] 신유진 미션 제출합니다. #10

paya17 · 2023-03-24T14:59:18Z

배포 링크

https://react-todo-17th-roan.vercel.app/

❗ 제가 todo 아이템을 모아놓은 배열에 대한 주석을 안달고 pr해버렸는데, [ { id: '57346', text: '운동하기', status: 'doing' }, { id: '39847', text: '학교 가기', status: 'done' }, ..] 이런 식으로 데이터를 구성했습니다. todo 아이템이 진행 중('doing')인 상태인지 완료된('done') 상태인지 status를 추가해줬더니 훨씬 개발하기 편하더라구요!
❗ 로컬스토리지 연결하는데 살짝 오류가 나서 아직 구현 중입니다! 얼른 해결해서 커밋해놓겠습니다!

2주차 과제를 마치고...........

이번 과제에서는 투두 아이템들을 전체/진행 중/완료 목록으로 나누어 필터링하는 기능과 투두 아이템의 텍스트를 수정할 수 있는 기능을 추가했습니다.
초반에 정신 놓고 있다가 기능별로 커밋을 못했습니다.... 앞으론 바로바로 커밋을 하는 습관을 들이겠습니다.............
rem 단위를 쓰려고 노력했습니다!
다음 번엔 렌더링 최적화를 해보고 싶습니다!
지금까지 만든 투두 리스트에 기능들을 더 추가하고 보완하여 계속 확장해나갈 계획입니다~! (일단 다짐하기,,,,,,,,,,)

Key Questions

Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
: 가상돔(Virtual DOM)은 실제 DOM 문서를 추상화한 개념이다. 유저의 인터랙션에 따라 상태가 변화할 경우, DOM 요소들이 업데이트 되는데, 일부분이 바뀜에도 전체 DOM을 업데이트 하는 것은 브라우저의 연산에 많은 부담을 준다. 리액트의 Virtual DOM은 상태 변화로 뷰 포트를 업데이트 하기 전에 Virtual DOM에 먼저 적용하고 이후에 최종 변화결과를 DOM에 전달하여 한 번의 렌더링으로 마무리할 수 있다. Virtual DOM이 메모리에 저장된 상태에서 변경 사항들을 먼저 반영한 뒤 기존 DOM과 비교 후 변경된 사항만을 DOM에 전달해 준다. 즉 실제 DOM의 렌더링 횟수를 줄여주므로 성능에 적은 영향을 주게 되는 것이다.
미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?

리액트는 가상돔을 가지고 있어 매번 변화되지 않은 부분까지 불필요하게 렌더링하지 않아 성능이 좋다.
컴포넌트를 사용하여 유지보수에 용이하다.

React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?
리액트에서 상태란 컴포넌트 내부에서 변할 수 있는 값이다. 리액트는 데이터 흐름이 부모->자식의 단방향적인 특징을 가지기 때문에 자식에서 부모의 상태를 바꾸려면 props를 넘겨줘야 한다. 이게 반복되다 보면 props drilling이 심해지고 props depth가 증가해서 불필요한 리렌더링이 일어나는 등 비효율적이기 때문에 상태 관리 라이브러리도 사용하는 것이 좋다.

<상태 관리 라이브러리>

Redux
-최초 라이브러리, 복잡하고 장황한 코드 필요
-오직 하나의 store만 가지며 하나의 객체 트리를 가져서 디버깅이 용이

context api
-provider로 감싸진 부분의 업데이트가 되지 않은 state에도 리렌더링이 일어남
-정적인 데이터 위주로 처리하거나 업데이트가 빈번하지 않을 때 적합

MobX
-리덕스보다 다루기 쉬우나 store가 여러 개가 될 수 있어 상태 변경시 여러 store가 영향을 받을 수 있다는 위험성이 존재

SWR
-stale-while-revalidate, 데이터를 검증하는 동안 stale(cache) 데이터를 사용하는 것
-cache된 데이터를 보여주고 데이터 요청을 보낸 후 새롭게 받은 데이터를 보여주는 것을 의미함

Recoil
-context api와 다르게 업데이트된 state 부분만 리렌더링
Styled-Components 사용 후기 (CSS와 비교)
: 순수 css파일을 사용했을 땐 파일을 왔다갔다 해야돼서 불편했는데, Styled-Components를 사용하여 한 파일에서 css를 처리할 수 있어서 편했습니다.

oyatplum

안녕하세요 이예지입니다!!😻
유진님 이번 주도 과제 하시느라 수고하셨어요~!!

전체, 진행 중, 완료 세 단계로 필터링 해주신 부분 너무 인상 깊었습니다!!👏🏻👏🏻

중복되는 코드도 거의 없이 최대한 간결하게 작성해주신 것 같고 노력한 흔적이 많이 보였어요!!! 수정 기능까지 추가적으로 깔끔하게 구현하신 것도 감탄... 멋졌습니다!!!

너무 잘 봤고 고생하셨습니다!! 스타디 때 봬요~!~😳

oyatplum · 2023-03-26T02:01:28Z

src/App.js

@@ -1,9 +1,77 @@
+import React, { useState } from 'react';


저도 이렇게 사용했었는데 React를 적어주지 않아도 되는 걸 이번 코드 리뷰 하면서 처음 알게 됐어요!!
예린님 과제에서 문기님이 코드 리뷰 해주신 부분 참고하시면 도움 되실 것 같아요!!! 코드 리뷰

oyatplum · 2023-03-26T02:05:22Z

src/App.js

+        onUpdate={onUpdate}
+        filteredTodos={filteredTodos}
+      />
+      <ClearBtn onClick={() => setTodos([])}>CLEAR ALL</ClearBtn>


오~~ 이렇게 모든 투두를 한 번에 지워주는 버튼이 있는 디테일!! 너무 좋은 것 같아용ㅎㅎ👏🏻👏🏻👏🏻

oyatplum · 2023-03-26T02:09:32Z

src/components/TodoList.jsx

+  padding: 1.5rem 3rem;
+  flex-basis: 55%;
+
+  overflow-y: auto;


저는 overflow에 y축 속성을 지정해주지 않아서 투두를 길게 입력했을 경우 x축으로도 스크롤 바가 생기는데 y축으로만 지정해주는 것이 더 깔끔하고 보기 좋은 것 같아요!! 디테일.. 배워갑니당ㅎㅎ💪🏻💪🏻

oyatplum · 2023-03-26T02:16:49Z

src/index.js

 import ReactDOM from 'react-dom';
+import './index.css';
 import App from './App';

 ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
-);
+);


저는 StrictMode를 사용하니까 렌더링이 2번씩(console.log()가 2번씩) 되더라구요!! 혹시 유진님은 이렇게 해도 괜찮으셨나요??
StrictMode는 잠재적인 여러 문제들을 알려주는 장점이 있지만 개발 모드에서만 활성화되고 빌드가 된 후의 프로젝트에서는 비활성화 된다고 해요!!
그래서 빌드할 때 StrictMode를 남겨두는 것이 좋을지, 지우는 것이 좋을지 고민되던데...
혹시 유진님은 어떤 방법이 효율적인지 알고 계시다면 알려주시면 감사하겠습니다!!
이건 제가 참고했던 자료들입니다!!ㅎㅎㅎ 참고자료1 참고자료2

그리구 ReactDOM.render도 리액트 v18부터 사용하지 않기 때문에 나타나는 경고 메세지라고 해서 에러가 뜨던데 이 부분도 괜찮으셨나용???

oyatplum · 2023-03-26T02:19:38Z

src/components/Todo.jsx

+  const [editing, setIsEditing] = useState(false);
+  const [newText, setNewText] = useState(todo.text);
+
+  const handleEditBtnClick = () => {
+    setIsEditing(true);
+    setNewText(todo.text);
+  };


유진님도 수정 기능 추가해주셨네요~!!👏🏻👏🏻👏🏻 저는 투두 목록에서만 수정되도록 했는데 생각해보니 전체, 진행, 완료 필터 모두 수정되도록 하는 것도 좋은 방법인 것 같아요ㅎㅎ

oyatplum · 2023-03-26T02:22:13Z

src/components/Todo.jsx

+const TodoText = styled.label`
+  flex: 1 1 0%;
+  margin-left: 0.6rem;
+  font-size: 1.08rem;
+`;
+
+const EditInput = styled.input`
+  flex: 1 1 0%;
+  margin-left: 0.6rem;
+  padding: 0;
+  font-size: 1.08rem;


유진님은 rem 단위를 굉장히 능숙하게 잘 사용하시는 것 같아요!!! 저는 아직 익숙하지 않은데... 혹시 rem 단위를 잘 쓸 수 있는 꿀팁!! 같은 것 알려주시면 감사하겠습니당ㅎㅎ😆

저도 기준이 궁금해요!! 어떤 기준으로 소수점 둘째자리까지 디테일하게 쓰셨는지..!

JeeeunOh

안녕하세요 프론트운영진 오지은입니다~~~

css 디테일들도 너무 좋았고 투두리스트를 한번에 지울 수 있는 기능도 너무 좋았어요!!!
테스트를 마구마구하다가 리셋시킬 수 있는 좋은 기능인 것 같네요 ㅎㅎ
추가 기능에 대해 고민하신 흔적이 보이는 코드여서 재밌게 봤습니다 ㅎㅎ
다음주 스터디도 화이팅입니당~~!

JeeeunOh · 2023-03-26T08:19:54Z

src/components/AddTodo.jsx

+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (text.trim().length === 0) {


요건 간단하게 if (!text.trim()) { .. } 로 줄일 수 있을 것 같아요!

JeeeunOh · 2023-03-26T08:26:46Z

src/components/Filter.jsx

+  background-color: transparent;
+  border-right: 1px solid rgb(199, 199, 199);
+
+  transition: all 150ms ease-out;


요런 css 디테일 너무 좋아용!!!!

JeeeunOh · 2023-03-26T08:28:04Z

src/components/Todo.jsx

+const TodoText = styled.label`
+  flex: 1 1 0%;
+  margin-left: 0.6rem;
+  font-size: 1.08rem;
+`;
+
+const EditInput = styled.input`
+  flex: 1 1 0%;
+  margin-left: 0.6rem;
+  padding: 0;
+  font-size: 1.08rem;


저도 기준이 궁금해요!! 어떤 기준으로 소수점 둘째자리까지 디테일하게 쓰셨는지..!

JeeeunOh · 2023-03-26T08:28:52Z

src/components/Todo.jsx

+  padding: 0 0.4rem;
+`;
+
+const DeleteBtn = styled.button`


위의 EditCompleteBtn 와 속성이 똑같은데 또 작성해주신 이유가 있을까요??

hmuri · 2023-03-26T09:23:04Z

안녕하세요! 최민주입니다~! 코드 너무너무 잘봤습니다 저번에도 유진님 배포 링크 들어갔던 기억이 있는데 일주일동안 엄청엄청 더 다양하게 기능도 추가하시고, 많이 수정하신 게 굉장히 인상깊었습니다 최고 bb 특히, 수정 기능 너무 좋은 거 같아요!! 그냥 수정 버튼 누르면 바로 그 줄에서 수정처리 할 수 있게 되는 거요 ㅎㅎ 생각만 해보고, 적용은 시도 못해봤는데, 유진님 코드로 말미암아 배울 수 있어서 너무너무 좋았습니다!! 뒤에 배경 이미지도 너무 예뻐요.. ㅎㅎ 스터디에서 뵙겠습니다~!

hmuri · 2023-03-26T09:25:56Z

src/App.js

+  //체크하거나 체크 해제하면 todo의 status가 바뀜(doing<->done)
+  const onUpdateStatus = (updatedTodo) =>
+    setTodos(todos.map((t) => (t.id === updatedTodo.id ? updatedTodo : t)));
+


오오 연산자로 status를 하나 더 추가하셔서 doing과 done을 구분해주셨네요 여기 넘나 깔끔... 이렇게 앞에서 중요한 기능들 딱딱 선언하고 가니까 보기에도, 적용시키기에도 훨씬 편한 거 같아요!! bb

hmuri · 2023-03-26T09:31:56Z

src/components/Filter.jsx

+                  ? todos.length
+                  : todos.filter((t) => t.status === filter.status).length}
+              </span>
+            </button>


우와 아예 Filter 컴포넌트를 따로 만들어주셨군요! App.js부터 쭉 보니까 filter 하나로 다양한 아이템들을 관리해주고, 그 때 그 때 필요한 것들을 배열로 반환해주는 아이디어가 너무 좋은 거 같아요!! 애초에 상태를 잘 설정해놔야 하는군요.. 잘 배웠습니다!!

hmuri · 2023-03-26T09:38:20Z

src/components/Todo.jsx

+  const handleEditBtnClick = () => {
+    setIsEditing(true);
+    setNewText(todo.text);
+  };


여기 수정하기 부분 어떻게 구현하신 건지 엄청 궁금했는데!! 적절한 useState와 속성들의 향연이었군요,, true값을 이용해서 IsEditing과 setNewText를 구분해주신 게 굉장히 눈길이 갑니다. 특히 수정 버튼 체크 됐을 때랑 체크 되지 않았을 때 태그 속성과 아이콘을 정말 간단하게 ? 연산자 활용해서 구현해주신 게 정말 인상깊어요!! 자꾸 박스 만들고, 삭제 시켰다가 다시 생성시켜주고 이런 식으로 생각을 해서 지저분해졌었는데, 저런 식으로 연산자를 잘 활용하면 코드가 한줄로 끝나네요.. 좋은 코드 배워갑니다!!

paya17 added 6 commits March 24, 2023 03:34

feat: 추가,삭제,업데이트,필터링,카운트

143489c

feat: 모든 아이템 삭제하는 clear all

9d109d3

feat: todo 텍스트 수정 기능

edce6e0

fix: todo 텍스트 수정 시 원래 텍스트 받아옴

2b61b0c

style: styled-component로 스타일링

7627963

style: 폰트 적용

4be4406

paya17 changed the title ~~2주차 신유진 미션 제출합니다.~~ [2주차] 신유진 미션 제출합니다. Mar 24, 2023

oyatplum reviewed Mar 26, 2023

View reviewed changes

JeeeunOh reviewed Mar 26, 2023

View reviewed changes

hmuri reviewed Mar 26, 2023

View reviewed changes

paya17 added 2 commits April 4, 2023 19:13

Update README.md

b9da8f6

Update README.md

034e709

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[2주차] 신유진 미션 제출합니다. #10

[2주차] 신유진 미션 제출합니다. #10

paya17 commented Mar 24, 2023 •

edited

Loading

oyatplum left a comment

oyatplum Mar 26, 2023

oyatplum Mar 26, 2023

oyatplum Mar 26, 2023

oyatplum Mar 26, 2023 •

edited

Loading

oyatplum Mar 26, 2023

oyatplum Mar 26, 2023

JeeeunOh Mar 26, 2023

JeeeunOh left a comment

JeeeunOh Mar 26, 2023

JeeeunOh Mar 26, 2023

JeeeunOh Mar 26, 2023

JeeeunOh Mar 26, 2023

hmuri commented Mar 26, 2023

hmuri Mar 26, 2023

hmuri Mar 26, 2023

hmuri Mar 26, 2023

[2주차] 신유진 미션 제출합니다. #10

Are you sure you want to change the base?

[2주차] 신유진 미션 제출합니다. #10

Conversation

paya17 commented Mar 24, 2023 • edited Loading

배포 링크

2주차 과제를 마치고...........

Key Questions

oyatplum left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oyatplum Mar 26, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JeeeunOh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hmuri commented Mar 26, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paya17 commented Mar 24, 2023 •

edited

Loading

oyatplum Mar 26, 2023 •

edited

Loading