[2주차] 정인영 미션 제출합니다. #11

rmdnps10 · 2023-09-22T14:57:42Z

배포

후기

이번 과제의 개인적인 목표는 컴포넌트를 디자인 할 때 아토믹 디자인 패턴에 맞춰서 체계적으로 짜는 것이었습니다.
코딩을 하는 데에 있어서 많은 시간을 어떻게 atom, molecules, organism, template를 나눠야 할 지 고민하는데에 투자하였지만, 마지막까지 코드를 만지면서 확신이 잘 들지 않았던 것 같습니다, 많은 피드백 부탁드립니다.
또 three.js 의 기본적인 사용법을 익히면서 재밌었습니다.

기능 구현

투두리스트 추가 기능 (제대로 입력 안할 경우 경고창)
투두리스트 <-> 완료한 리스트 전환
인터랙티브한 3d 모델 랜더링

아쉬운 점

분명히 좀 더 예쁜 디자인 패턴이 있었을 것 같습니다
시간 상 구현하지 못하였지만,,, Recoil을 잘 활용하여 localStorage에 투두리스트가 바로 연결되게 만들고 싶습니다.

Key Questions

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

Virtual DOM(가상 DOM)은 웹 애플리케이션의 성능을 향상시키고 개발자가 웹 애플리케이션을 관리하기 쉽게 만드는 데 사용되는 개념입니다.
변경 사항이 발생할 때마다 전체 실제 DOM을 업데이트하는 대신 Virtual DOM은 가상 트리를 업데이트하고 필요한 변경 사항만을 실제 DOM에 적용함으로써 효율적인 랜더링이 가능합니다.

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

미션을 진행하면서 느낀 리액트의 장점은, 여러 라이브러리를 npm install 만으로 쉽게 다운로드 받을 수 있고, 컴포넌트 단위로 개발이 가능하여 재사용이 가능해, 코드의 유지 보수성이 굉장히 향상된다고 느꼈습니다. 또한 JSX를 사용하여 자바스크립트 코드 안에서 html가 유사한 구조를 작성할 수 있는 점 역시 직관적이고, 편리하다고 느꼈습니다.

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

React에서 "상태(State)"는 컴포넌트의 데이터를 나타내는 것으로, 컴포넌트의 동작과 렌더링에 영향을 미치는 정보를 포함합니다.
즉 상태가 변하면, 리액트는 상태가 변경했음을 감지하고 해당 컴포넌트를 리렌더링하게 되고 사이클을 거쳐 화면에 업데이트되게 됩니다. 상태를 관리하는데는 기본적으로 useState를 통해 상태를 변화하는 방법이 있으며, Redux, MobX, Context API,Recoil과 같은 상태 관리 라이브러리나 패턴을 사용하여 더 복잡한 애플리케이션 상태를 효율적으로 관리할 수 있습니다. 이러한 도구와 패턴을 사용하면 상태의 전역 관리와 더 복잡한 데이터 흐름을 다룰 수 있습니다. 이번 과제에서는 Recoil을 통해 전역 상태를 관리했습니다.

Styled-Components 사용 후기 (CSS와 비교)
컴포넌트 단위로 스타일링하여 재사용이 가능하다는 점이 가장 큰 장점 같습니다! 또 props을 통해 동적으로 스타일링이 가능하고, 기호에 따라 스타일 상속도 가능한 점이 Styled-Components의 큰 장점 같습니다.

- 아토믹 디자인 패턴을 활용한 컴포넌트 설계 - components, hooks, image, style 디렉토리 추가 - Three.js 활용하여 인터랙티브한 우주 배경 추가

아토믹 디자인 패턴을 활용하여 vanilla to do 작업물과 거의 동일하게 작업 atoms, molecules, organism, template의 판단기준은 각각 처음부터 - 재사용이 가능한 html 태그로만 이루어진 컴포넌트 - atom 으로 이루어졌으며 기능을 최소 한 개 이상 가지고 있는 컴포넌트 - 배치를 위한 layout 단위이자 시멘틱 태그, section 과 같은 요소 - 페이지의 가장 큰 틀, 여기에선 페이지가 하나 뿐이기에 페이지의 역할

ToDoItem 호버 시 배경 노란색으로, 글자 색 어둡게 변경

props drilling 문제를 해결하기 위해 recoil을 통해 현재 할 일과 끝낸 일을 상태관리 변수로 추가함 현재 할 일 추가, 현재 할 일 <-> 끝낸 일 전환, 끝낸 일에서 목록 삭제 구현

텍스트 입력과 관련한 커스텀 훅 추가

three.js로 렌더링된 물체 사용 가이드 placeholder로 제시

wokbjso

배경 진짜 너무 신기하네요 ㅎㅎㅎ 너무 예쁘게 잘 만드신거 같아서 저도 자극 받아갑니다~~ 수고하셨어요!!!

src/style/GlobalStyle.js

wokbjso · 2023-09-23T06:40:57Z

src/components/atoms/Button.js

+export const Button = styled.div`
+  display: flex;
+  width: 67px;
+  height: 27px;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--lightGray);
+  border: 2px solid var(--black);
+  border-radius: 10px;
+  font-weight: 600;
+  font-size: 13px;


px 단위의 작업도 좋지만 모바일에서의 사용성도 고려하여 media-query 와 rem 작업 단위로 작업하는 것을 습관화 하시면 좋을 거 같습니다 ㅎㅎ

src/components/molecules/TextInput.js

wokbjso · 2023-09-23T07:27:41Z

src/components/molecules/TextInput.js

+  const onChange = (e) => {
+    setInput(e.target.value);
+  };
+  const buttonClick = () => {
+    if (input.length < 5 || input.length > 30) {
+      alert("할 일은 5자 이상 30자 이하로 작성해주세요.");
+      return;
+    }
+    setnowTodoList([...nowTodo, input]);
+    setInput("");
+  };
+  const handleOnKeyPress = (e) => {
+    if (e.key === "Enter") {
+      if (input.length < 5 || input.length > 30) {
+        alert("할 일은 5자 이상 30자 이하로 작성해주세요.");
+        return;
+      }
+      setnowTodoList([...nowTodo, input]);
+      setInput("");
+    }


todo 추가를 하기 전에 trim 함수로 불필요한 공백을 제거해주면 더 좋을거 같아요~~

wokbjso · 2023-09-23T07:46:38Z

src/components/molecules/ToDoItem.js

+  const deleteButtonClick = () => {
+    const newSolvedList = solvedTodo.filter((item) => item !== todo);
+    setSolvedTodo(newSolvedList);
+  };
+  const backButtonClick = () => {
+    const newSolvedList = solvedTodo.filter((item) => item !== todo);
+    setSolvedTodo(newSolvedList);
+    setNowTodo([...nowTodo, todo]);
+  };
+  const clickNowToDo = (e) => {
+    // SolvedToDo 아이템 클릭했을 경우, 아무 일도 발생하지 않기하기
+    if (isSolved) {
+      return;
+    } else {
+      const targetTodo = e.target.innerText;
+      const newNowTodoList = nowTodo.filter((item) => item !== targetTodo);
+      setNowTodo(newNowTodoList);
+      setSolvedTodo([...solvedTodo, targetTodo]);
+    }
+  };


지극히 제 개인적인 의견입니다만, todo를 삭제하거나 옮기는 과정에서 filter 를 사용하면 현재 있는 todo를 전부 탐색하여 비교하는 과정을 거쳐야하므로 todo가 많이 생긴다면 살짝 비효율적인 면이 있지 않을까 생각합니다.
해당 컴포넌트의 index 를 받아와서 splice 함수로 처리해주는 것도 좋을 거 같다는 생각이 듭니다 ㅎㅎ

오 좋은 방법 같아요 저도 배워갑니당

todo 가 많이 생긴다면 분명히 splice 함수로 처리하는 게 좋은 방법일 것 같네요... 감사합니다!

wokbjso · 2023-09-23T07:57:30Z

src/components/organism/NowTodo.js

+        {nowTodo.map((todo, idx) => (
+          <ToDoItem
+            isSolved={false}
+            todo={todo}
+            setSolvedTodo={setSolvedTodo}
+            key={idx}
+          />


map 함수 사용 시 key 를 index 로 설정하는 것은 권장하지 않는다고 합니다.
todo의 값으로 key를 설정하거나 todo의 내용이 중복될 수 있다면 todo+index 로 고유의 key값을 설정하는 것을 추천드립니다~!!
key값으로 index를 단독으로 사용하면 안되는 이유

Suggested change

{nowTodo.map((todo, idx) => (

<ToDoItem

isSolved={false}

todo={todo}

setSolvedTodo={setSolvedTodo}

key={idx}

/>

{nowTodo.map((todo, idx) => (

<ToDoItem

isSolved={false}

todo={todo}

setSolvedTodo={setSolvedTodo}

key={todo+idx}

/>

src/components/atoms/Input.js

src/components/molecules/ToDoItem.js

wokbjso · 2023-09-23T08:05:16Z

src/components/molecules/TextInput.js

+        value={input}
+        onChange={onChange}
+        onKeyPress={handleOnKeyPress}
+      />


키보드 사용도 고려해주신 점 너무 좋은 것 같습니다 ㅎㅎ

src/components/organism/Background.js

geeoneee

화면이 너무 예뻐서 보는 즐거움이 있었습니다:)
과제 수고 많으셨어요!

geeoneee · 2023-09-24T05:49:35Z

src/style/GlobalStyle.js

@@ -0,0 +1,27 @@
+import { createGlobalStyle } from "styled-components";
+import reset from "styled-reset";


모듈을 정말 잘 활용하시는 것 같아요! 배워갑니당:)

src/style/GlobalStyle.js

src/components/organism/Background.js

src/components/template/Template.js

geeoneee · 2023-09-24T06:02:22Z

src/components/molecules/ToDoItem.js

+  const deleteButtonClick = () => {
+    const newSolvedList = solvedTodo.filter((item) => item !== todo);
+    setSolvedTodo(newSolvedList);
+  };
+  const backButtonClick = () => {
+    const newSolvedList = solvedTodo.filter((item) => item !== todo);
+    setSolvedTodo(newSolvedList);
+    setNowTodo([...nowTodo, todo]);
+  };
+  const clickNowToDo = (e) => {
+    // SolvedToDo 아이템 클릭했을 경우, 아무 일도 발생하지 않기하기
+    if (isSolved) {
+      return;
+    } else {
+      const targetTodo = e.target.innerText;
+      const newNowTodoList = nowTodo.filter((item) => item !== targetTodo);
+      setNowTodo(newNowTodoList);
+      setSolvedTodo([...solvedTodo, targetTodo]);
+    }
+  };


오 좋은 방법 같아요 저도 배워갑니당

src/App.js

westofsky

안녕하세요 프론트 운영진 배성준입니다!
코드가 되게 깔끔하게 작성하셔서 리뷰가 편한것 같아요
배경이 마치 우주에 온 것 같아요 시간이 너무느리게가네요 ㅠ
recoil은 반칙이지만 그래도 이번주 과제 고생하셨습니다 ㅎㅎㅎㅎ
몇가지 코멘트만 달았으니 참고만 해주세요~~~다음과제도 파이팅

src/components/organism/Background.js

westofsky · 2023-09-24T06:23:34Z

src/components/organism/NowTodo.js

+export const StyledList = styled.div`
+  display: flex;
+  margin-top: 20px;
+  overflow: scroll;
+  flex-direction: column;
+  align-items: start;
+  gap: 15px;
+  height: 500px;
+`;


이렇게 export하는 것보단 따로 component를 만들고 NowTodo, SolvedTodo에서 사용하는건 어떨까요 ??

src/components/molecules/ToDoItem.js

src/components/organism/Header.js

src/components/molecules/TextInput.js

westofsky · 2023-09-24T06:51:14Z

src/style/GlobalStyle.js

+    * {
+        font-family: 'Noto Sans KR', sans-serif;
+        box-sizing: border-box;
+
+        // 사용할 색깔들
+        --white: #FFFFFF;
+        --lightWhite: #FFFFFF80;
+        --lightGray: #D4D4D4;
+        --darkGray: 675F5F;
+        --black: #000000;
+
+
+        // 색상 그라디언트 
+        --gradient: radial-gradient(50% 50% at 50% 50%, rgba(18, 18, 18, 0) 0%, #202020 100%);
+
+        // 그림자
+        --shadow:  0px 0px 60px 20px rgba(13, 12, 11, 0.25);
+    }


너무 좋습니다 혹시 다음에 이걸 이용해서 다크모드도 도전 ????

rmdnps10 added 6 commits September 21, 2023 23:41

Feat: 프로젝트 초기 세팅 완료

0b5d67d

- 아토믹 디자인 패턴을 활용한 컴포넌트 설계 - components, hooks, image, style 디렉토리 추가 - Three.js 활용하여 인터랙티브한 우주 배경 추가

Feat: 지금 할 일 호버 시 디자인 추가

a7e893b

ToDoItem 호버 시 배경 노란색으로, 글자 색 어둡게 변경

Refactor: 커스텀 훅 추가

1d2e02f

텍스트 입력과 관련한 커스텀 훅 추가

Style: Input placeholder 변경

8efadb4

three.js로 렌더링된 물체 사용 가이드 placeholder로 제시

wokbjso reviewed Sep 23, 2023

View reviewed changes

geeoneee reviewed Sep 24, 2023

View reviewed changes

westofsky reviewed Sep 24, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[2주차] 정인영 미션 제출합니다. #11

[2주차] 정인영 미션 제출합니다. #11

rmdnps10 commented Sep 22, 2023

wokbjso left a comment

wokbjso Sep 23, 2023

wokbjso Sep 23, 2023

wokbjso Sep 23, 2023 •

edited

Loading

geeoneee Sep 24, 2023

rmdnps10 Sep 24, 2023 •

edited

Loading

wokbjso Sep 23, 2023

wokbjso Sep 23, 2023

geeoneee left a comment

geeoneee Sep 24, 2023

geeoneee Sep 24, 2023

westofsky left a comment •

edited

Loading

westofsky Sep 24, 2023

westofsky Sep 24, 2023

		@@ -0,0 +1,27 @@
		import { createGlobalStyle } from "styled-components";
		import reset from "styled-reset";

[2주차] 정인영 미션 제출합니다. #11

Are you sure you want to change the base?

[2주차] 정인영 미션 제출합니다. #11

Conversation

rmdnps10 commented Sep 22, 2023

배포

후기

기능 구현

아쉬운 점

Key Questions

wokbjso left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wokbjso Sep 23, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rmdnps10 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

geeoneee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westofsky left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wokbjso Sep 23, 2023 •

edited

Loading

rmdnps10 Sep 24, 2023 •

edited

Loading

westofsky left a comment •

edited

Loading