내배캠 WIL & TIL

TIL) 스파르타 개발일지 23-03-08

동전이 떨져서 쌓이는 애니메이션을 구현하고 싶었다... 처음에는 해당페이지에서 애니메이션을 구현하다가 함수까지 추가하면 너무 길어질걸 알기에... 미리 컴포넌트로 빼서 작성하였다. 코드는 아래와 같다. (이것도 너무 길어...) 구현하고보니 이미지 3개로 쌓이는 이미지를 나타내는 것은 어렵다는 생각이 들어서... 맵을 돌려서 해당 이미지를 반복적으로 나타내고, translateX속성을 사용해서 위치만 좀 건들여주기로했다. 리펙토링 전 import React, { useRef, useEffect, useState } from "react"; import styled from "styled-components"; const SecondSectionImgAnimation = (direction, duratio..

TIL) 스파르타 개발일지 23-03-07

지난 시간에는 랜딩 페이지의 애니메이션을 실행시키기 위하여, 스크롤 이벤트를 활용하려했지만. 그로 인해서 스크롤 시 이벤트가 계속해서 발생하여 전체적으로 부하, 쓰로틀링 등 최적화 되지않은 상태를 야기하였다. 그를 해결하기 위해 () 를 사용하였고, 그 결과 코드는 아래와 같다. 초기 문제로는 isAnimated 의 값이 정상적으로 true가 되지만 이미지의 애니메이션은 새로고침시 작동하는 문제가 있었다. 코드에서 애니메이션이 useEffect로 인해 isAnimated의 값이 true로 변경되면, 해당 컴포넌트의 className 속성에 "animated" 값을 추가하는 것으로 애니메이션 효과를 적용하고 있었고, 이를 해결하기위해서 styled-components로 작성한 CSS 코드에서 ".anima..

TIL) 스파르타 개발일지 23-03-06

이미지 애니메이션을 위해서 스크롤을 통하여 해당 지점에 도착 시 이벤트가 발생하도록 코드를 구현해보았다. useEffect(() => { const handleScroll = () => { if ( window.pageYOffset + window.innerHeight > fourthSectionRef.current.offsetTop ) { setIsAnimated(true); } }; window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); 하지만 스크롤 이벤트가 스크롤 시에 지속적으로 발생하여, 별로 좋은 코드는 아닌듯했다.

TIL) 스파르타 개발일지 23-02-23

서비스 페이지에서 금융상품을 선택하여, 비교하기 팝업으로 넘겨주는 과정에서 생긴 이슈다. 분명 팀원분이 ID값만 필요하면 된다고 하셨던 것 같은데... 초기에는 Data()를 객체화 해서 넘겼다가. 단순히 ID 값만 필요한것이면, 굳이 전체데이터를 통으로 넘길 필요가 있나 싶어서 해당 코드를 수정하여, ID값만 배열 저장되도록 구현했는데. 오늘 다시 말씀하시길 ID값이 객체로 넘어와야한다. 라고하셨다.. "데이터를 팝업에선 읽지않도록 하기로 하지않았냐" 라는 것이다. firebase 특성상 지속적으로 데이터를 통신하면 무료 할당량이 초과나기 때문에 이 얘기를 얘기했던걸로 기억했고, 인자로 받아서 해당 상품의 정보를 가져오는건... 사실 상관이 없는데 말이다. 하지만 기존 작업해두었던 코드의 기록이 남아있..