20.08.07:: TIL

오늘의 한 일

---

• superfluid 메인페이지 (react-scroll-rotate/ react-slick)

 

 

 

새롭게 배운 것

---

• 오늘 처음으로 hook을 이용해서 react-slick을 사용해보았다. 사용하면서 useState를 처음 이용해보니 신기했다. 그러나.. 신기함은 잠시.. arrow가 왜 안보이지...? 한참을 헤매고 보니 "background-size: contain;" 을 해야했다... ㅎㅎㅎ size를 개별로 또 지정해주어야 하는구나..!! 
• 메인페이지에 스크롤에 따라 rotate 움직여야 하는 사진과 박스가 있었다. 동료와 한참을 검색해 보니 react-scroll-rotate라는 라이브러리가 있었다. 이걸 이용해보니 아주 부드럽게 스크롤에 따라 rotate를 해주었다. :) 
• "throttle" 라는 것을 처음 들었다. scroll 이벤트에 따라 한땀한땀 rotate되는 함수를 만들어주다보니 setState에 너무 과부하가 걸렸는지, 스크롤을 움직일 때마다 다른 글씨들이 깜박깜박 움직였다. 멘토님께 여쭈어보니 onscroll을 이렇게 계속 호출하면서 스크롤 1마다 함수를 사용하는 것은 엄청나게 부담 되는 일을 하고 있는 거라고 하셨다. 그래서 알려주신 힌트가 "throttle"! 
• 엄청 검색하면서 찾아보니 throttle 과 debounce가 있는데 onclick, onscroll 과 같은 이벤트 핸들러를 사용하고 있을 때 콜백이 너무 빠르게 호출되지 않도록 콜백이 실행되는 속도를 제어하는 역할을 하는 것이다. 자세히 구글링해보니 지금 내가 사용하는  scroll 이벤트에서는 부드러운 효과를 주지 못할 것 같아서 사용하지 못했지만, 다음에 기회가 된다면 사용해 보고 싶은 기술이다.

 

보완해야할 부분

---

• styled-component 사용이 미숙해보인다. 좋은 코드들을 참조해보자.

 

위코드

---

오늘 드디어 메인페이지 UI를 다 구현했다.... 와.. 장장 5일이 걸렸다.

 

css가 참 많은 아이들이어서 어려웠고, 

그리고 처음보는 css들도 많이 사용해보고, 

hook, styled-component도 처음 사용해보니 시간이 꽤 걸렸다.

 

 

css로 한땀 한땀 장인정신으로 만드니 내 프로젝트에 더 애착이 가는 것 같다.

 

이젠, 리팩토링 타임~~ :)