[2주차] 김지원 미션 제출합니다. #10

geeoneee · 2023-09-22T12:16:50Z

🟪 배포링크

https://react-todo-18th-cyan.vercel.app/

🟪 결과화면

🟪 KEY QUESTIONS

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

Virtual-DOM : 가상 Document Object Model의 약어로, 웹 애플리케이션의 성능을 향상시키고 개발자가 웹 애플리케이션을 더 쉽게 관리할 수 있도록 도와주는 프로그래밍 개념. (React의 장점 중에 하나가 Virtual-DoM 이라는 것이다)

이점

성능 향상:
Virtual-DOM은 브라우저의 실제 DOM과 동기화되는 가상 트리로써 작동함. 웹 애플리케이션의 상태 변경 시, 먼저 가상 DOM에 이를 반영하고, 이전 가상 DOM과 비교하여 변경된 부분만 실제 DOM에 적용. 이로써 불필요한 DOM 조작을 최소화하고 성능을 향상시킴.
빠른 업데이트:
Virtual-DOM은 빠른 업데이트를 가능하게 합니다. 상태 변화를 가상 DOM에 먼저 적용하고, 변경 사항을 실제 DOM에 일괄적으로 적용함으로써 빠른 UI 업데이트를 지원합니다.

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

저번 미션에 비해 이번 React 미션을 진행하면서 가장 크게 느낀 장점은 리액트가 컴포넌트 기반 아키텍처 라는 점입니다. UI를 여러 독립적인 컴포넌트로 나누다보니, 코드를 재사용할 때 편하다는 것을 다시 한 번 느끼게 되었습니다. 또다른 장점은 단방향 데이터 흐름 이라는 점인데, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, 자식 컴포넌트는 상태 변경을 부모에게 알리는 방식으로 데이터 관리가 최소화된게 느껴져졌습니다.

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

React에서 "상태(State)"란 컴포넌트의 데이터를 나타내는 것을 의미. 상태는 컴포넌트의 변화를 추적하고 렌더링에 영향을 주는 데이터를 저장하는 데 사용됨. React 컴포넌트의 상태는 컴포넌트 내부에서만 관리되며, 컴포넌트가 렌더링될 때 상태의 변경 여부에 따라 UI가 업데이트됨.

방법

useState Hook
this.state

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

CSS 파일을 따로 작성하는 식으로만 해오다가 Styled-Components를 처음 사용해보니 너무 당황스러웠습니다😅 그래도 적응하고 쓰다보니 같은 파일 내에서 바로 CSS 작성이 가능해 편리함을 느꼈어요! 요즘은 Styled-Components를 사용하는게 트랜드라고 하던데, CSS파일을 따로 작성하는 것과 Styled-Components를 쓰는 방법 모두 장단점이 있는 것 같아 프로젝트 상황에 맞춰 쓰려고 합니다.😀

🟪 Overview

수정 기능 추가
localStorage 오류 수정
화면 움직임 오류 수정
moveTodo 오류 수정
파비콘
페이지 title

🟪 느낀 점

저번 미션을 하다가 다시 리액트로 돌아오니 상대적으로 수월했던 것 같습니다. 다만 저번 미션의 여러 오류를 수정하느라 시간이 오래 걸렸어요🥲
그래도 완성하고 나니 뿌듯하네요 😌 Styled-Components가 익숙치 않았는데, 써보니 상당히 편리하다는 것을 느꼈습니다. 앗 그리고 기능별로 commit 남기려고 최대한 노력해보았습니다. 다음엔 더...

moong23

안녕하세요
프론트엔드 운영진 김문기입니다~!

js로 했던 과제를 단순히 옮기는것에 그치지 않고 feature를 추가하여 개발해오신 모습에 박수를 보냅니다 👏👏👏👏👏

한주동안 과제하느라 고생 많으셨구, 다음 과제도 화이팅입니다!!! 🔥🔥🔥

moong23 · 2023-09-22T18:05:37Z

src/App.js

+const GlobalStyle = createGlobalStyle`
+@font-face{
+  font-family: "양진체";
+  src: url("https://cdn.jsdelivr.net/gh/supernovice-lab/[email protected]/yangjin.woff")
+    format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+  html, body, #root{
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+`;


css reset을 해주신점 너무 좋아요!
이를 통해 통일된 디자인을 바탕으로 개발자의 의도대로 프로세싱을 할 수 있을 것 같습니다.
Styled-Component에서 사용할 수 있는 Styled-normalize 참고자료
도 있으니 한번 써보면 좋을것같습니다~!

오 문기님이 알려주신 styled-normalize 이용하면 더 쉽게 css reset 할 수 있겠네요! 피드백 감사합니다:)

moong23 · 2023-09-22T18:09:05Z

src/Clock.js

+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setTime(new Date());


이 부분은 매초 Date객체를 생성하는데, 기존의 time에서 1초를 더해주는 코드로 대체해도 괜찮을 것 같아요~!

moong23 · 2023-09-22T18:09:49Z

src/Clock.js

+  const timeOptions = {
+    hour12: false, // 24 시간 형식 사용
+    hour: "2-digit", // 항상 두자릿수로 표현
+    minute: "2-digit",
+    second: "2-digit",
+  };


저는 시간이나 날짜 관련해서는 moment 라이브러리를 주로 사용해서 이러한 timeOption을 줄 수 있는지 몰랐는데, 이를 사용하는것도 좋은 방법이네요!

src/TodoItem.js

src/TodoList.js

moong23 · 2023-09-22T18:21:54Z

src/TodoList.js

+    const localData = localStorage.getItem("todos");
+    if (localData) {
+      const parsedDataList = JSON.parse(localData);
+      setData(parsedDataList);
+    }


이 부분은 이렇게 간단화할 수 있을 것 같습니다!

Suggested change

const localData = localStorage.getItem("todos");

if (localData) {

const parsedDataList = JSON.parse(localData);

setData(parsedDataList);

}

setData(JSON.parse(localStorage.getItem('todos')||'[]'));

moong23 · 2023-09-22T18:23:42Z

src/TodoList.js

+      isDone: false,
+    };
+
+    const newData = [...data, newItem];


props를 넘겨줄 때도 그렇고, 지원님께선 spread 연산자를 매우 잘 사용하시는 것 같아요!
최고에요👍👍👍

src/TodoList.js

moong23 · 2023-09-22T18:31:29Z

src/ListContainer.js

+  const doneData = data.filter((item) => item.isDone);
+
+  return (
+    <div className="ListContainer">


이번 과제에 지원님께서는 TodoBox와 DoneBox 사이를 margin값을 통해서 띄워주셨는데,
ListContinaer class에 flex값을 주고 flex layout을 적용해보면 확장성에 더욱 도움이 될 것 같습니다!

예를들어 클라이언트측에서 화면을 400 * 600에서 600 * 800으로 변경요청이 들어오면
현재의 코드상으로는 margin값들을 직접 찾아서 조정해주어야하지만,
flex layout으로 구성했다고 하면 부모 컴포넌트의 숫자만 조정해주면 됩니다.

이러한 경우를 생각해서 에자일한 개발습관을 들이는 연습 해보아도 재밌을 것 같아요~!

rmdnps10

이번 과제 하느라 고생 많으셨습니다!
피드백 하면서 저도 많이 배웠습니다 :)

rmdnps10 · 2023-09-22T16:33:06Z

src/Clock.js

+  const timeOptions = {
+    hour12: false, // 24 시간 형식 사용
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  };
+


예전에 .toLocaleTimeString() 을 사용할 때 시간이 올바르게 표시되지 않아, 변환식을 자체적으로 만들어서 적용했던 기억이 있는데 timeOptions 을 이렇게 지정해줄수도 있겠군요!

rmdnps10 · 2023-09-22T16:42:22Z

src/Clock.js

+    const id = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);


언마운트 될 때 clear 해준 거 좋습니다 ㅎㅎ

rmdnps10 · 2023-09-22T20:17:03Z

src/App.js

+  html, body, #root{
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }


css reset도 꼼꼼하게 하셨군요 👍👍
스타일 리셋할때 npm i styled-reset 을 하고, reset 임포트해 createGlobalStyle에 안에 넣는 식으로 초기화화 할 수도 있을 것 같습니다!

rmdnps10 · 2023-09-22T20:22:49Z

src/ListContainer.js

+//CSS
+const Container = styled.div`
+  width: 20rem;
+  height: 10rem;


스타일링을 할 때 웹 접근성을 위해 rem 단위로 개발하신 것이 인상깊었습니다! 저도 rem 단위로 스타일링하는 습관을 들여야겠어요:)

rmdnps10 · 2023-09-22T20:32:40Z

src/TodoInput.js

+    if (e.key === "Enter") {
+      if (e.nativeEvent.isComposing) return;
+      handleSubmit();


이벤드 핸들러의 코드가 좀 낯설어서 구글링해봤는데, 한글 입력 시 함수가 두 번 호출되는 경우까지 고려하셨네요!!
배워갑니다 👍👍

헉 맞아요! 한글만 중복 랜더링이 되어서
e.nativeEvent.isComposing을 통해 해결했어요! 링크 남겨드려용
한글중복랜더링

rmdnps10 · 2023-09-22T20:46:45Z

src/TodoList.js

+  display: flex;
+  justify-content: center;
+  font-size: 30px;
+  margin: 0 auto;


Title에 display: flex 와 justify-content: center; 가 있어서 이 부분은 지워도 좋을 것 같습니다!
혹은 display: flex; 와 justify-content: center;를 지운 후에
margin: 0 auto; 혹은 text-align: center;을 적용할 수 있을 것 같아요!

rmdnps10 · 2023-09-22T20:53:24Z

src/TodoInput.js

+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;


컴포넌트에 margin 값을 설정할 때, 되도록이면 한 방향으로 하는 게 이후에 발생할 수도 있는 마진겹침 현상을 예방할 수 있다고 합니다! 혹은 margin 자체를 아예 컴포넌트 단위로 설정하여, 컴포넌트의 재사용성을 늘릴 수도 있을 거 같습니당
참고자료1

rmdnps10 · 2023-09-22T21:03:28Z

src/TodoItem.js

+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;


처음 보는 css속성이어서 검색해봤는데, 이렇게 하면 특별한 코드로직 없이 말줄임(...)을 구현할 수 있겠네요!
상황에 따라 정말 유용하게 쓸 수 있을 것 같습니다, 하나 배우고 갑니다!

leejin-rho

과제 수고하셨습니다~!

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

src/App.js

+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }


css reset 저는 안했는데 저도 다음 과제에서는 해야겠어요~!

leejin-rho · 2023-09-23T06:34:09Z

src/ListContainer.js

+const ListContainer = ({ onEdit, onDelete, moveItem, data }) => {
+  // isDone 값이 false인 데이터만 필터링 (todo container에 띄우기)
+  const todoData = data.filter((item) => !item.isDone);
+


전 아예 따로 만들어줬는데 isDone boolean값을 이용해서 나누는게 더 좋은 것 같습니다~!

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

src/Clock.js

+    return () => clearInterval(id);
+  }, []);
+
+  const timeOptions = {


저도 fns라이브러리를 사용했는데 이렇게 옵션으로 하는것도 좋은 방법인 것 같습니다~

leejin-rho · 2023-09-23T07:55:12Z

src/TodoInput.js

+      onCreate(content);
+      setContent("");
+    } else {
+      alert("할 일을 1자 이상 입력하세요.");


Alert로 알려주는거 좋은 것 같습니다

leejin-rho · 2023-09-23T07:56:55Z

src/TodoInput.js

+const InputBox = styled.input`
+  width: 200px;
+  flex: 1;
+  padding: 0.8rem;


지원님은 다 rem으로 하셔서 좋은 것 같습니다..! 저는 아직 익숙하지가 않아 사용하지 못했는데 저도 앞으로 사용하는 연습을 해야할 것 같아요!

leejin-rho · 2023-09-23T07:58:12Z

src/TodoItem.js

+                }
+              }}
+            >
+              🗑


오 저는 그냥 아이콘을 넣었는데 이런식으로 넣을 생각은못했어요 좋은것 같습니다~!

Co-authored-by: Moon Ki, Kim <[email protected]>

geeoneee added 17 commits September 21, 2023 02:11

feat : add favicon, title

4ff49f9

feat: TodoList 뼈대

e0ee46e

feat : clock.js

87c055f

feat : TodoInput, ListContainer 데이터 추가 기능 작성

3e73431

feat : 삭제 기능 추가

b7acc9c

feat : count 기능 추가

504598f

feat : moveItem 기능 추가

7c9cbab

feat : css 작성

edcff18

fix : 한글 중복랜더링

9c361b7

feat : localstorage

80f1066

feat : 수정 기능 추가

e67856e

style : 수정 기능 css

b019e92

배포용

29997f6

chore: 주석 추가

1655f50

chore : container의 countTitle 변경

fe68124

fix : word-break 추가

6bafe2e

chore : css 수정 및 doneData 삭제 수정

da866d4

moong23 reviewed Sep 22, 2023

View reviewed changes

rmdnps10 reviewed Sep 22, 2023

View reviewed changes

leejin-rho reviewed Sep 23, 2023

View reviewed changes

geeoneee and others added 2 commits September 24, 2023 15:29

Update src/TodoList.js

c830c4d

Co-authored-by: Moon Ki, Kim <[email protected]>

Update src/TodoItem.js

e369d99

Co-authored-by: Moon Ki, Kim <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[2주차] 김지원 미션 제출합니다. #10

[2주차] 김지원 미션 제출합니다. #10

geeoneee commented Sep 22, 2023 •

edited

Loading

moong23 left a comment

moong23 Sep 22, 2023

geeoneee Sep 24, 2023

moong23 Sep 22, 2023

moong23 Sep 22, 2023

moong23 Sep 22, 2023

moong23 Sep 22, 2023

moong23 Sep 22, 2023

rmdnps10 left a comment

rmdnps10 Sep 22, 2023

rmdnps10 Sep 22, 2023

rmdnps10 Sep 22, 2023

rmdnps10 Sep 22, 2023

rmdnps10 Sep 22, 2023

geeoneee Sep 24, 2023

rmdnps10 Sep 22, 2023

rmdnps10 Sep 22, 2023

rmdnps10 Sep 22, 2023

leejin-rho left a comment

leejin-rho Sep 23, 2023

leejin-rho Sep 23, 2023

leejin-rho Sep 23, 2023

leejin-rho Sep 23, 2023

leejin-rho Sep 23, 2023

leejin-rho Sep 23, 2023

[2주차] 김지원 미션 제출합니다. #10

Are you sure you want to change the base?

[2주차] 김지원 미션 제출합니다. #10

Conversation

geeoneee commented Sep 22, 2023 • edited Loading

🟪 배포링크

🟪 결과화면

🟪 KEY QUESTIONS

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

이점

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

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

방법

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

🟪 Overview

🟪 느낀 점

moong23 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

rmdnps10 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

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

geeoneee commented Sep 22, 2023 •

edited

Loading