[2주차] 유세은 미션 제출합니다. #6

SeieunYoo · 2022-03-25T10:41:14Z

안녕하세요 프론트 15기 유세은입니다! 이번에 리액트를 처음 사용해보게 되면서 어려운 점이 많았습니다..리액트 증말 어렵네요..1차 과제때에서 좀 더 많은 기능들을 수행하고 싶었지만 능력이 부족해서 하지 못했습니다 ㅠㅠuseeffect를 사용하려고 했지만 어려운 부분이 있어서 usestate로만 기능을 구현했습니다. 이번에는 디자인 보다는 기능적으로 최대한 구현해보려고 노력했습니다....

배포링크: https://react-todolist2-seieunyoo.vercel.app/

어려웠던 부분

-useeffect를 적재적소에 사용하기 어려워서 usestate만 사용했습니다
-기능별로 컴포넌트를 관리하기 위해서 분리를 하려는데 toDo,setToDo가 계속 사용되어서 분리하기가 어렵더라구요 ㅠㅠ 결국 포기했습니다.. inputForm만이라도 분리하기 위해 코드를 짜보았지만 기능이 구현 되지 않아 실패했습니다 ㅎ.ㅎ..다른 분들 코드를 참고해봤는데 잘 모르겠더라구요.. 주말동안 계속 고민해보겠습니다 콜백(?)을 이용해야 하는 것 같은데 리액트 초짜라서 한계에 부딪혔습니다 ....*
-컴포넌트를 따로 분리를 못해서 styled components도 많이 쓰지 못했습니다. Clock.js만이라도 적용해보려 노력했습니다 그래서 대부분 style.css를 이용했습니다
-시계 구현 : 시계가 실시간으로 반영이 안되네요...왜이럴까요...더 고민해보겠습니다

신경 쓴 부분

-지난 번 코드 리뷰를 반영해서 css적 보기가 조금 나아졌을 것 같습니다!

Key Question

1.Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?

-virual dom이란 react element와 관련된 것으로 실제 dom에 시각적으로 동기화되는 것입니다.

미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?

-코드의 길이가 짧아지고 훨씬 간결하게 쓸 수 있다는 것입니다.

4.React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?

-상태란 컴포넌트 내부에서 선언되는 것으로 여러가지 값들을 관리할 수 있습니다. 상태관리를 위한 라이브러리 redux를 이용할 수 있으며 usestate,setstate를 사용하여 관리할 수 있다.

5.Styled-Components 사용 후기 (CSS와 비교)

-컴포넌트마다 스타일링을 할 수 있다는 점에서 보는 사람의 입장에서 관리하기 용이할 것 같습니다.

전체적으로 느낀 점

-컴포넌트를 기능적으로 분리한다는 게 얼마나 어려운 일인지 알았습니다. App.js에서 전부 만들고 분리하려니까 정말 어려웠습니다....제 코드를 리뷰하실 분들께 죄송하다는 말씀 드리고 싶네요 ㅠㅠㅠ 리액트 1주일만에 공부하기에는 힘들고 배워야할 부분이 많은 것 같습니다 ! 주말동안 더 고민해보겠습니다 ㅠㅠ

+)수정완료
todo,done 컴포넌트 분리 완료

+)수정 중
1.Clock 수정
2.inputform도 분리
3.중복되는 styled component 처리

corinthionia

안녕하세요 세은 님 🙌🏻

React 어렵다고 하셨는데 굉장히 잘 구현해 주셨는데요?! 필수 기능들도 모두 잘 동작하고 css는 흠잡을 데가 없네요! 앞으로 스터디에서 React와 함께 styled-components를 사용할 예정이라 이 부분에 대해서는 확실히 공부하고 넘어가는 게 좋을 것 같습니다. 또 몇 가지 코멘트 남겨 드렸으니 확인해 주세요~

과제하시느라 고생 많으셨고 스터디 시간에 뵐게요~

corinthionia · 2022-03-25T12:19:15Z

src/clock.js

@@ -0,0 +1,22 @@
+import styled from "styled-components";


로컬에서 실행 시 이 부분 때문에 에러가 나네요! package.json 파일을 보니 styled-components를 설치하지 않으신 것 같은데 다음 명령어를 실행해 먼저 설치하신 다음 사용해 보세요~

둘 중 하나만 실행하시면 됩니다.

yarn add styled-components npm install styled-components

간단한 사용법은 이 글을 읽어 보세요!

다른 프로젝트에서 데모로 실행하면서 설치하는 걸 잊어버렸습니다 !! ㅠㅠ 감사합니다!!

corinthionia · 2022-03-25T12:25:22Z

src/App.js

+  const [toDo, inputToDo] = useState("");
+  const [toDos, setToDos] = useState([]);


toDo와 toDos가 헷갈릴 수 있을 것 같아요

Suggested change

const [toDo, inputToDo] = useState("");

const [toDos, setToDos] = useState([]);

const [toDo, inputToDo] = useState("");

const [toDoList, setToDoList] = useState([]);

이런 식으로 작성하는 게 더 좋아 보입니다

훨씬 깔끔하네요! 감사합니당

corinthionia · 2022-03-25T12:28:41Z

src/App.js

+      if (toDo === "") {
+        return;
+      }
+      setToDos((currentArray) => [toDo, ...currentArray]); //입력받은 걸 배열에 넣음


이런 식으로 작성하면 코드를 더 간결하게 짤 수 있겠죠?

Suggested change

if (toDo === "") {

return;

}

setToDos((currentArray) => [toDo, ...currentArray]); //입력받은 걸 배열에 넣음

if (toDo) {

setToDos((currentArray) => [toDo, ...currentArray]); //입력받은 걸 배열에 넣음

}

corinthionia · 2022-03-25T12:30:11Z

src/App.js

+      if (toDo === "") {
+        return;
+      }
+      setToDos((currentArray) => [toDo, ...currentArray]); //입력받은 걸 배열에 넣음


spread operator로 새 배열을 만들어 state를 변경하신 점 아주 칭찬드립니다! 👍🏻👍🏻

corinthionia · 2022-03-25T12:32:52Z

src/App.js

+
+    const moveDoneButton = (item,index) =>{
+
+      movetoDos((current) => [item, ...current]); //Done 리스트의 배열로 추가됨


이 부분도 이름을 명확하게 해 주시는 게 좋습니다

Suggested change

movetoDos((current) => [item, ...current]); //Done 리스트의 배열로 추가됨

setDoneToDoList((doneToDoList) => [item, ...doneToDoList]); //Done 리스트의 배열로 추가됨

훨씬 명확하네요,,,! 감사합니다 ㅠ.ㅠ

corinthionia · 2022-03-25T12:34:23Z

src/App.js

+  const [toDo, inputToDo] = useState("");
+  const [toDos, setToDos] = useState([]);
+  const [doneToDos, movetoDos] = useState([]); 


setter의 이름은 보통 아래와 같이 set + State 형태로 짓습니다.

Suggested change

const [toDo, inputToDo] = useState("");

const [toDos, setToDos] = useState([]);

const [doneToDos, movetoDos] = useState([]);

const [toDo, setToDo] = useState("");

const [toDoList, setToDoList] = useState([]);

const [doneToDoList, setDoneToDoList] = useState([]);

useState에 사용하는 네이밍 패턴에 대해서는 저도 처음에 많이 헷갈렸는데요,
(물론 아직도 헷갈립니다)
세은님께서 작성하신 코드들을 보면 기본적인 감각이 있으셔서
React에 더 익숙해지실수록 지금보다도 좋은 네이밍을 작성해 주실 것 같아 기대됩니다!

corinthionia · 2022-03-25T12:48:37Z

src/App.js

-      <h1>15기 화이팅~</h1>
-    </div>
+    <div className="center">
+    <Clock></Clock>


이렇게 태그 사이에 어떠한 내용도 존재하지 않는 경우 React에서는 self-closing 형식으로 사용할 수 있답니다

Suggested change

<Clock></Clock>

<Clock />

감사합니다!! 코드에 그대로 반영하겠습니다^-^

corinthionia · 2022-03-25T12:52:06Z

src/App.js

+        type="text"
+        placeholder="할 일을 입력하세요"
+      />
+      <span className = "toDoButton" onClick={submitInput}> +</span>


이런 식으로 공백을 이용하는 것보다는 css에서 margin을 이용해 간격을 띄우는 방법이 더 나을 것 같아요

corinthionia · 2022-03-25T12:53:32Z

src/App.js

+      <ul className ="todo-box">
+      <span className="title">✍️To Do({toDos.length})</span>
+    {toDos.map((item, index) => (
+    <li key={index}>


key 값으로 map()의 index를 사용하는 방법은 바람직하지 않습니다. key를 사용하는 이유가 불필요한 리렌더링의 방지인데, 컴포넌트가 리렌더링 될 때마다 key 값이 매번 다시 설정되면서 결국 모든 컴포넌트가 리렌더링 되는 문제가 발생하기 때문입니다!

key를 사용하는 이유와 주의할 점에 대해서 저도 배우고 갑니다!

아 그렇군요 ..! index 말고 다른 id를 써야하는 건가요?

corinthionia · 2022-03-25T12:56:15Z

src/App.js

+<ul className = "done-box">
+  <span className="title">👻Done({doneToDos.length})</span>
+    {doneToDos.map((item, index) => (
+    <li className ="done-list" key={index}>
+   <span onClick={() => moveToDoButton(item,index)}>📂 </span>
+   {item}
+   <span onClick={() => deleteDoneButton(index)}> ❌</span>
+   </li>
+))}
+</ul>


이 부분은 위에서도 똑같이 반복되니 컴포넌트로 따로 빼서 중복을 줄여 보는 것도 좋겠네요~

S-J-Kim

세은님 안녕하세요

프론트엔드 멘토 김선종입니다.

1주차 과제에서 구현하신 시계를 이번에도 구현하려고 하신 모습이 인상적입니다. 하지만 setInterval을 리액트에서 사용하는 방법은 살짝 까다로운데요, useEffect를 사용하면 구현이 가능합니다. 꼭 관련하여 찾아보셔서 구현하실 수 있게되었으면 좋겠네요.

과제 하느라 고생하셨습니다

S-J-Kim · 2022-03-26T08:16:21Z

src/clock.js

+   function Clock() {
+    const date = new Date();
+
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    const seconds = String(date.getSeconds()).padStart(2, "0");
+
+
+
+   return <StyledButton>{`${hours}:${minutes}:${seconds}`}</StyledButton>;
+
+}
+
+setInterval(Clock, 1000);


시계가 왜 실시간으로 동작하지 않았을까요? setInterval을 통해 1초에 한번씩 시계 컴포넌트를 실행하고는 있습니다. 하지만 잘 생각해보면 이 interval은 App 컴포넌트에서 실행되지 않습니다.

실제로 리액트에서 setInterval을 사용하는 방법은 꽤 까다로운데요, 함수형 컴포넌트는 리렌더링이 될 때마다 함수가 실행되기 때문에, interval 또한 새로 초기화됩니다. 리액트에서 setInterval을 사용하는 방법

역시 useeffect를 써야하는군요 ㅠㅠ 감사합니다!!

poodlepoodle

안녕하세요, 세은님. 1주차에 이어 2주차에서도 코드 리뷰 파트너가 된 최어진입니다.
세은님께서 작성하신 코드를 보면 정말 열심히 노력하시고 시간 투자를 하신다는 느낌이 들어요.
저는 아직도 제 코드 스타일보다는 당장 결과로 만들어낼 수 있는 코드 스타일을 많이 가져다 쓰는데,
그런 점에서 제가 세은님께 가장 배울 점이라고 생각합니다.
별개로 저번 주차 리뷰에서 다음에 다시 코드 리뷰 파트너가 된다면
마감 기한을 꼭 지켜서 코드 리뷰하시는 데 불편하지 않도록 하겠다고 했는데,
입이 두 개라도 할 말이 없네요........
이따가 스터디 때 뵙게 되면 용서를 구하겠습니다...ㅠㅠ
🥲

poodlepoodle · 2022-03-27T06:18:29Z

src/App.js

+      <ul className ="todo-box">
+      <span className="title">✍️To Do({toDos.length})</span>
+    {toDos.map((item, index) => (
+    <li key={index}>


key를 사용하는 이유와 주의할 점에 대해서 저도 배우고 갑니다!

poodlepoodle · 2022-03-27T06:20:32Z

src/background.js

+    "#ffc048",
+    "#ffdd59"
+
+    ];


컬러 맵을 정하고 코딩하는 점에 대해서는 저번 세은님 코드에서도 너무 좋다고 느낀 부분인데
제 코드 리뷰에서 선종님께서 추천해 주신 ThemeProvider와 함께 사용하면
꽤 그럴듯한 테마 관리 패턴이 되지 않을까 싶습니다.
영감 주셔서 감사해요!

좋은 자료 감사합니다 ! 디자인은 역시 어렵네요 ㅠ.ㅠ

저도 배우고 감니당~

poodlepoodle · 2022-03-27T06:24:56Z

src/App.js

+  const [toDo, inputToDo] = useState("");
+  const [toDos, setToDos] = useState([]);
+  const [doneToDos, movetoDos] = useState([]); 


useState에 사용하는 네이밍 패턴에 대해서는 저도 처음에 많이 헷갈렸는데요,
(물론 아직도 헷갈립니다)
세은님께서 작성하신 코드들을 보면 기본적인 감각이 있으셔서
React에 더 익숙해지실수록 지금보다도 좋은 네이밍을 작성해 주실 것 같아 기대됩니다!

sungwoo-shin

안녕하세요 리뷰 파트너 신성우 입니다. 하루 늦게 리뷰 하는것을 이해해주셔서 감사합니다! 다른 분들께서 코멘트를 남겨주셔서 많은 코멘트를 드리지 못했네요. 컴포넌트 단위 설계에 관해서는 발표시간에 말씀드렸던 리액트 공식문서나 다른 자료를 참고하시면 감을 잡으실 수 있을것 같습니다~ 이번주 과제도 저희 화이팅 해요!

sungwoo-shin · 2022-03-28T08:26:34Z

src/App.js

+      if (toDo === "") {
+        return;
+      }
+      setDoneToDoList((currentArray) => [toDo, ...currentArray]); //입력받은 걸 배열에 넣음
+      inputToDo("");
+


저도 이렇게 작성된 코드가 있어서 프짱님께서 지적해 주셨습니다. 많이 사용되는 패턴인데 아무것도 리턴하지 않는 if문 사용은 지양하는것이 좋은것 같습니다. 해당 코드는 다음과 같이 개선할 수 있습니다.

if (toDo) { setDoneToDoList((currentArray) => [toDo, ...currentArray]); //입력받은 걸 배열에 넣음 inputToDo(""); };

sungwoo-shin · 2022-03-28T08:37:03Z

src/background.js

+    "#ffc048",
+    "#ffdd59"
+
+    ];


저도 배우고 감니당~

sungwoo-shin · 2022-03-28T08:45:42Z

src/style.css

+    width: 300px;
+    height: 50px;
+    border-radius: 9px;
+    font-family: 'SuncheonB';


body에서 적용한것을 중복해서 적용하셨습니다~

sungwoo-shin · 2022-03-28T08:47:29Z

src/style.css

+
+}
+
+.toDo{


CSS 코드는 태그 계층 순서에 맞추어 작성하는것이 가독성에 좋은것 같습니다.

sungwoo-shin · 2022-03-28T08:48:57Z

src/style.css

+
+.input-box{
+
+    font-family: 'SuncheonB';


역시 중복 입니다~

YoommY2 added 12 commits March 25, 2022 15:28

css:Background.js

c373848

Clock.js

a9ae2e3

css in js : clock.js

017d1e3

prettierrc

66eddc7

Input form

b93a1a7

usestate를 통해 toDo와 toDos 관리

4b31b4d

input 설명 추가

9c7dc48

css 사용

bffe993

todolist에서 이동과 삭제 구현

11f9be4

donelist에서 이동과 삭제 구현

86baa08

style.css

1a80341

f

69e228c

corinthionia reviewed Mar 25, 2022

View reviewed changes

S-J-Kim reviewed Mar 26, 2022

View reviewed changes

poodlepoodle reviewed Mar 27, 2022

View reviewed changes

YoommY2 added 8 commits March 27, 2022 16:33

style: styled components install

01d0f97

modified: donelist nameing

2ac5314

modified: toDo.js + styled components

cf4f6da

modified : styled components in js

87c6f95

modified: done.js

d2db47d

modified: styled components in done.js

ccf83f3

modified : 중복된 스타일링 제거

e8fa5c5

modified : Clocked component

34f5101

itsnowkim closed this Mar 27, 2022

itsnowkim reopened this Mar 27, 2022

sungwoo-shin reviewed Mar 28, 2022

View reviewed changes

YoommY2 added 4 commits March 29, 2022 20:37

refactor : todojs & style for list

96aadaa

style : todolist donelist design using props

2bc838e

refactor : js in ts

bcf61ef

build : eslintrc add

c919dc0

itsnowkim closed this Mar 31, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[2주차] 유세은 미션 제출합니다. #6

[2주차] 유세은 미션 제출합니다. #6

SeieunYoo commented Mar 25, 2022 •

edited

Loading

corinthionia left a comment •

edited

Loading

corinthionia Mar 25, 2022 •

edited

Loading

YoommY2 Mar 27, 2022

corinthionia Mar 25, 2022

YoommY2 Mar 27, 2022

corinthionia Mar 25, 2022

corinthionia Mar 25, 2022 •

edited

Loading

corinthionia Mar 25, 2022

YoommY2 Mar 27, 2022

corinthionia Mar 25, 2022 •

edited

Loading

poodlepoodle Mar 27, 2022

corinthionia Mar 25, 2022

YoommY2 Mar 27, 2022

corinthionia Mar 25, 2022

corinthionia Mar 25, 2022

poodlepoodle Mar 27, 2022

SeieunYoo Mar 27, 2022

corinthionia Mar 25, 2022

S-J-Kim left a comment

S-J-Kim Mar 26, 2022

SeieunYoo Mar 27, 2022

poodlepoodle left a comment

poodlepoodle Mar 27, 2022

poodlepoodle Mar 27, 2022

SeieunYoo Mar 27, 2022

sungwoo-shin Mar 28, 2022

poodlepoodle Mar 27, 2022

sungwoo-shin left a comment

sungwoo-shin Mar 28, 2022

sungwoo-shin Mar 28, 2022

sungwoo-shin Mar 28, 2022

sungwoo-shin Mar 28, 2022

sungwoo-shin Mar 28, 2022

		const [toDo, inputToDo] = useState("");
		const [toDos, setToDos] = useState([]);


		const moveDoneButton = (item,index) =>{

		movetoDos((current) => [item, ...current]); //Done 리스트의 배열로 추가됨

	movetoDos((current) => [item, ...current]); //Done 리스트의 배열로 추가됨
	setDoneToDoList((doneToDoList) => [item, ...doneToDoList]); //Done 리스트의 배열로 추가됨


		}

		.toDo{

[2주차] 유세은 미션 제출합니다. #6

[2주차] 유세은 미션 제출합니다. #6

Conversation

SeieunYoo commented Mar 25, 2022 • edited Loading

어려웠던 부분

신경 쓴 부분

Key Question

전체적으로 느낀 점

corinthionia left a comment • edited Loading

Choose a reason for hiding this comment

corinthionia Mar 25, 2022 • 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

Choose a reason for hiding this comment

corinthionia Mar 25, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

corinthionia Mar 25, 2022 • 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

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

S-J-Kim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

poodlepoodle 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

Choose a reason for hiding this comment

sungwoo-shin 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

Choose a reason for hiding this comment

SeieunYoo commented Mar 25, 2022 •

edited

Loading

corinthionia left a comment •

edited

Loading

corinthionia Mar 25, 2022 •

edited

Loading

corinthionia Mar 25, 2022 •

edited

Loading

corinthionia Mar 25, 2022 •

edited

Loading