[2주차] 김문기 미션 제출합니다. #4

moong23 · 2023-03-24T08:29:52Z

2주차 미션: React-Todo

서론

안녕하세요 🙌🏻
17기 프론트엔드 김문기 입니다!!

왜인지 모르겠는데 하나의 파일에 작성하는 js가 약간은 그리웠던 프로젝트입니다.
useMemo나 useCallback등의 함수를 사용해본적이 없어서 이번에 todo를 만들면서 사용해보아야겠다!
고 했던 1주일전의 저와는 다르게 아무것도 사용하지 않았 못했습니다

!!! 사용법 !!!
구현이 완벽하지 않아서 사용법을 적어놓겠습니다 ㅜㅜㅜㅜ

바탕화면의 아이콘을 한번 누르면 아이콘이 focus됩니다
바탕화면의 아이콘을 더블클릭하면 창이 열리거나 닫힙니다
이후는 지난주와 동일합니다!
~~모바일에서는 더블클릭이 안된다고 하더라고요... 모바일은 다음부터 기능 구현해보겠습니다😢~~
데스크탑의 모바일뷰로는 안되는데 핸드폰으로는 잘 되네요 ㅎㅎ

추가 구현하고 싶은 기능들이 많았는데, 체력과 시간 이슈로 저번주 과제를 react로 옮기는 것에 집중하기로했습니다 ㅜㅜ

swipe기능
drag and drop 기능
의 기능을 시도해보고 싶은데, 관심 있으신 분들은 함께 얘기해보면 좋을 것 같아요!

미션

미션 목표

VSCode, Prettier를 이용하여 개발환경을 관리합니다.
React의 기초를 이해합니다.
React를 통한 어플리케이션 상태 관리 방법을 이해합니다.
React Hooks에 대한 기초를 이해합니다.
Styled-Components를 통한 CSS-in-JS 및 CSS Preprocessor의 사용법을 익힙니다.

기한

2023년 3월 24일 금요일

Key Questions

Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
-> Document Model 인데 Virtual하다. 즉, 가상의 Document Model으로, DOM에 state가 업데이트 될 경우, update되는 state의 갯수 만큼 DOM이 렌더링이 되어야 하는데, Virtual Dom을 사용하면 state가 update되는것을 기다렸다가, DOM이 새로이 생성되기 전, 이전 상태 값과 현재의 update값을 비교하여 '달라진 부분만'을 DOM에 전달하여 한번의 렌더링을 진행할 수 있게 됩니다.
미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?
-> 앞으로 자주 쓸 혹은 자주 쓰는 구조의 경우 Component로 따로 제작하여 반복 호출할 수 있음. 각각의 page나 component에서 필요한 js를 나누어 사용함으로서 코드 관리가 용이하다. 정도를 느꼈습니다.
React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?
-> React에서 상태는 data를 hold하고 있는 객체로, 컴포넌트의 현재 상태를 저장하고 있는 공간정도로 생각할 수 있을 것 같습니다. 상태 관리를 할 때 react에서는 useState에 자동으로 제공되는 get, set함수를 사용하기도 하지만, 프로젝트 폴더 전체에서 효율적으로 상태 관리를 하기 위해 context-api redux recoil등의 외부 라이브러리를 사용하기도 합니다.
Styled-Components 사용 후기 (CSS와 비교)
-> css와 비교할 때 css에서는 태그에 className을 열거하여 해당 className이 있는 경우 다른 스타일을 주는 식으로 해야했지만, styled-component를 사용하면 props를 css로 넘겨 css안에서 props의 값에 대한 렌더링을 할 수 있습니다. 또한, 가상 클래스 선택자 또한 하나의 블락(`)안에 작성함으로서 보다 깔끔한 코드 작성이 가능합니다.

필수 요건

1주차 미션의 결과물을 그대로 React로 구현합니다
Functional Components를 사용합니다
React Hooks만을 사용해 상태를 관리합니다
(이번주는 Redux, MobX, Recoil, SWR등의 외부 상태관리 라이브러리를 사용하지 않아도 미션 수행에 지장이 없습니다.)

선택 요건

기존 Todo-list에 여러분들이 추가하고 싶은 기능과 디자인을 자유롭게 추가해보세요.

링크 및 참고자료

Vercel 배포 링크

진행하면서 적은 내용

[fix]: App.js 문법 최신화

chaeyeonan

문기님 안녕하세요! 프론트운영진 안채연입니다

사실 피드백이 아니라 감탄하러 왔..네요! 보면서 정말 디테일과 기능들에 깜짝 놀랐습니다(진심)
문기님께 한 수 배우고싶네요(이것도 진짜 진심)

저번주 문기님 발표 못들어서 아쉽네요ㅜㅜ 앞으로의 과제가 점점 더 기대가 됩니다..!! ㅎㅎ
이번주 과제 너무 수고하셨고 스터디 화이팅입니다!

chaeyeonan · 2023-03-24T23:27:47Z

src/components/card/Card.element.js

+  width: ${(props) => (props.display ? "max(300px, 30vw)" : "0")};
+  height: ${(props) => (props.display ? "max(500px, 50vw)" : "0")};
+  position: ${(props) => (props.display ? "initial" : "fixed")};
+  top: ${(props) => props.position.top};
+  left: ${(props) => props.position.left};


props를 이용한 효율적인 코드 좋네요!

문기님 styled-components 에서 props 활용을 잘 하시는 것 같아요!! 저도 다음 과제에 적용해보고 싶습니다 👍

chaeyeonan · 2023-03-24T23:28:26Z

src/components/card/Card.element.js

+  z-index: 2;
+  visibility: ${(props) => (props.display ? "visible" : "hidden")};
+  box-shadow: 0 0 10px 0px #000000;
+  transition: width 0.2s, height 0.2s, visibility 0.05s linear 0.15s;


transition 까지.. 쩌는 디테일

옆에 맥 켜놓고 최대한 비슷하게 만드려고 노력했습니다 ㅎㅎ

우와........ 진짜 감탄만.........

chaeyeonan · 2023-03-24T23:29:33Z

src/components/card/Card.element.js

+  &:hover {
+    background-color: #656565;
+    cursor: url(Link.cur) 0 0, pointer;
+    /* cursor: url(../../assets/Link.cur) 0 0, pointer; */
+  }


와 이런 디테일!

chaeyeonan · 2023-03-24T23:31:23Z

src/components/hoverDiv/HoverDiv.element.js

+const slideIn = keyframes`
+    from {
+        transform: translateY(-10%);
+    }
+    to {
+        transform: translateY(0);
+    }
+`;


animation 까지 주시다니 감동받고 갑니다

chaeyeonan · 2023-03-24T23:34:07Z

src/components/hoverDiv/HoverDiv.js

+        <CircleBtn
+          color="purple"
+          value="purple"
+          type="tag"
+          name="tag"
+          selectedTag={selectedTag}
+          handleTagChange={handleTagChange}
+        />


CircleBtn가 색만 바뀌고 계속 반복되고 있어서 map 사용해줘도 괜찮을 것 같아요~!

아 map을 쓸 생각을 안해봤던 것 같아요. map으로 만들면 코드량도 줄고 깔끔할 것 같아요 바꾸도록 하겠습니다 😄

chaeyeonan · 2023-03-24T23:35:55Z

src/styles/colors.css

+:root {
+  --red-button: #ff605c;
+  --yellow-button: #ffbd44;
+  --green-button: #00ca4e;
+  --red-tag: #e84b31;
+  --blue-tag: #3476e1;
+  --orange-tag: #de8b32;
+  --yellow-tag: #e5bd3f;
+  --green-tag: #56b83d;
+  --purple-tag: #9e54ba;
+}


자주 사용하는 색 이렇게 지정해놓는거 정말 좋네요!!

이렇게 해놓으니까 나중에 특정 색을 다른 색으로 바꾸고 싶을 때 root에서 필요한 rgb코드만 변경하면 돼서 편리하더라구요!

우와 이거 완전 꿀팁이네요!!! 좋은 정보 감사합니닷!!💪🏻💪🏻

오오 코드 리뷰하러 왔다가 저도 배우고 갑니다!! 감사해요:)

kongnayeon

안녕하세요 문기님! 프론트 운영진 강나연입니다 😸
이번에도 역시 화려한 결과물을... 정말 최고예요 ㅜ.ㅜ
이미 styled-components도 잘 활용하시는 것 같고, 코드도 굉장히 깔끔해 리뷰하기 굉장히 편했습니다!
문기님 코드를 읽으며 많이 배워가는 것 같아요!
이번 과제도 수고 많으셨고 스터디 시간에 봬요! 😸

kongnayeon · 2023-03-25T08:25:19Z

src/components/card/Card.element.js

styled-components를 선언하는 파일과 사용하는 파일을 분리해서 사용하시네요! 이렇게 사용하는 게 더 가독성이나 유지보수에 편리하겠군용... 👀 배워갑니당

저도 styled-components 사용 시 코드가 위아래로 길어지는 게 너무 불편했는데 파일 분리 배워갑니다. ㅎㅎ

kongnayeon · 2023-03-25T08:37:11Z

src/pages/Mainpage/Mainpage.js

+  const [mainIconPosition, setMainIconPosition] = useState({
+    top: 30,
+    left: 30,
+  });
+  const [textIconPosition, setTextIconPosition] = useState({
+    top: 160,
+    left: 30,
+  });
+
+  useEffect(() => {
+    setMainIconPosition({
+      top: 30,
+      left: 30,
+    });
+    setTextIconPosition({
+      top: 160,
+      left: 30,
+    });
+  }, []);


mainIconPosition과 textIconPosition 모두 useState 훅 사용 시 초깃값을 설정해 주고 계신데, useEffect로 한 번 더 초깃값을 설정할 필요가 있을까요?.?

이렇게 수정해 봐도 좋을 것 같습니다!

Suggested change

const [mainIconPosition, setMainIconPosition] = useState({

top: 30,

left: 30,

});

const [textIconPosition, setTextIconPosition] = useState({

top: 160,

left: 30,

});

useEffect(() => {

setMainIconPosition({

top: 30,

left: 30,

});

setTextIconPosition({

top: 160,

left: 30,

});

}, []);

const [iconPosition, setIconPosition] = useState({

main: {

top: 30,

left: 30,

},

text: {

top: 160,

left: 30,

},

});

앗... 여기 비하인드 스토리가 있어요 ㅎㅎ
원래는 drag and drop 기능을 넣어서 drop한 위치를 state에 저장해서 관리하려고 했는데 기능 구현을 실패하는 바람에 setIconPosition이 쓰이질 않더라고요. CI = false env를 넣어주면 되긴하는데 ~~(그냥 노랑 warning이 콘솔창에 뜨는게 싫어서)~~ 나중에 setIconPosition을 추후에 사용할 경우를 생각해서 넣어주었습니다.

YelynnOh

안녕하세요 문기님! 이번주 코드 리뷰 파트너 오예린입니다🤗

코드 리뷰.. 라고는 하지만 사실 문기님 코드를 보면서 제가 배웠던 부분들이 더 많은 것 같네요ㅎㅎㅎㅎ 대단하시고 너무 멋지십니다!!👍👍

이번 주도 과제하시느라 정말 고생많으셨습니다:)

YelynnOh · 2023-03-26T05:42:54Z

src/components/mainIcon/MainIcon.element.js

+  left: ${(props) => `${props.position.left}px`};
+  align-items: center;
+`;
+


props 정말 잘 사용하시네요..! 문기 님 코드 보면서 많이 배워갑니다🥺

YelynnOh · 2023-03-26T05:50:53Z

src/components/hoverDiv/HoverDiv.element.js

+    cursor: url(Text.cur) 0 0, text;
+  }
+`;
+


문기님 코드 보면서 몰랐던 css 속성들도 배워가는 것 같아요👍👍 감사합니다!

YelynnOh · 2023-03-26T05:56:36Z

src/components/mainIcon/MainIcon.element.js

+  justify-content: center;
+  margin-top: 4px;
+  border-radius: 4px;
+  background-color: ${(props) => (props.clicked ? "#2A62D9" : "")};


이런 식의 코드 너무 깔끔한 것 같아요.. 멋지십니다!!🙌

Gaeun-Kwon

문기님 안녕하세요, 권가은입니다!!
이번 과제 하시느라 수고 많으셨습니다~!!

문기님 이번 과제하신 걸 보면서, 개인적으로
state, props를 이용한 디테일한 css 설정, 기능별 파일 분리를 통한 깔끔한 폴더 구조 구성, 추가적인 기능들까지 배울점이 정말 많았던 것 같습니다! 👍👍

이미 다른 분들이 코드리뷰를 잘 해주셔서,
말씀하신 drag & drop 기능 관련, 제가 다른 프로젝트에서 드래그 기능 사용을 위해 만들었던 함수 첨부해보겠습니다! Notion에 적어두신 것 처럼 저도 당시 마땅한 라이브러리를 찾지 못하고 바닐라js로 구현했었어요.. 😂 혹시 도움 되실까 해서 두고갑니닷,,

그리고 모바일 더블터치 관련해서는, 따로 함수를 만들어줘서 사용하는 것 같더라구요.
관련된 자료들도 오래되었거나, jquery 관련 자료들이어서 이 부분은 저도 다음주에 한 번 새로운 기능 만들면서 생각&구현해보겠습니다!! 같이 얘기해봐요 ! (꼭)

Gaeun-Kwon · 2023-03-26T07:28:23Z

src/App.js

+  const [mainIconPosition, setMainIconPosition] = useState(
+    JSON.parse(localStorage.getItem("mainIconPosition")) ?? {
+      top: 30,
+      left: 30,
+    }
+  );
+  const [textIconPosition, setTextIconPosition] = useState(
+    JSON.parse(localStorage.getItem("textIconPosition")) ?? {
+      top: 160,
+      left: 30,
+    }
  );


그동안 style에 대한 값은 state로 지정해본 적이 없었는데 좋은 방법인 것 같아요! 배워갑니다. ㅎㅎ

Gaeun-Kwon · 2023-03-26T07:36:01Z

src/components/card/Card.element.js

+  width: ${(props) => (props.display ? "max(300px, 30vw)" : "0")};
+  height: ${(props) => (props.display ? "max(500px, 50vw)" : "0")};
+  position: ${(props) => (props.display ? "initial" : "fixed")};
+  top: ${(props) => props.position.top};
+  left: ${(props) => props.position.left};


문기님 styled-components 에서 props 활용을 잘 하시는 것 같아요!! 저도 다음 과제에 적용해보고 싶습니다 👍

Gaeun-Kwon · 2023-03-26T07:37:04Z

src/components/card/Card.element.js

저도 styled-components 사용 시 코드가 위아래로 길어지는 게 너무 불편했는데 파일 분리 배워갑니다. ㅎㅎ

moong23 added 18 commits March 21, 2023 11:57

initial commit

376c73b

[style]: css 초기화

af8e2a2

[fix]: App.js 문법 최신화

[assets]: img파일 업로드

c9f46ed

[feat]: recoil 사용을 위한 state 초기화

71c2161

[feat]: MainIcon 컴포넌트 클릭 매소드 구현

97d2755

[style]: style css integrated

5643b9c

[WIP]: Not using Recoil

49c72eb

[feat]: hoverDiv UI 구성

8812a80

[feat]: hoverDiv 구현 완료

ae2b787

[feat]: cursor 이펙트 통일

924396a

[style]: textIcon 초기 위치 조정

a5cfc02

[feat]: todo UI 구현

845f945

[feat]: todo <-> done 리스트간 이동 기능 구현

62c8462

[feat]: todo에서 삭제 기능 구현

5415824

[chore]: minor bug fix on todo -> done

7845621

[fix]: CI변수 없이 build하기 위해 의존성 수정 및 쓰지 않는 것들 삭제

4066b12

[build]: 빌드를 위한 파일 추가 및 삭제

dce66f4

[fix]: todo 와 done placeholder 에러 로직 수정

e8734c2

chaeyeonan reviewed Mar 24, 2023

View reviewed changes

Update README.md

65d1d09

kongnayeon reviewed Mar 25, 2023

View reviewed changes

YelynnOh reviewed Mar 26, 2023

View reviewed changes

Gaeun-Kwon reviewed Mar 26, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[2주차] 김문기 미션 제출합니다. #4

[2주차] 김문기 미션 제출합니다. #4

moong23 commented Mar 24, 2023 •

edited

Loading

chaeyeonan left a comment

chaeyeonan Mar 24, 2023

Gaeun-Kwon Mar 26, 2023

chaeyeonan Mar 24, 2023

moong23 Mar 25, 2023

YooSeonHo Mar 25, 2023

chaeyeonan Mar 24, 2023

chaeyeonan Mar 24, 2023

chaeyeonan Mar 24, 2023

moong23 Mar 25, 2023

chaeyeonan Mar 24, 2023

moong23 Mar 25, 2023

oyatplum Mar 25, 2023

YelynnOh Mar 26, 2023

kongnayeon left a comment

kongnayeon Mar 25, 2023

Gaeun-Kwon Mar 26, 2023

kongnayeon Mar 25, 2023

moong23 Mar 25, 2023

YelynnOh left a comment

YelynnOh Mar 26, 2023

YelynnOh Mar 26, 2023

YelynnOh Mar 26, 2023

Gaeun-Kwon left a comment •

edited

Loading

Gaeun-Kwon Mar 26, 2023

Gaeun-Kwon Mar 26, 2023

Gaeun-Kwon Mar 26, 2023

[2주차] 김문기 미션 제출합니다. #4

Are you sure you want to change the base?

[2주차] 김문기 미션 제출합니다. #4

Conversation

moong23 commented Mar 24, 2023 • edited Loading

2주차 미션: React-Todo

서론

미션

미션 목표

기한

Key Questions

필수 요건

선택 요건

링크 및 참고자료

chaeyeonan 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kongnayeon 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

YelynnOh 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

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

Choose a reason for hiding this comment

moong23 commented Mar 24, 2023 •

edited

Loading

Gaeun-Kwon left a comment •

edited

Loading