[2주차] 안채연 미션 제출합니다 #10
Conversation
There was a problem hiding this comment.
안녕하세요 채연님! 프론트 운영진 유세은입니다 😸
우선 배포 링크 실행해보면서 디테일에 감탄하고 갑니다..... 👍
프론트 개발자가 가질 수 있는 센스라고 생각합니다 😮 바닐라JS에서도 잘 만들어주셨는데 리액트로도 개발을 아주 잘 하시는 것 같아요~!! styled-component도 잘 써주셔서 다음 주 과제가 더 기대가 되는 것 같습니다 :)
크게 고치실 만한 부분은 없고 몇 가지 코멘트만 남겨보았습니다 ~! 이번 과제도 수고 많으셨고 스터디때 뵙겠습니다 ㅎㅎ
src/ContainerStyled.js
Outdated
| border-bottom: 1px solid ${props=>props.color || '#449a80'}; | ||
| padding-block: 10px; | ||
| font-size: 15px; | ||
| margin: 5px; | ||
| font-weight: 700; | ||
| color: ${props=>props.color || '#449a80'}; |
There was a problem hiding this comment.
styled-component를 이용해서 props 를 받아서 처리해주는 거 아주 좋아요!! 코드를 줄일 수 있는 효과적인 방법이라고 생각합니다 ㅎㅎ
src/components/Input.js
Outdated
|
|
||
| const Input=()=>{ | ||
| return( | ||
| <div style={{flexDirection:'row'}}> |
There was a problem hiding this comment.
인라인 스타일은 최대한 지양하는 게 좋다고 합니다~! 스타일 컴포넌트를 이용해서 빼도 좋을 것 같아요!
인라인 스타일 지양
| if (value === "") { | ||
| alert("할 일을 입력해주세요"); | ||
| } else { | ||
| addTask(value); | ||
| setValue(""); // value 값 초기화 | ||
| } |
There was a problem hiding this comment.
공백 처리를 위해서 value.trim() 을 활용하면 될 것 같아요~!
공백처리
| let todoTaskNum = 0; | ||
| tasks.map((task) => (task.done ? todoTaskNum : todoTaskNum++)); | ||
|
|
||
| //완료 비율 | ||
| let completedRate = 0; | ||
| if (tasks.length != 0) { | ||
| completedRate = parseInt( | ||
| ((tasks.length - todoTaskNum) / tasks.length) * 100 | ||
| ); | ||
| } | ||
|
|
||
| const [emoji, setEmoji] = useState(""); | ||
|
|
||
| const _setEmoji = () => { | ||
| if (completedRate >= 80) { | ||
| setEmoji("😍"); | ||
| } else if (completedRate >= 60) { | ||
| setEmoji("😚"); | ||
| } else if (completedRate >= 40) { | ||
| setEmoji("🙂"); | ||
| } else if (completedRate >= 20) { | ||
| setEmoji("🤔"); | ||
| } else if (completedRate >= 0) { | ||
| setEmoji("😔"); | ||
| } | ||
| }; | ||
|
|
There was a problem hiding this comment.
우와.....!!!!!!!!!!!! 👍 이런 디테일 너무 감동입니다 !!!~ 센스에 감탄하고 가네요 투두리스트에 적합한 것 같아요 😍
There was a problem hiding this comment.
증말 깔끔하고 멋지고 세심한 코드네요.. 저도 뭔가 조언하고 싶은데 너무 잘 짜셔서 뭐라고 조언 드릴 것이.. 없는데 한번 계속 생각하면서 쥐어짜 보겠습니다:)
There was a problem hiding this comment.
이 부분 센스 너무 좋아요 ... 코드와 센스 모두 배워갑니다... 채연님 짱 👍
src/App.js
Outdated
| <Header color="grey" size="10px" marginBottom="0px" bold="normal"> | ||
| {new Date().getFullYear() + | ||
| "년 " + | ||
| (new Date().getMonth() + 1) + | ||
| "월 " + | ||
| new Date().getDate() + | ||
| "일 " + | ||
| week[new Date().getDay() - 1] + | ||
| "요일"} | ||
| </Header> | ||
| <Header>To Do List</Header> | ||
|
|
| {tasks.map((i) => | ||
| i.done ? ( | ||
| <></> | ||
| ) : ( | ||
| <TodoTask | ||
| task={i} | ||
| removeTask={removeTask} | ||
| toggleTask={toggleTask} | ||
| /> | ||
| ) |
There was a problem hiding this comment.
i라는 네이밍은 명확하지 않은 부분이 있어서 item과 같은 네이밍을 짓는 건 어떨까요?
| overflow-y: auto; | ||
| height: 190px; | ||
| &::-webkit-scrollbar { | ||
| width: 4px; | ||
| } | ||
| &::-webkit-scrollbar-thumb { | ||
| border-radius: 2px; | ||
| background: #ccc; | ||
| } | ||
| `; |
There was a problem hiding this comment.
우와 스크롤바 커스텀도 정말 좋네요~! 이런 사소한 디테일도 정말 좋네요
| const nextId = useRef(1); | ||
| const addTask = (text) => { | ||
| const task = { | ||
| id: nextId.current, | ||
| text, | ||
| done: false, | ||
| }; | ||
| setTasks(tasks.concat(task)); | ||
| nextId.current += 1; | ||
| }; |
There was a problem hiding this comment.
useRef 를 이용해서 id 를 지정하신 이유가 있을까요?? (개인적인 궁금증..)
|
성취도에 따라 이모티콘이 바뀌는게 너무 인상깊었어요!!!! 디테일에 감탄하고 갑니다:) |
|
|
||
| return ( | ||
| <form style={{ flexDirection: "row" }} onSubmit={onSubmit}> | ||
| <InputBox |
There was a problem hiding this comment.
앗 이렇게 form 태그를 쓰는 거군요!!! 저는 귀찮게
const onKeyPress = (e) => {
if (e.key == 'Enter') {
onReset();
}
};
로 input 처리를 했는데.. 배워갑니다:)
There was a problem hiding this comment.
Form 태그 안에 button 태그를 넣어주면 엔터키를 누르거나 버튼을 눌렀을 때 submit event를 처리할 수 있습니다!
| const toggleTask = (id) => { | ||
| setTasks( | ||
| tasks.map((task) => | ||
| task.id === id ? { ...task, done: !task.done } : task | ||
| ) | ||
| ); | ||
| }; |
There was a problem hiding this comment.
와 이부분 정말 효율적이네요 .. boolean을 이용하면 이렇게 쓸 수도 있겠군요,, 배워갑니다!
| let todoTaskNum = 0; | ||
| tasks.map((task) => (task.done ? todoTaskNum : todoTaskNum++)); | ||
|
|
||
| //완료 비율 | ||
| let completedRate = 0; | ||
| if (tasks.length != 0) { | ||
| completedRate = parseInt( | ||
| ((tasks.length - todoTaskNum) / tasks.length) * 100 | ||
| ); | ||
| } | ||
|
|
||
| const [emoji, setEmoji] = useState(""); | ||
|
|
||
| const _setEmoji = () => { | ||
| if (completedRate >= 80) { | ||
| setEmoji("😍"); | ||
| } else if (completedRate >= 60) { | ||
| setEmoji("😚"); | ||
| } else if (completedRate >= 40) { | ||
| setEmoji("🙂"); | ||
| } else if (completedRate >= 20) { | ||
| setEmoji("🤔"); | ||
| } else if (completedRate >= 0) { | ||
| setEmoji("😔"); | ||
| } | ||
| }; | ||
|
|
| const Image = styled.img` | ||
| width: 16px; | ||
| height: 16px; | ||
| margin-bottom: 7px; | ||
| `; | ||
|
|
There was a problem hiding this comment.
cursor: pointer 속성을 주시면 ui가 더 직관적일 것 같아요!
중복된 코드를 작성하지 않으려고 많이 노력했는데 이 과정은 역시 언제나 어렵네요
어떻게하면 더 효율적으로 작성할 수 있을까 (파일 저장이나 함수 위치 등 모두 포함) 많이 고민이 되는 과제였습니다..
아직 이 부분에서 많이 부족하다고 느껴서 앞으로 과제하면서 차차 방법을 터득했으면 좋겠네요 😓
배포 링크
https://react-todo-16th-chaeyeonan.vercel.app/
KEY QUESTION
1. Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
말 그대로 가상DOM이다. 실제 DOM을 추상화하여 자바스크립트 객체로 구성하여 사용한다. 실제 DOM을 사용하면 렌더링하는 과정이 반복된다. virtual DOM을 사용하면 렌더링이 되지 않는 곳에 변화를 주어 연산 비용이 적다. 또한 virtual dom 을 통해서 렌더링 과정을 자동화, 추상화 하고 변화가 일어난 부분을 알아챌 수 있다
2. 미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?
컴포넌트를 기반으로 원하는 부분을 수정하고 사용하여 개발할 수 있어서 매우 편리하였다. 또한 props와 state로 상태를 관리할 수 있다는 점도 매우 편리하였다
3. React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?
react에서 상태는 컴포넌트의 변경 가능한 데이터 저장소이다. ('리액트를 다루는 기술' 참조)
구현하면서 값을 변경하고 싶은 경우 state를 통해 원하는 값으로 변경하게 할 수 있어서 매우 편리하였다. 상태를 관리할 수 있는 대표적인 방법으로는 Context API, Redux, React Query 등이 있다.
4. Styled-Components 사용 후기 (CSS와 비교)
원하는 파일에 바로 styled를 적용할 수 있어서 편리하였고, 굳이 className을 지정해주지 않아도 styled component로 직접 적용할 수 있어서 편리하였다. 또한 props로 받아 원하는 부분에 컴포넌트에 따라 변경해줄 수 있는 것도 유용하였다.