답답한 코드가 많으니 (시행착오 ..4시간 돌파) 시청을 주의하세요 ^_ㅠ
수정한 부분
-
framer motion을 사용해서 애니메이트
-
Animate Present 사용해서 카드 섹션이 띠용띠용 나올 수 있도록 array Atom을 생성하고 key를 통해 구별할 수 있도록 함
-
무한 반복 시계 만들기(setActive(false)삭제)
-
Card, Buttom jsx 컴포넌트 화, 구조화 (styled Component 요소 재활용하기)
-
count, goal 올라가는 로직 구현, 확인 (이건 비교적 쉬웠음 , selector을 사용할 수 있을텐데 일단 여기까지..)
문제 / 시도한 것들
const [array, setArray] = useState<string[]>([]);
array 를 아톰에서 그냥 Atom으로 넘겨주려다가 selector 사용으로 변환하면서 로직변경
-
문제
array를 다른 곳에서는 인식하는데, jsx 쪽에서 인식하지 못함 (array에 seconds 요소를 추가하는 것에 문제 발생) -
시도한 것
array 를 아톰에서 그냥 Atom으로 넘겨주기 => setArray를 통해 setArray((prev) => [...prev, seconds]); 다음 코드를 secondsFn 혹은 loop가 돌때마다 진행할 수 있도록 함
=> 문제점 : 제대로 item이 array에 추가되지않음
array 를 아톰에서 selector로 넘겨주되, push Array를 통해 second값을 넣은 후 array 리턴
=> 문제점 selector 의 get은 수정이 불가능한 read-only로 map 함수 사용불가
위의 방법을 유지하되 array[0] 으로 아예 보여주고 싶은 개별 second 아이템을 리턴하도록 함
=> 문제점(사실 문제가 아닌데 그때는 문제라고 생각함) : 카드가 밀리는 현상 발생 / 이 방법으로 최종 구현함
- 문제
모션에서 카드가 밀리는것처럼 보이는 현상이 있다. 흠 - 시도한 것 (로직문제로 잘못생각함)
array를 selector 에서 set을 활용하여 map을 할 수 있는 쓰기가능한 형태로 바꿔주려고 시도함
const [array, setArray] = useRecoilState(arrayAtom);
export const arrayItemAtom = selector({
key: "arrayItem",
get: ({ get }) => {
let array = [];
array.push(String(get(timerSecondsAtom)));
return array;
},
set: ({ set }, newValue) => {
let array = [];
set(timerSecondsAtom, array.push(String(newValue)));
}
setArray((prev) => [...prev, String(seconds)]);결론 : 카드가 애니메이션 설정과 달리 밀리는 것 => 로직이 아닌 css 디자인의 문제
absolute를 통해 minute과 second card section을 아예 고정해놓고 각자 영역을 확보해 줌
깨달은 부분
문제는 항상 코드가 아닐 수 있다.
문제를 정확히 파악하자 .
css js 등 기본에 충실하자 .
에러코드 읽는게 적응이 되어서 좋다.
Recoil을 더 잘 쓸 수 있는 부분이 많을 것 같은데 아직 재래식에서 많이 벗어나지 못한것 같아 아쉽다.
그래도 저번보다는 아주 많이 발전했다! (이해하고 구현해서 다행이다)
저번처럼 삐걱거리지는 않는다 ㅠㅠ
추가수정
- count, goal 올라가는 로직 selector을 사용해서 구현
- 기타 컴포넌트 재사용 할 수 있는 부분, atom줄일 수 있거나 Recoilstate줄일 수 있는 부분 고민
참고자료
무의식적으로 공식문서를 보고 있었는데 그래서 더 오래걸렸던 것 같다. chat GPT를 사용하지 못하고 있어서 아쉽기도 하지만 오히려 좋다고 생각해보자 (아예 동작 GPT이시여)
