긴긴 추석 연휴를 맞아 백엔드와 협업하는 todo 프로젝트를 완수하기로 했다.
오늘은 삽질이 99%지만 삽질한 시간들이 아까워서 기록이라도 하기로 한다.
오늘의 삽질이 내일의 디버깅이 되기를...
1. todo 완료 기능 만들기
완료기능 코드는 이분 벨로그를 많이 참고했다.
https://velog.io/@hamham/리액트로-ToDo앱-만들기3-완료-표시-삭제-편 (감사합니다)
완료기능의 코드는 다음과 같다
const handleChecked = (id) => {
setTodos(
todos.map((todoItem) =>
todoItem.id === id
? { ...todoItem, checked: !todoItem.checked }
: todoItem
)
);
};
...
<span
onClick={() => {
handleChecked(todo.id);
}}
>
✅
</span>
2. 완료된 Todo 개수 세기
나는 todo 달성률을 나타내고 싶었다.
그러기 위해서는 (완료된 todo 개수 / 전체 todo 개수)의 값을 구해야 한다.
전체 todo 개수는 쉽게 알아냈는데 완료된 todo 개수 세는 것이 나를 2,3시간 동안 괴롭혔다....ㅂㄷㅂㄷ😡
나의 시도는 다음과 같다.
1. 완료된 것을 useState checked에 배열로 담기 → 배열 길이를 재기
완료선택을 할 때마다 특정 todo를 checked 배열에 담는 것이다.
const [checked, setChecked] = useState([]);그리고 제일 마지막에 이 배열의 길이를 구하면 될 거라고 생각했다.
❗️결과
- 완료 이벤트가 일어날 때마다 chekced 배열에 해당 todo를 추가 하고 싶었다. 왜인지는 모르겠지만 setChecked(todoItem)을 작성하면 오류가 발생한다...
그리고 이것은 완료된 todo의 배열을 담는 것이 아니라 클릭된 모든 todo의 배열을 담는 로직이다.. 그래서 실패!
<!--완료 함수-->
const handleChecked = (id) => {
setTodos(
todos.map((todoItem) =>
todoItem.id === id
? ({ ...todoItem, checked: !todoItem.checked }, setChecked(todoItem))<!--오류 발생-->
: todoItem
)
);
};2. useState checked의 초기값을 0으로 두기. 완료를 누를 때마다 +1
이번에는 배열이 아니라 카운트를 하는 방법을 생각해봤다. 하지만 이전과 비슷한 코드 오류가 생겼다.
const [checked, setChecked] = useState(0);
const onClick = () => setChecked((prev) => prev + 1)3. todo.checked가 true인 것의 개수 세기
handledAddTodo 함수에 todo의 객체를 만들고 그 안에 checked key를 만들었다. 위에서 봤던 handleChecked 함수가 클릭할 때마다 이 checked 값을 true, false로 바꾸는 함수인 것이다.
//todo 추가 -> 배열에 담기
const handleAddTodo = (text) => {
if (text === "") {
return;
} else {
const todo = {
id: todos.length,
text,
checked: false,
modify: false,
};
//checked가 true인 값을 가져오기 위함
}
};그렇다면 todo 객체에서 checked(key)가 true(value)인 값을 찾으면 되는 것이 아닌가!! 유레카!!!
그래서 아래와 같은 코드를 썼다.
1️⃣ 첫번째 시도
const countingChecked = () => {
todos.map((todoItem) =>
todoItem.checked === true
? setChecked((current) => [...current, checked])
: setChecked
);
};checked가 ture면 setChecked에 값을 추가하는 것이다.
근데,,,뭔가 값이 이상하게 나왔다.
2️⃣ 두번째 시도
이런 코드도 써보았다.
<div>{(todos.checked === true).length}</div>냅다 todos에서 checked의 value값이 true인 것의 길이를 찾는 것이다. map함수를 쓰는 것도 아니고... 정말 어림도 없는 코드다.
3️⃣ 세번째 시도
구글링을 하다가 특정 value값의 개수를 세는 코드가 있길래 시도해봤다.
const keyOfTodo = Object.keys(todo);
const key = keyOfTodo.filter((key) => todo[key] === true);
console.log(key);
setTodos([...todos].concat(todo));근데 이 코드의 문제점은 todo 객체의 바로!!! 완전 바로!! 뒤에 써야지 먹힌다... (사실 제대로 먹히는 것도 아니다.)
객체에서 띄우면 todo가 정의되지 않았다는 에러가 발생한다.
그리고 이 코드가 실행이 되어도 전체 todos의 배열을 도는 것이 아니라 당장의 todo의 key만 확인해서 개수를 세어주지는 않는다.
완료된 todo 개수 세는 것은 더 고민을 해봐야 할 것 같다.
3. 드롭다운 만들기
todo 페이지에 오늘 하루를 시간별로 리뷰할 수 있는 기능을 만들고 싶었다.
그래서 드롭다운을 이용해서 "몇 시부터", "몇 시까지", "무엇을" 했는지를 표시하고 싶었다.
구글링을 해보니까 드롭다운 구현이 엄청 어려운 것이다...
모르는 개념도 많았고..ㅠㅠ
그래서 오늘은 모르는 개념을 찾아보고 직접 코드 짜는 것은 내일 시도를 해보려고 한다.
드롭다운 코드 구현은 https://velog.io/@poiu0329/React-드롭다운-구현하기 이 벨로그를 참고했다. (감사합니당)
⭐️모르는 개념 정리
1. useRef란?
https://react.dev/learn/referencing-values-with-refs 리액트 공식문서를 참고했다.
- ref는 읽고 수정할 수 있는 현재 속성이 있는 일반 자바스크립트 객체이다.
- 값이 바뀌었을 때 re-rendering을 시키지 않는다.
- 현재 값을 주목한다.
useRef(initialValue)returns{ current: initialValue } - 특정 DOM에 접근하여 DOM 조작을 가능하게 하는 훅
2. hook이란?
react hook은 useState, useEffect, useref의 상위 개념이다.
3. export 하는 두 가지 방법
나는 원래 2번 방법으로만 했는데 1번 방법도 가능하다고 한다.
방법이 2개인 듯
<!--방법 1-->
export const funcA = () => { }
<!--방법 2-->
const funcB = () => { }
export funcB;4. 우테코 지원서 소재 작성하기
우테코 지원이 10월이다. 될 거라는 기대는 하지 않고 지원을 하고 공부하는 과정에서 많은 것을 배울 수 있을 것 같아서 이번 추석 연휴 때 지원서를 작성하려고 한다.
오늘은 대략적인 소재를 작성했다.
이번 질문은 다음과 같다.
📚1. 효과적인 학습 방식과 경험
1) 결과물 중심으로(아웃풋 학습)
2) 주변 환경 설정
3) 진행과정을 시각적으로 정리하기
4) 나의 말로 정리하기
😫 2. 성장 중 겪은 실패와 극복
이중전공 여러번 시도했던 것을 적어보려고 한다.
🏃♀️ 3. 오랜 시간 몰입했던 경험 그리고 도전
- 작년부터 독서를 많이 하고 독서토론 동아리 1년 반 활동, 회장으로 기여했던 것
or - 고3 3월 수학점수 47점 -> 12월 수능 96점 상승
둘 중에 뭘 적을지는 고민해봐야 할 듯
🖥 4. 원하는 프로그래머 모습
이거는 차근차근 생각해봐야징...헷
1일차 수고했다!
