241102 / 커밋 메세지 변경 없이 커밋 수정하기, 기술스택 뱃지, 날씨 카드 애니메이션 [...Array(n)].map((_, index) => ...)
Weather Claus 프로젝트 | TIL
오늘 할 일
readme 기술스택 뱃지 추가- 애니메이션 계획 짜기
애니메이션 작업
오늘의 에러
(알고보니 에러는 아니고 커밋 메세지 입력창)
Found a swap file by the name ~
최신 커밋된 파일에 url 하나가 빠져서 그것만 추가하고 수정하려고 했더니
뭔가 예. 에러가 났습니다
(git commit --amend 하고 편집기 보고 이게 뭐지 해서 그냥 꺼버리고 다시 똑같이 git commit --amend 하니까 이미 있는 파일? 이런 식으로 나온 거 같음)
d 누르고 다시 편집기로 이동했는데 그냥 끄고 다시 함
이게 보니까
git add .
git commit --amend << 까지만 해서 커밋 메세지 수정 창이 뜬 거 였음나는 메세지 수정할 거 없고 하나만 추가해서 다시 커밋 수정하고 싶은 거라
git add .
git commit --amend --no-edit (커밋 메세지 변경 없이)
git push --force (원격에 push 했기 때문에 강제로 다시 넣어줌)요렇게 하면 되는 거 였음 ㅡ 수정 완료
readme 기술스택 뱃지 작성 완료
전체 readme라 이정도로 충분하지 않을까 싶음
기술스택뱃지는 거의 복붙하는 방식.
https://github.com/Ileriayo/markdown-badges?tab=readme-ov-file#table-of-contents
위에 없는 것들은
https://simpleicons.org/?q=redis
여기서 컬러 가져와서 로고명이랑 같이 작성만 해주면 됨
<img src="https://img.shields.io/badge/로고명1-컬러명?style=for-the-badge&logo=로고명2&logoColor=white">-> 로고명을 소문자로 작성해도 대문자로 들어가서 그냥 다 소문자로 맞춰줌
애니메이션 계획
- 날씨 카드 시간차 등장
- footer 그라데이션 내용 등장 (보류)
- ?
날씨 카드 애니메이션 작업
{[...Array(3)].map((_, index) => (
<motion.div key={index} variants={childVars}>
<WeatherCP />
</motion.div>
))}
framer motion을 사용해 애니메이션 구현 중인데
날씨 카드가 시간차로 등장하는 모션 작업 중.
근데 날씨 카드 3개가 순서대로 나타나야하는데 동시에 올라와서
흐음- 이 되었는데 지피티로 해결방안을 얻음 (스택오버나 다른 검색결과도 마땅치 않았음)
[...Array(3)].map((_, index) => ()뭔가 익숙치 않은 모습이라 이런게 흔하게 사용되냐고 물어봤더니 그렇대
대답을 공유함
[...Array(n)].map((_, index) => ...)와 같은 방식은 React에서 특정 컴포넌트를 반복해서 렌더링할 때 흔히 사용하는 패턴 중 하나입니다. 특히 고정된 개수의 요소가 필요할 때 유용하며, 자주 사용됩니다.
고정된 수의 컴포넌트 렌더링:
특정 개수만큼 반복이 필요한 경우에 이 방식이 간결하고 효과적입니다.
[...Array(n)]로 간단히 길이가 n인 배열을 만들 수 있고, 각 요소의 값을 따로 지정할 필요가 없습니다.반복 요소에 key 제공:
map 함수로 렌더링할 때 index를 사용하여 각 요소에 고유한 key를 부여할 수 있습니다.
React에서는 반복 요소에 key 속성이 필요하며, index는 간단하게 고유값을 생성하는 방법입니다.불필요한 변수 생략 가능:
_는 자리 표시자로, 요소의 값이 필요 없을 때 주로 사용합니다. 이로 인해 코드가 깔끔하게 유지됩니다.
사용 사례
컴포넌트를 고정 개수만큼 반복할 때:
별점(⭐⭐⭐), 로딩 스피너, 카드형 UI 등의 경우 [...Array(5)].map(...)처럼 반복해서 컴포넌트를 렌더링할 때 자주 사용됩니다.
리스트 요소의 간단한 애니메이션:
Framer Motion 같은 라이브러리에서 staggerChildren과 함께 순차적인 애니메이션을 적용할 때 유용합니다.
샘플 데이터 없이 레이아웃만 먼저 잡을 때:
개발 중에 목업 데이터를 사용하기보다는, 임시로 고정된 수의 요소를 렌더링하면서 레이아웃을 미리 확인할 수 있습니다.
날씨 카드 애니메이션은 완료지만 수정해야할 부분 :
공간이 고정되어있지 않아서 페이지 로딩 처음에 footer가 올라옴
-> 문제 해결 ! min-height을 넣어서 고정된 높이를 설정해주었음
(이미 커밋했기 때문에 오늘 했던 최신 커밋 수정법으로 다시 푸쉬해줌
-- 복습도 하고 일석이조자나)
브랜치를 바꿨더니 또 에러.
아까는 분명 에러따위 없었는데 왜 갑자기 리액트 아이콘 안 되는 것이죠
npm install react-icons --save설치로 해결완료 ! ㅠㅠㅠ 이렇게 금방 끝나다니 웬일 + 해피야
왠지 npm 사이트에서는 --save는 없었는데
아이콘 사이트에는 있길래 어쩌나 해서 빼고 설치했더니 이렇게 되는 거였음 🥹
빡셌던 하루.. 뭔가 많이 한 거 같기도 하고 ..
스피너는 내일 마저 이어서 하겠다
