[2주차] 김서연 미션 제출합니다! #6
Conversation
| const _deleteTask = (id) => { | ||
| var newTasks = { ...tasks }; | ||
| delete newTasks[id]; //id가 key값인 객체 삭제 | ||
| _saveTasks(newTasks); | ||
| }; | ||
| const _addTask = (text) => { | ||
| if (text.trim() === '') { | ||
| return; | ||
| } | ||
| var newId = Date.now(); |
There was a problem hiding this comment.
혹시 여기서 newTasks와 newId에서 var를 사용하신 이유가 따로 있으실까용???
| @media (max-width: 767px) { | ||
| //모바일 | ||
|
|
||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| @media (min-width: 1200px) { | ||
| // 데스크탑 일반 | ||
| flex-direction: row; | ||
|
|
||
| justify-content: space-between; | ||
| } | ||
| `; |
There was a problem hiding this comment.
오오 pc와 mobile 반응형 따로 구현해주신 디테일~!!👏🏻👏🏻👏🏻
| const TextInput = styled.input` | ||
| border: none; | ||
| background: transparent; | ||
| height: 100%; | ||
| font-size: var(--font-size-md); | ||
| `; |
There was a problem hiding this comment.
(말도 안되는 투두 입력.. 양해 부탁드립니당ㅎㅎㅎ)
오늘의 목표까지 만들어 주신 디테일 저번 주부터 너무 인상깊었습니다~!!
그런데 이렇게 길게 입력했을 때 투두 리스트에는 한 번에 잘 담겨져 보이는데 목표에서는 잘리더라구요ㅠㅠ 참고하시면 좋을 것 같아용!!💪🏻💪🏻💪🏻
| @@ -1,9 +1,107 @@ | |||
| import React, { useEffect, useState } from 'react'; | |||
There was a problem hiding this comment.
저도 이렇게 사용했었는데 React를 적어주지 않아도 되는 걸 이번 코드 리뷰 하면서 처음 알게 됐어요!!
예린님 과제에서 문기님이 코드 리뷰 해주신 부분 참고하시면 도움 되실 것 같아요!!! 코드 리뷰
| _deleteTask={_deleteTask} | ||
| /> | ||
| </MainBox> | ||
| </Background> |
There was a problem hiding this comment.
전 이번 과제하면서 컴포넌트를 어떻게 나눌까 고민이 많았는데
서연 님 직관적이게 컴포넌트를 잘 나누신 것 같아요! 배워갑니다:)
| align-content: center; | ||
| margin: 10px; | ||
| `; | ||
| const HeadLine = styled(Font)` |
There was a problem hiding this comment.
styled.(Font) 처럼 styled를 컴포넌트에도 적용을 할 수 있었군요!
저는 이번 과제에서 styled.div styled.h1 이런 식으로만 사용을 했는데,
나중에는 서연 님처럼 컴포넌트에도 적용을 해봐야겠어요 ㅎㅎ 배워갑니다!🙌
|
|
||
| justify-content: space-between; | ||
| } | ||
| `; |
| --font-size-ml: clamp(3rem, 10vw, 3.5rem); | ||
| --font-size-md: clamp(2rem, 4vw, 1.8rem); | ||
| --font-size-sm: clamp(0.5rem, 3vw, 1rem); | ||
|
|
There was a problem hiding this comment.
반응형으로 폰트를 조절할 때 clamp()를 활용하신 것도 정말 좋은 것 같아요👍
많이 써보지는 않아서 조금은 잊고 있었는데 ㅎㅎ.. 서연님 덕분에 다시 상기하고 갑니다~!
| const TODO = 0; | ||
| const DONE = 1; |
There was a problem hiding this comment.
state를 0 1대신 이름을 적용해서 더 알아보기 좋은 것 같아요!
| const TasksLayout = styled.div` | ||
| display: flex; | ||
| gap: 20px; | ||
| height: 100%; | ||
| width: 100%; | ||
|
|
||
| @media (max-width: 767px) { | ||
| //모바일 | ||
|
|
||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| @media (min-width: 1200px) { | ||
| // 데스크탑 일반 | ||
| flex-direction: row; | ||
|
|
||
| justify-content: space-between; | ||
| } | ||
| `; |
There was a problem hiding this comment.
왜인지 모르겠는데 입력할 때 긴 문장이 들어가면 TODO width가 content내용만큼 늘어나더라고요 ..?? 저는 이부분
word-break : break-all; 로 처리했었는데 한번 참고 해보셔요!!
| type="text" | ||
| placeholder="ENTER YOUR TODO" | ||
| value={inputValue} | ||
| onChange={(e) => setInputValue(e.target.value)} |
There was a problem hiding this comment.
화살표함수 사용하는게 아직은 어색한데 저기안에 그냥 넣을 수도 있군요 ..! 배워갑니다
| --font-size-lg: clamp(3rem, 10vw, 7rem); /*최소 증감량 최대*/ | ||
| --font-size-ml: clamp(3rem, 10vw, 3.5rem); | ||
| --font-size-md: clamp(2rem, 4vw, 1.8rem); | ||
| --font-size-sm: clamp(0.5rem, 3vw, 1rem); |
배포링크
https://ceos-react-todo-17th.vercel.app/
느낀점
: 지난번 순수한 자바스크립트로 구현했을때 놓쳤었던 부분들을 React로 개발하면서 기능&스타일 적인 부분을
보완했습니다! 또한 PC와 모바일 반응형을 구현해보려고 시도했는데 잘 구현이 되었는지는 잘 모르겠네용.. 핳
css 기본이 많이 부족했다는 생각이 들고..ㅎㅎ , 이번 기회에 CSS단위 등 기초부터 다시 공부할 수 있게 된 것 같아서 넘 유익했습니다!
그리고 클린코드를 지향하도록 코드를 작성하려고 하다보니, 단순히 결과지향적으로 코드를 작성하는 것이 아니라,
왜 이렇게 작성해야하는지 찾아볼 수 있어서 좋았던 것 같습니다! 앞으로의 과제들에서도 많이 배워나가겠습니다~!😊😊
: PC와 Mobile 반응형을 구현해보았습니다!
Key Questions
Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
React 가상 돔(Virtual DOM)
React에서는 가상 돔을 사용한다. 이 가상 돔은 실제 DOM(Document Object Model)을 조작하는 방식이 아니라 실제 DOM을 모방한 가상의 DOM을 구성해서 원래 DOM과 비교해서 달라진 부분을 리렌더링 시켜주는 방식으로 작동을 한다. 그런데 이 때 가상 돔을 잘 이해해야만 React의 '상태'를 잘 다룰 수 있다.
Virtual DOM을 사용하는 이유
Vanilla JS를 이용하여 DOM을 조작하는 방식은 무거운 작동방식이다. 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있기 때문이다. 그래서 React는 깜박거림 없이 부드러운 UX를 사용자에게 제공하기 위해 변경사항만 빠르게 파악하고 리렌더링 하기 위해 가상 DOM을 만들어 비교하는 방식을 채택했다.
React가 가상 돔을 비교하는 원리
React는 실제 DOM의 UI를 가진 JavaScript 객체를 메모리상에 가지고 있다. 이 Vitual DOM은 변화를 감지하면 재조정(Reconcilation) 과정을 통해 실제 DOM과 동기화 한다. 재조정 과정은 크게 3단계로 나뉜다.
미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?
전체 프로그램 설계를 깔끔하고 일관성 있게 정리할 수 있는 조직성(organization)이 강함
미리 만들어 놓은 조각을 다시 사용할 수 있어 코드 재사용성(reusability)이 높음
기본 웹 프로젝트뿐 아니라 모바일 앱, 데스크탑 앱을 만들 수 있다는 점에서 매우 유연성(flexibility)이 높음.
React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?
리액트에서 상태값(state)이란?
컴포넌트 내 변경 가능한 데이터 저장소. UI(엘리먼트)에 반영하기 위해 유지해야할 값 묶음이다. 리액트 컴포넌트에 저장한 데이터가 변화하면 UI가 자동으로 갱신된다.
리액트 개발의 핵심은 상태값을 효율적으로 관리하는 것, 그리고 상태값에 따라 화면이 불필요하게 업데이트되지 않도록 관리하는 것이다.
각 컴포넌트 안에서만 사용하는 값은 해당 컴포넌트 안에서 생성하고 갱신한다. 여러 컴포넌트에서 사용하는 값은 별도 공간에서 생성하고 갱신한다.
상태값 변경 예시
Styled-Components 사용 후기 (CSS와 비교)
필수 요건
1주차 미션의 결과물을 그대로 React로 구현합니다
[ ]
[ ]
Functional Components를 사용합니다
React Hooks만을 사용해 상태를 관리합니다
(이번주는 Redux, MobX, Recoil, SWR등의 외부 상태관리 라이브러리를 사용하지 않아도 미션 수행에 지장이 없습니다.)
선택 요건
기존 Todo-list에 여러분들이 추가하고 싶은 기능과 디자인을 자유롭게 추가해보세요.
Ref
https://www.snugarchive.com/blog/what-is-react/