[2주차] 이규호 미션 제출합니다. #9

kyuhho · 2023-09-22T10:07:01Z

2주차 미션: React-Todo

후기

구현하고 싶은 기능도 많고, 피드백 사항도 전부 반영하고자 했지만 과제에 치여 큰 차이점이 없어 아쉽네요... vanilla js로 구현하고 똑같이 React로 구현해보니 더 깊은 이해도가 생기고, 또 성장할 수 있는 경험이였습니다! 저번에 피드백 받은 semantic tag, css 색상 변수로 선언, 이것저것 전부 체크하나가며 구현했고, 추가로 card에 색상도 추가했습니다! 색상을 주제별로 카테고리화 하고, 모바일에서도 맞게끔 구현하고 싶었는데 시간이 부족해서 다음에 기회가 되면 꼭 해보겠습니다!!😊

배포

이규호 TODOlist

Key Questions

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

기존의 DOM을 반복적으로 직접 조작하면, 그만큼 브라우저는 렌더링을 하며 자원을 많이 쓰게 되는 문제가 발생한다. 브라우저 렌더링은 HTML을 parsing하여 트리를 생성하는데 이 과정을 계속해서 반복하게 되는 것이다.

virutal DOM은 DOM을 추상화한 가상의 객체라고 볼 수 있다. virtual DOM에 적용하는 변경사항을 모아뒀다가, 한번에 반영하여 DOM을 수정한다. 해당 동작을 React와 같은 프레임워크가 관리하고, virtual DOM을 통해 렌더링의 자원 소모를 해결한다.
미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?

저번 과제를 통해 느꼈듯이 DOM을 직접 관리하지 않고 훅을 통해 여러 데이터를 관리할 수 있다는 점에서 상당히 편리함을 느꼈다.
styled-component와 같은 라이브러리를 통해 vanilla js에서 구현하기 복잡한 로직도 간단히 구현할 수 있었다.
component 단위로 구현하기 때문에 코드 가독성이 좋다.

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

React에서 상태란 컴포넌트 내부에서 변경할 수 있는 값을 의미한다.
리액트 컴포넌트에 저장한 데이터가 변화하면 UI도 자동으로 갱신된다.

useState
useState는 React 라이브러리 내장 훅으로 함수형 컴포넌트에서 state를 가지게 해준다. state 변수를 업데이트하려면 useState에서 반환된 setter 함수 호출을 통해 새로운 값을 parameter로 넘김으로서 값을 변경한다.
Context API
Context API는 전역 state 관리를 위한 기능을 제공한다. Context API는 종속성을 주입하고, 실질적인 상태관리는 useState, useReducer를 통해 일어난다.
Context API는 컴포넌트간의 props를 넘기지 않고도 state를 사용할 수 있기 때문에 전역적으로 사용되는 데이터들에 자주 사용된다.
Redux
Redux 또한 전역 상태관리를 위한 도구를 제공하는 라이브러리이다.
Redux는 크게 Store, Reducer, Action 세가지로 설명할 수 있다.

Store: 전역 state를 저장하는 곳이다. JavaScript 객체 형태로 저장되어 있으며, 오직 Reducer를 통해 접근할 수 있다.
Action : Reducer에게 보내는 Store에 대한 행동을 정의하는 객체이다. 상태 변화가 필요할 때, action을 발생시킨다.
Reducer : 이전 상태와 액션을 받아, 상태를 반환하는 역할을 하는 함수이다. Redux는 오로지 Reducer를 통해서만 전역 상태를 변경하고 업데이트할 수 있다.

Redux는 오직 Reducer를 통해서 state를 변경할 수 있기 때문에 큰 프로젝트에서 전역 state를 관리하는데 있어 용이하다.

Styled-Components 사용 후기 (CSS와 비교)
먼저 styled-components를 사용하며 첫번째로 좋았던 점은 다른 js파일에 적용되지 않기 때문에 기존의 css에서 스타일이 겹치는 문제를 해결해준다는 점이였다. 해당 문제는 module.css로 해결할 수 있지만, JavaScript 파일 내에서 style을 할 수 있다는 점에서 큰 장점을 가진다.

두번째로 좋은 점은 props를 통해 경우에 따라 동적인 UI를 제공하기 편리하다는 점이다. 기존의 css로는 자칫 복잡해질 수 있는 기능들을 간단한 로직으로 구현할 수 있다는 점이 큰 장점이였다.

Leekyuho114

feat : 색상 기능 추가

leejin-rho

과제 수고하셨습니다~

leejin-rho · 2023-09-23T04:50:52Z

src/App.js

+  const [todo, setTodo] = useState(storedTodo);
+  const [newTodo, setNewTodo] = useState("");
+  //count로 수 올려가면서 차례로 색 지정
+  const [cardColor, setCardColor] = useState([


리스트 만들어질 때마다 다른 색 배경으로 한 거 신박하고 멋있어요~!

leejin-rho · 2023-09-23T06:42:38Z

src/App.js

+      <header className="header">
+        <div className="logo">TODO-list</div>
+        <div className="detail">
+          <div>투두리스트를 작성하고 오늘 하루를 기록해요</div>


오 / 늘 떨어지는거 약간 킹받습니다... br 해서 띄우면 좋을 것 같습니다...

앗 떨어지는 줄 몰랐습니다...감사합니다!

leejin-rho · 2023-09-23T06:49:32Z

src/GlobalStyle.js

+import reset from "styled-reset";
+
+const GlobalStyle = createGlobalStyle`
+    ${reset};


저는 css reset한거 좋은 것 같아요! 저도 다음과제부터 해야겠어요

저도 배워갑니다!!! 써봐야겠어요!~!

저도 배워갑니다•••

leejin-rho · 2023-09-23T07:04:11Z

src/components/Clock.js

+      clearInterval(timer);
+    };
+  }, []);
+  const options = {


저는 라이브러리를 사용했는데 이렇게 option으로 하는것도 좋은 것 같습니다

leejin-rho · 2023-09-23T07:06:36Z

src/components/Cards.js

+`;
+const TodoElem = styled.div`
+  margin-left: 30px;
+  text-decoration: ${(props) => (props.checked ? "line-through" : "none")};


체크 누르면 line-through 설정한 것 좋은 것 같습니다

leejin-rho · 2023-09-23T07:08:15Z

src/components/Cards.js

+  const handleChecked = (element) => {
+    const copyTodo = [...todo];
+    const index = copyTodo.findIndex((e) => e === element);
+    copyTodo[index].checked = !copyTodo[index].checked;


저는 done이랑 todo를 아예 나눠서 만들었는데 규호님처럼 checked boolean값을 이용해서 나누는게 더 좋은 것 같습니다~

sujinRo

안녕하세요! 프론트 운영진 노수진입니다🫡

저번 과제의 피드백을 보완하려고 노력하신 것이 느껴지는 과제였습니다!
그리고, todolist card의 배경을 여러 색으로 하는 등 디자인적으로 준 디테일이 많아 좋았습니다~!
이번 과제 수고하셨습니다~

sujinRo · 2023-09-24T06:26:15Z

src/GlobalStyle.js

+import reset from "styled-reset";
+
+const GlobalStyle = createGlobalStyle`
+    ${reset};


저도 배워갑니다!!! 써봐야겠어요!~!

sujinRo · 2023-09-24T06:34:06Z

src/App.css

+:root{
+    --card-color: #ECECEC;
+    --bg-color: black;
+}


색상을 따로 지정해두고 사용하니까 코드가 더 깔끔하네요!

sujinRo · 2023-09-24T06:42:46Z

src/App.css

+    border-radius: 8px;
+}
+.todoCard.checked{
+    transition : opacity 0.3s;


디테일이 좋습니다!!

sujinRo · 2023-09-24T06:45:53Z

src/App.css

+.todoElem{
+    flex:1; /*여백 다 채우게끔*/
+    margin-left:30px;
+}


todoElem의 가로 폭이 따로 지정되어있지 않아서 위와 같이 나오는 것 같아요!!

코드 변경하면서 예외처리를 신경쓰지 못했네요 ㅠㅠ 감사합니다1!

sujinRo · 2023-09-24T06:57:56Z

src/App.js

-    hour12: false, //오전 오후 나누는거 false 처리
+  // + 누르거나 enter 둘다 해당함수 호출
+  const handleAddTodo = () => {
+    if (newTodo.trim() !== "") {


trim()으로 처리해주신 디테일 좋아요~~

mod-siw

안녕하세요! 2주차 코드 리뷰 파트너 변지혜입니다.
깔끔하게 코드 작성해주셔서 덕분에 리뷰하기도 편했고, 하면서 또 많이 배웠습니다!
스타일 컴포넌트 내에서 props로 스타일 항목 지정하신 거 인상깊게 보고 갑니다.
저는 왜인지 종종 실패할 때가 있었는데, 코드 보고 다시 한 번 도전해봐야할 것 같아요!
그럼 2주차 과제도 수고 많으셨고 스터디때 만나요!

mod-siw · 2023-09-24T07:23:15Z

src/App.css

@@ -0,0 +1,87 @@
+@font-face {


GlobalStyle 따로 정의하신 만큼 전체 컴포넌트에 중복되는 속성의 경우 GlobalStyle 사용해도 좋을 것 같아요!

mod-siw · 2023-09-24T07:24:51Z

src/App.js

+      setColorCnt((colorCnt + 1) % 5);
+      setNewTodo("");
+    }
+  };


카드 넘어갈 때마다 다른 색으로 바뀌는 거 신박하네요! 색 지정해주는 방식도 나머지 연산자 활용해서 하신 거 정말 좋은 아이디어인 것 같습니다👍

mod-siw · 2023-09-24T07:26:38Z

src/GlobalStyle.js

+import reset from "styled-reset";
+
+const GlobalStyle = createGlobalStyle`
+    ${reset};


저도 배워갑니다•••

mod-siw · 2023-09-24T07:28:30Z

src/components/Cards.js

+  position: relative;
+  transition: opacity 0.3s;
+  opacity: ${(props) => (props.checked ? "0.5" : "1")};
+  &:hover {


이렇게 스타일 컴포넌트 안에 props 받아와서 설정해주는 거 정말 좋은 것 같아요! 또 3항 연산자 사용해서 깔끔하게 코드 작성된 것 너무 좋습니다...👍

mod-siw · 2023-09-24T07:33:50Z

src/components/Clock.js

+    hour12: false, //오전 오후 나누는거 false 처리
+  };
+  //string으로 만들어 변수로 변환한다.
+  const stringTime = currentTime.toLocaleDateString("ko-KR", options);


날짜뿐만 아니라 시,분,초까지 나타내는 것, 그리고 그 형식을 따로 이렇게 지정할 수 있는 것도 좋네요!!

mod-siw · 2023-09-24T07:39:09Z

src/components/Cards.js

+import "../App";
+import styled, { css } from "styled-components";
+import { useEffect, useState } from "react";
+const TodoCard = styled.div`


저도 1주차 피드백으로 받았던 부분인데, card container div를 만든 다음 height를 지정한 뒤 overflow-y: scroll 속성을 주면 정해진 크기 안에서 카드들을 볼 수 있어서 좋더라구요. 제일 밑에 있는 항목을 삭제하러 내려갔다가 다시 입력하러 스크롤을 올리지 않아도 되는 방식이라 제안 드려봅니다...ㅎㅎ 그리고 스크롤이 생기면 조금 투박하게 생기는데, 이 역시 따로 스타일을 입힐 수 있어요! 저도 공유받은 링크 공유 드리고 갑니다..
스크롤 스타일링

감사합니다!! 지혜님 투두리스트보면서 저도 다음에 써봐야겠다 생각했는데 링크 읽어보겠습니다 ㅎㅎ

fix: 글자 card 넘어가는 오류 수정

fix: description 줄바꿈 수정

kyuhho and others added 12 commits September 19, 2023 21:20

feat : todolist 기초 세팅

7b70be2

style: css 색상 변수로 선언

1b90ebb

fix : react 18 관련 error 수정

2f3f0f5

refactor : clock & cards component 파일로 이동

ca8c2a0

feat : todo 추가하기 구현

31c0cd6

chore : global에서의 flex 선언 제거

1761c96

feat : delete 기능 구현

25aa120

feat : todo체크 기능 구현(styled-component)

474f8ac

feat : localStorage 저장 구현

30ff7ce

Merge pull request #1 from leekyuho114/leekyuho114

12444f3

Leekyuho114

feat : 색상 기능 추가

a904ba5

Merge pull request #2 from leekyuho114/leekyuho114

040a0f2

feat : 색상 기능 추가

leejin-rho reviewed Sep 23, 2023

View reviewed changes

sujinRo reviewed Sep 24, 2023

View reviewed changes

mod-siw reviewed Sep 24, 2023

View reviewed changes

kyuhho and others added 4 commits October 2, 2023 03:44

fix: 글자 card 넘어가는 오류 수정

a90782a

Merge pull request #3 from leekyuho114/leekyuho114

d5f8656

fix: 글자 card 넘어가는 오류 수정

fix: description 줄바꿈 수정

4b077c1

Merge pull request #4 from leekyuho114/leekyuho114

aefd4f1

fix: description 줄바꿈 수정

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[2주차] 이규호 미션 제출합니다. #9

[2주차] 이규호 미션 제출합니다. #9

kyuhho commented Sep 22, 2023 •

edited

Loading

leejin-rho left a comment

leejin-rho Sep 23, 2023

leejin-rho Sep 23, 2023

kyuhho Sep 24, 2023

leejin-rho Sep 23, 2023

sujinRo Sep 24, 2023

mod-siw Sep 24, 2023

leejin-rho Sep 23, 2023

leejin-rho Sep 23, 2023

leejin-rho Sep 23, 2023

sujinRo left a comment

sujinRo Sep 24, 2023

sujinRo Sep 24, 2023

sujinRo Sep 24, 2023

sujinRo Sep 24, 2023

kyuhho Sep 24, 2023

sujinRo Sep 24, 2023

mod-siw left a comment

mod-siw Sep 24, 2023

mod-siw Sep 24, 2023

mod-siw Sep 24, 2023

mod-siw Sep 24, 2023

mod-siw Sep 24, 2023

mod-siw Sep 24, 2023

kyuhho Sep 24, 2023

[2주차] 이규호 미션 제출합니다. #9

Are you sure you want to change the base?

[2주차] 이규호 미션 제출합니다. #9

Conversation

kyuhho commented Sep 22, 2023 • edited Loading

2주차 미션: React-Todo

후기

배포

Key Questions

leejin-rho 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

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

sujinRo 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

Choose a reason for hiding this comment

mod-siw 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kyuhho commented Sep 22, 2023 •

edited

Loading