🎄 성장일지 4.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

🌳 (1.0)키워드<br/> 최대한 간단하게 정리, 추후에 보면서 스스로 설명<br/> 🍉 (2.0)경험 위주로<br/> 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성<br/> ❄️ (3.0)정해진 템플릿에 맞춰서<br/> 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성<br/> (3.1)230102부터 시작되는 학습에 관한 내용 추가<br/> (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기!<br/> 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!<br/>

🔑 오늘의 학습 키워드

무한 캐러셀 구현하기

• 캐러셀의 내용들(주로 이미지)가 들어갈 container 컴포넌트를 만든다.
• 캐러셀 컨텐츠 컴포넌트를 만든다.
• 캐러셀의 하나의 영역이 지나가고 난 뒤, container의 스타일에서 transform 스타일을 지운다.
  • 이렇게 하면, 옮겨진 위치는 유지가 되면서 그 다음 다시 transform을 주었을 때 이동시킬 수 있다.
• 무한 캐러셀의 가장 중요한 핵심! 첫번째 캐러셀이 왼쪽으로 옮겨지고 나서 그 첫번째 캐러셀을 container의 끝에다가 집어넣는 작업을 해주어야한다.
  • 마치 배열에서 shift()해서 0번째 값을 뺀 뒤, 다시 push()로 그 값을 넣어주는 느낌..!
  • 이렇게 하면 마치 무한으로 내용이 있는 것처럼 보이게 할 수 있다.

🍀 오늘의 고민 키워드

무한 캐러셀에서 첫번째 요소를 맨뒤로 붙이기 위해서 어떻게 해야하지??

• 정말 정말 잊지말아야할 중요한 것!!! appendChild()는 가장 왼쪽 자식 노드를 떼어내서 맨 뒤로 붙인다.
• 마찬가지로 insertBefore()도 마찬가지다.
• 마치 캐러셀을 구현하기 위해서 있는 api같아서 좀 신기했다.

container.element.ontransitionend = () => {
  container.element.removeAttribute('style');
  container.element.appendChild(container.element.firstElementChild!);
    };

📝 요약 및 하루 간단 회고

오늘 하루종일 캐러셀 구현에만 시간을 썼다. 사실 개념적으로 그렇게 어려울 것 같지는 않아서 쉽게 생각했는데... transition과 transform으로 넘어가는 애니메이션을 고려해서 주려다보니 쉽지 않았다. 같이 공부하는 동료들에게 도움을 구해서 천천히 해결해나갈 수 있어서 좋았다.<br/> 사실 나는 내가 많이 배우고 알게 돼서 다른 사람들에게 가르쳐주고 알려주는 걸 좋아하는 편이다. 그래서 그런지 내가 되려 동료들한테 질문하는 건 망설이는 경향이 있었다.(최대한 내가 공부하고 알아내서 설명하고 싶어서...) 하지만 오늘 캐러셀 구현을 하면서 동료에게 잘 질문하고 그 지식을 받아들이는 것도 정말 중요한 일이라는 걸 느낄 수 있었다. :)

오늘의 잘한 점

• 구현하고자 하는 부분은 거의 다 구현한 점
• 동료에게 질문하고 도움을 요청하기도 한 점

오늘의 아쉬운 점

• 의기소침해졌던 점.

참고

• 없음

undefined