[2주차] 변지혜 미션 제출합니다. #3
Conversation
| if (totalTasks !== 0) { | ||
| ratio = completedTasks / totalTasks; | ||
| } | ||
|
|
There was a problem hiding this comment.
클릭하고 입력 받는 칸과 progress-bar로 완료 할 때마다 percentage가 올라가는 디자인이 너무 이뻐요 . 많은 style이 존재하는 것을 배워가네요 !
| setList([...list, newTodo]); | ||
| localStorage.setItem("list", JSON.stringify([...list, newTodo])); | ||
| }; | ||
|
|
There was a problem hiding this comment.
todo를 추가하는 기능에, getTodo보다 더 직관적인 addTodo나 createTodo를 사용하는 것이 좋을 것 같아요 !
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| `; | ||
|
|
There was a problem hiding this comment.
제가 리뷰받았던 내용인데, word-break: break-all;를 추가해 영어길이가 길어졌을 때, 깨지는 것을 방지하는 것이 좋을 것 같아요!
| border-radius: 0.3125em; | ||
| background-color: transparent; | ||
| cursor: pointer; | ||
| `; |
| } | ||
| `; | ||
|
|
||
| export default GlobalStyle; |
There was a problem hiding this comment.
html{ font-size: 62.5%; } 를 추가하면, rem을 사용할 때, 10px = 1rem으로 사용할 수 있어요!
| &::-webkit-scrollbar-thumb { | ||
| background: #7adb84; | ||
| border-radius: 1.875em; | ||
| } |
| <div | ||
| class="progress-bar" | ||
| style={{ width: `${ratio * 100}%` }} | ||
| ></div> |
| height: 1.25em; | ||
| border-radius: 0.3125em; | ||
| background-color: #7adb84; | ||
| transition: width 0.3s ease-in-out; |
There was a problem hiding this comment.
ease-in-out 과 같은 속성은 처음 보는데 저도 다음에 사용해봐야겠습니다 !
| {list.map((data) => | ||
| data.completed ? ( | ||
| <></> | ||
| ) : ( | ||
| <TodoListItem | ||
| key={data.id} | ||
| todo={data} | ||
| deleteTodo={deleteTodo} | ||
| toggleTodo={toggleTodo} | ||
| /> | ||
| ) | ||
| )} |
There was a problem hiding this comment.
저는 completed 기준으로 todolist, donelist 따로 array를 저장한 후에 map 함수를 사용하였는데, 삼항연산자를 이용해서 예외처리를 하는 방법도 좋은 방법인거 같습니다!
src/components/TodoTopbar.js
Outdated
| </ProgressContainer> | ||
| <TodoForm | ||
| onSubmit={submitTodo} | ||
| style={{ display: popupVisible ? "none" : "flex" }} |
There was a problem hiding this comment.
popupVisible 로 동적 UI를 구현한 구조가 깔끔해서 코드 가독성이 좋습니다! 저도 앞으로 가독성을 더 고려해서 짜도록 해야겠네요😊
2주차 미션
안녕하세요! 18기 프론트 변지혜입니다.
react가 바닐라 js보다는 익숙하다고 생각해왔었는데,
한 번 바닐라로 만들어봤던 걸 똑같이 react로 만드려니 처음에는 조금 헤맸습니다.
React로 같은 결과물을 만들어보니 훨씬 다양한 방식을 고민해볼 수 있었던 과제였습니다~
추가 기능에 욕심이 났지만.. 1주차 구현에 집중해보았습니다!
배포링크
배포 링크
Key Questions
이외에도 useRef, Custom Hook 등 상태를 관리할 수 있는 다양한 Hook가 있습니다.
후기
context를 사용해볼까 싶었지만 시간도 시간이고, 주어진 안내 멘트에 기본 react만 활용해도 된다는 말이
은연 중에 그렇게 하기를 추천하는 것일까 하여 useState 로 간단하게 작성해보았습니다.
확실히 컴포넌트 단위로 쪼개니 코드 보기도 편하고 React의 편리함을 실감하는 과제였습니다!
1주차 과제를 재현하는 데에 충실했습니다. 다른 기능들을 넣었다면 더 좋았겠다는 아쉬움이 남아있긴 합니다..😅
1주차 코드 리뷰를 참고하여 코드를 보완했습니다. ( 반응형 단위, list container scroll 등 )
여전히 많이 아쉬운 코드와 기능들이지만... 제출에 의의를 둬봅니다....!
편하게 피드백해주시면 많은 도움될 것 같습니다!!
p.s. 로컬에서는 파비콘까지 잘 보이는데 왜 배포링크에서는 안 보일까요..? 1주차와 똑같은 파비콘이긴 하지만 이유를 아신다면 알려주심 감사하겠습니다🥲