[react-todo-list step1] 김준수 미션 제출합니다. #2
Conversation
gogo1414
changed the title
There was a problem hiding this comment.
안녕하세여 준수님~ 설날 잘 보내셨는가요 ㅋㅋ(떡국먹을래말래)
그리디 프로젝트도 해야되고 미션도 아직 안끝나서 할일이 많았을 거 같아요. 고생하시네요ㅠ
암튼 저는 리뷰를 이어가보도록 하겠습니다.
일단 요구 기능과 컴포넌트 제작과 기능에 대해서 잘 지켜주셨어요! 새로고침시에 할 일 목록이 사라지는것도 괜찮습니다! 실제 어플리케이션 환경에서는 처리를 해주어야겠지만 이 미션은 그것을 학습하기 위한게 아니니까요!
느낀점
전에 실수로 이 문제를 시도했던 적이 있었는데, 그때와 지금이랑 전혀 다르게 문제를 빠르게 해결할 수 있다는게 신기하네요.. 스터디를 통해 배운 것들을 활용해볼 수 있어서 좋았던거 같아요! 저의 성장을 느낄 수 있어서 매우 좋았습니다👍
CSS.. 진짜 지옥 그 자체네요. 제가 손으로 그리고 싶다는 생각이 매우 많이 들었어요...허허
문제를 빠르게 해결할 수 있어서 성장을 느끼셨다니 다행이네요! 뉴스 뷰어 미션보다 훨씬 구성하기 편했을 거라고 생각해요. 컴포넌트의 구성도가 한번에 직관적으로 보였을 거라고 생각합니다ㅎㅎ
그치만 css는 또 다른 문제이죠 ㅎㅎ... 저도 아직 모든 css속성을 다 알지 못합니다. 다만 주로 나오는 속성들이 있고 그 부분들을 반복적으로 쓰다보니 그냥 잘(?) 쓰게 되었어요.
고생하셨습니다! 이번 미션은 step2를 위한 발판이기에 이렇게 리뷰하는것으로 마칠게요! step2미션 화이팅입니다!!!
| &::placeholder { | ||
| color: #fff; | ||
| opacity: 1; | ||
| } |
There was a problem hiding this comment.
placeholder는 뭔가요?? 왜 이것을 사용하게 되었는지 알려주세요!
| &::-webkit-scrollbar { | ||
| width: 8px; | ||
| } |
| <TodoListContainer> | ||
| {todos.map(todo => ( | ||
| <TodoListItem | ||
| key={todo.id} |
There was a problem hiding this comment.
좋네요! App.jsx 에서 todoId를 useRef를 통해 가져가고 있기 때문에 겹칠일이 없어 React의 렌더링 패턴에 방해를 주지 않을것 같습니다! 👍🏻
| const TodoListItem = ({ todo, onRemove, onCheck }) => { | ||
| const { id, task, checked } = todo; | ||
|
|
||
| return ( | ||
| <TodoItemContainer> | ||
| <CheckButton onClick={() => onCheck(id)}> | ||
| {checked ? <CheckIcon /> : <UncheckIcon />} {/* 체크 상태에 따라 아이콘 변경 */} | ||
| </CheckButton> | ||
| <TodoTask>{task}</TodoTask> | ||
| <RemoveButton onClick={() => onRemove(id)}> | ||
| <RemoveIcon /> | ||
| </RemoveButton> | ||
| </TodoItemContainer> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
현재 체크 되었을 때, 미션에 있는 링크에서는 아래와 같이 글자가 회색이 되며 글자위에 선이 그어지고 있어요. 반면 준수님의 체크에서는 그렇지 않은 것 같아요! step2때 이 문제를 해결해주세요!
참고로 체크박스 안의 색깔이 있는 컴포넌트는 MdCheckBox,MdCheckBoxOutlineBlank 입니다. (Outline이 빠짐)
미션 링크
준수님의 로컬
Tip
css속성과 CSS-in-JS의 props 특성을 이용해서 생각해보세요!
There was a problem hiding this comment.
GlobalStyle을 쓰셔서 원하는 CSS를 최상단에서 입힌 이유가 있을까요? App.css 를 쓰는것과 이렇게 하는 방법 중에 이것을 택한 이유를 들려주세요!
안녕하세요, 리뷰어님😊
새해 복 많이 받으세요! 이번 연휴가 유독 길어서 시간 가는 줄 몰랐네요ㅎㅎ
이제 프론트엔드 스터디도 마지막을 향해 달려가고 있네요!!
그럼 리뷰 잘부탁드립니다!
늦게 제출해서 죄송합니다🥲
요구 기능
컴포넌트 제작 및 기능 지키기
TodoTemplate,TodoInsert,TodoListItem,TodoList모두 구현했습니다!느낀점
궁금한점
참고한 자료
실행 영상
2025-02-05.6.11.42.mov