[2주차] 노이진 미션 제출합니다. #4

leejin-rho · 2023-09-22T08:58:09Z

[2주차]

저번 주에 했던 과제를 그대로 구현하니 스타일을 고민하지 않아도 돼서 좋았습니다..! 대신 저번에 없던 기능들을 조금 더 추가했습니다.. 그리고 간단하지만 라이브러리를 사용하니 더 편하게 개발할 수 있었던 것 같습니다. 그리고 생각보다 시간이 소요돼서 더 빨리 개발하고 싶습니다...
아직 react에 엄청 익숙하지 않아서 공부를 많이 해야할 것 같습니다.

[배포링크]

react-todo-18th
이전보다 가로 길이를 더 넓게 해봤고, 그냥 리스트를 누르면 옮겨지는게 아니라 원을 누르면 이동하게 바꿨습니다~ 그리고 done에서 되돌릴 때는 되돌리는 아이콘 눌러야 되돌려지게 바꿨습니다...!

[Key Questions]

[Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?]
가상의 DOM을 의미한다. 실제 DOM과 유사한 구조를 갖고 있으며, React 업데이트 사이클 동안 변경된 부분만을 실제 DOM에 반영하여 불필요한 리렌더링이 없어 효율적이다. 이를 통해 React는 전체 페이지를 repaint 하지 않고 필요한 부분만 업데이트할 수 있다. 따라서 reflow, repaint를 최소화해서 로딩을 줄이고 더 효율적으로 변경사항을 반영한다. 또한 가독성이 좋고 유지보수가 용이한 JSX 문법을 사용할 수 있다.

[미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?]
컴포넌트 단위로 개발하니 코드의 가독성과 유지 보수성을 높일 수 있었고, 컴포넌트를 재사용 가능하다는 장점이 있었다. 또한 다양한 개발자 커뮤니티와 라이브러리가 존재하여 더 많은 정보를 얻고 더 효율적으로 개발할 수 있었다. 상태와 속성을 이용해 더 쉽게 함수를 만들 수 있었다.

[React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?]
React에서 상태(State)는 컴포넌트의 데이터 저장소라고 생각할 수 있다. 이 데이터는 컴포넌트 내에서 변경될 수 있으며, 주로 사용자와 상호작용하거나 외부 데이터와 연동할 때 사용된다.
클래스형 컴포넌트와 함수형 컴포넌트에서 다른 방식으로 사용하는데, 클래스형 컴포넌트는 state 속성을 사용하여 상태를 정의하고 setState() 메서드를 통해 업데이트한다. 그리고 함수형 컴포넌트는 useState Hook을 사용하여 상태를 정의하고 업데이트한다. 또한 배열 비구조화 할당 문법으로 현재 값과 값을 업데이트하는 함수를 받아온다.

[Styled-Components 사용 후기 (CSS와 비교)]
나는 원래 CSS보다 Styled-Components의 사용이 좀 더 익숙해서 더 편했던 것 같다. 그리고 css처럼 한 곳에 모아두기보다 한 컴포넌트에 필요한 정보들이 바로바로 같은 파일 내에 스타일 정보가 있으니까 css보다 보기도 더 편하고 스타일 변경도 더 편했던 것 같다.

moong23

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

심플한 모던 디자인에 필수 기능들을 창의적으로 구현하신 모습이 인상깊습니다 :)

한주동안 과제하시느라 고생너무많으셨구 다음주 과제도 화이팅입니다아~!!!!!!

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

.gitignore

@@ -1 +1,3 @@
-node_modules
+/node_modules
+package-lock.json


package-lock.json파일은 개인 프로젝트를 하는 경우(혼자 작업하는경우)에는 상관이 없지만
협업을 하는 경우에는 gitignore에 올리지 않는 것이 좋다고 합니다!!
참고자료 놓고 갈게요~!!

moong23 · 2023-09-22T18:38:45Z

src/components/Clock.js

+  //1초마다 now 다시 set
+  useEffect(() => {
+    const time = setInterval(() => {
+      setNow(new Date());


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

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

src/components/Clock.js

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import { format } from "date-fns";


저는 Date, time관련해서는 moment 라이브러리를 애용하는데, date-fns는 처음 보는 라이브러리여서 흥미로워서 조금 찾아봤습니다. 리뷰하러오신 다른 분들을 위해 공식문서 놓고갈게요~!

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

src/components/DailyDate.js

+  padding-top: 3px;
+`;
+
+export default function DailyDate() {


function문법도 문제 없지만 더 최신 문법인 ES6의 arrow function을 써보는 것을 추천드려요~!

moong23 · 2023-09-22T18:46:11Z

src/components/Todo.js

+const Todo_lists = styled.ul`
+  overflow: auto;
+  height: 80%;
+  width: 88%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  scrollbar-width: none;
+  box-sizing: border-box;
+  margin-bottom: 5px;
+  padding-left: 0px;
+  cursor: pointer;
+  list-style-type: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const Done_lists = styled.ul`
+  overflow: auto;
+  height: 80%;
+  width: 88%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  scrollbar-width: none;
+  box-sizing: border-box;
+  padding-left: 0px;
+  list-style-type: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;


두 css가 완전히 똑같아서 굳이 다른 두 리스트를 만들지 않고, 하나의 리스트를 반복해서 사용하는것이 더 바람직해보입니다!!
추가로, cursor:pointer가 박스 전체에 들어가 있어서 어느 부분이 클릭 가능한지 헷갈리는 것 같아요!
클릭 했을 때 interaction이 있는 동그라미 버튼과 휴지통버튼에�만 cursor: pointer를 넣어주는것이 좋을 것 같아요~!

moong23 · 2023-09-22T18:51:16Z

src/components/ListItem.js

+import { faCircle, faCircleCheck } from "@fortawesome/free-regular-svg-icons";
+import { faTrashCan, faRotateLeft } from "@fortawesome/free-solid-svg-icons";


fa icon들을 더 편하게 불러올 수 있는 react-icons 라이브러리가 있답니다!! 이를 사용해도 좋을 것같아요!
공식 docs

moong23 · 2023-09-22T18:53:07Z

src/components/ListItem.js

+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 5px;


사용자의 더 나은 경험 (UX)를 위해 최근 rem단위를 더 선호하고 있다고 합니다!
저도 처음에는 px단위를 쓰는것이 너무나 편했는데, 최근 rem이 더 선호되고 있다고 하니... 연습해보아도 좋을 것 같아요!
참고자료

moong23 · 2023-09-22T18:53:30Z

src/components/ListItem.js

+  font-family: "Pretendard-Regular";
+  font-size: 13px;
+  margin: 3px 8px 0px 8px;
+  text-decoration: line-through;


취소선 디테일 좋습니다 👏👍

moong23 · 2023-09-22T18:57:44Z

src/components/InputItem.js

@@ -0,0 +1,79 @@
+import React from "react";


REACT17이 release되면서 이제 더이상 모든 파일에서 React를 import하지 않아도 된다고 합니다 🚀
stack overflow
오히려 매 파일에서 react를 import하면 performance가 나빠질 수도 있다고 해요!

그렇군요.. 저도 배워갑니당:)

moong23 · 2023-09-22T19:01:39Z

src/components/Todo.js

+            <Todo_lists>
+              {todos.map((item, index) => (
+                <ListItem
+                  key={index}


map함수를 통해 여러개의 component들을 rendering 할 때 꼭 key값을 넣어주어야 하는데,
이때 key 값으로 index를 넣는것은 피하는 것이 좋다고해요!
관련 자료 놓고갈게요~!!~

geeoneee

깔끔한 디자인과 이동 버튼이 돋보였어요
과제 수고 많으셨습니다:)

geeoneee · 2023-09-24T05:08:23Z

src/components/Todo.js

+    localStorage.setItem("doneLists", JSON.stringify(dones));
+  }, [dones]);
+
+  //list 추가 함수


주석을 함수마다 달아주셔서 코드 읽기가 수월했습니다:)

geeoneee · 2023-09-24T05:10:47Z

src/components/Todo.js

+  const moveDones = (index) => {
+    const moveList = dones[index];
+    setDones((prevDones) => prevDones.filter((item, i) => i !== index));
+    setTodos((prevTodos) => [...prevTodos, moveList]); //todo리스트에 list추가


moveTodos와 moveDones, deleteTodo 와 deleteDone가 코드 구성이 비슷해서, 한 번에 합치는 방향으로 코드 수정할 수 있을 것 같아요!

geeoneee · 2023-09-24T05:12:02Z

src/components/Todo.js

+    <Container>
+      <Title>DAILY PLANNER</Title>
+      <TodoList>
+        <First>


First, Second 보다 직관적인 태그 명을 사용하는게 좋을 것 같아요!

geeoneee · 2023-09-24T05:15:59Z

src/index.css

+    font-family: 'Pretendard-Regular';
+    src: url('../assets/fonts/Pretendard-Regular.otf') format('opentype');
+  }
+


정말 플래너 느낌 나는 글꼴로 잘 선정하신 것 같아요!:)

geeoneee · 2023-09-24T05:20:30Z

src/components/DailyDate.js

@@ -0,0 +1,41 @@
+import React from "react";
+import styled from "styled-components";
+import { format } from "date-fns";


오오 date-fns 처음 보는데, 저도 다음에 한 번 date-fns 써봐야겠어요!

geeoneee · 2023-09-24T05:23:38Z

src/components/InputItem.js

@@ -0,0 +1,79 @@
+import React from "react";


그렇군요.. 저도 배워갑니당:)

geeoneee · 2023-09-24T05:36:03Z

src/components/DailyDate.js

+
+const DateText = styled.span`
+  font-family: "Pretendard-SemiBold";
+  letter-spacing: 1px;


디테일....👍🏻

geeoneee · 2023-09-24T05:38:34Z

src/components/ListItem.js

+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 5px;


리스트 아이템들이 이동 아이콘 바로 옆쪽에 왼쪽으로 정렬되면 더 보기 편할 것 같아요!

geeoneee · 2023-09-24T05:41:48Z

src/components/Todo.js

+
+export default function Todo() {
+  const [todos, setTodos] = useState([]);
+  const [dones, setDones] = useState([]);


boolean값 이용해서 리스트 하나에 관리하는 방식으로 보완할 수 있을 것 같아요! 저도 저번 과제 때 todo 리스트와 done 리스트를 따로 관리했었는데, 이번 과제 할 때 boolean값 이용해서 한 리스트로 관리하니까 코드 수정할 때나, 오류 수정할 때 훨씬 편하더라구요!:)

kyuhho

UI가 깔끔하고 디테일에 신경을 많이 쓰신거 같아요! 한주동안 고생하셨습니다~!

kyuhho · 2023-09-24T07:00:57Z

public/favicon.ico

파비콘이 귀엽습니다..!

kyuhho · 2023-09-24T07:09:54Z

src/components/Todo.js

+  &::-webkit-scrollbar {
+    display: none;
+  }


스크롤바 안보이게 한 디테일 좋아요!

kyuhho · 2023-09-24T07:29:18Z

src/components/InputItem.js

+export default function TodoInput({ createTodo }) {
+  const [value, setValue] = useState("");
+
+  const onChange = useCallback(


useCallback을 사용해본 적이 없는데, 앞으로 성능 측면도 고려하며 구현해보겠습니다! 새로 배워갑니다 👍

kyuhho · 2023-09-24T07:33:19Z

src/components/Todo.js

+  height: 10%;
+  align-items: center;
+  padding-left: 10px;
+  background-color: #e0e0e0;


투두 프로젝트에선 많이 반복되지 않지만, 자주 사용되는 색상을 var()로 선언해서 사용하는 방법도 고려해보면 좋을 거 같습니다!

kyuhho · 2023-09-24T07:36:32Z

src/components/ListItem.js

+  const OpenConfirm = () => {
+    if (window.confirm("정말 삭제하시겠습니까?")) {
+      deleteList();
+    }
+  };


항상 alert를 이용해서 메세지 창을 띄웠는데 새로운 방법이네요! 또 배워갑니다 👍

leejin-rho and others added 17 commits September 19, 2023 18:27

feat: 기본 틀 작성

bc4c2b0

Delete node_modules directory

aa2ebda

remove gitignore files

56c2327

modify-gitignore

3afba64

chore: css적용

8b3083f

feat: input함수 구현

daf05bf

feat: moveItem함수 구현

4af4cb2

feat: deleteList 함수 구현

8469b17

chore: moveItem 추가 위치 위에서 아래로 변경

fd36c10

feat: localStorage 함수 구현

d467527

chore: move icon 수정

1807a90

chore: font 적용

047c963

feat: delete할 때 alert창 추가

d3442df

chore: alert문구 수정, console.log 삭제, 입력 alert 추가

868ff78

chore: <text> -> <span> 수정

83d5cf6

chore: redeploy

54b79c2

chore: favicon변경

f543e6b

moong23 reviewed Sep 22, 2023

View reviewed changes

geeoneee reviewed Sep 24, 2023

View reviewed changes

kyuhho reviewed Sep 24, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[2주차] 노이진 미션 제출합니다. #4

[2주차] 노이진 미션 제출합니다. #4

leejin-rho commented Sep 22, 2023

moong23 left a comment

moong23 Sep 22, 2023

moong23 Sep 22, 2023

moong23 Sep 22, 2023

moong23 Sep 22, 2023

moong23 Sep 22, 2023

moong23 Sep 22, 2023

moong23 Sep 22, 2023

moong23 Sep 22, 2023

moong23 Sep 22, 2023

geeoneee Sep 24, 2023

moong23 Sep 22, 2023

geeoneee left a comment

geeoneee Sep 24, 2023 •

edited

Loading

geeoneee Sep 24, 2023

geeoneee Sep 24, 2023

geeoneee Sep 24, 2023

geeoneee Sep 24, 2023

geeoneee Sep 24, 2023

geeoneee Sep 24, 2023

geeoneee Sep 24, 2023

geeoneee Sep 24, 2023

kyuhho left a comment

kyuhho Sep 24, 2023

kyuhho Sep 24, 2023

kyuhho Sep 24, 2023

kyuhho Sep 24, 2023

kyuhho Sep 24, 2023

		import { faCircle, faCircleCheck } from "@fortawesome/free-regular-svg-icons";
		import { faTrashCan, faRotateLeft } from "@fortawesome/free-solid-svg-icons";

[2주차] 노이진 미션 제출합니다. #4

Are you sure you want to change the base?

[2주차] 노이진 미션 제출합니다. #4

Conversation

leejin-rho commented Sep 22, 2023

[2주차]

[배포링크]

[Key Questions]

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

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 left a comment

Choose a reason for hiding this comment

geeoneee Sep 24, 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

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

geeoneee Sep 24, 2023 •

edited

Loading