react

A collection of 4 post

React Custom Hooks로 scroll animation 만들기 CountUp편

React Custom Hooks로 scroll animation 만들기 CountUp편 해당 글은 김주성님의 세미나를 듣고 작성한 글 입니다. 보통 금액이나, 사용자 수 등 숫자와 관련된 내용에 Animation을 추가한다 하면 Count Animation을 많이 사용합니다. React Custom Hooks을 사용하면 Scroll에 반응하는 CountUp Animation을 재사용 가능하게 만들 수 있습니다. useScrollCount 구현하기 스크롤 타이밍에 따라 숫자가 CountUp 되는 animation은 크게…

React Custom Hooks로 scroll animation 만들기 FadeIn편

해당 글은 김주성님의 세미나를 듣고 작성한 글 입니다. React Custom Hooks로 scroll animation 만들기 FadeIn편 작년에 React Hooks이 정식 릴리즈 된 이후 많은 사람들이 Hooks을 사용하고 있습니다. Hooks를 사용하는 가장 큰 이유는 바로 컴포넌트로 부터 상태 관련 로직을 추상화 할 수 있고, 별도의 함수로 빼서 재사용이 가능하기 때문인데요. 상태관리 로직의 재사용 의 특징을 활용해 다양한 Custom Hooks를 만들어 사용 할 수 있습니다. 보통 웹에 Animation…

개츠비를 사용한 서비스 개발기

회사에서 GatsbyJS를 사용하여 채용페이지를 개발 하였습니다. 채용 사이트를 만들면서 GatsbyJS를 사용하였는데요. React를 할 줄 알면 매우 쉽게 사용할 수 있지만 직접 배포해 보지 않으면 놓치기 쉬운 문제들도 꽤 있었습니다. 지금부터 채용 사이트 출시까지의 과정에서 어떤 고민과 문제가 있었는지 그리고 어떻게 풀어 나갔는지 이야기 해보려고 합니다. 👇👇 자세한 내용은 아래 링크로 👇👇 React밖에 모르는 당신에게. GatsbyJS한 잔, ‘채용~’

API Cache를 사용해 SPA 페이지 사용자 경험 개선하기(w. axios, react)

API Cache를 사용해 SPA 페이지 사용자 경험 개선하기 (w. axios, react) 대부분의 SPA(Single Page Application)는 화면을 그리는 로직들이 모두 클라이언트에 존재하고, 화면을 그리는데 필요한 데이터만 서버에서 요청하여 가져오는 방식으로 구현하고 있습니다. 이렇게 할 경우 MPA(Multiple Page Application)보다 자연스러운 사용자 경험(UX)나 필요한 리소스만 부분적으로 로딩하기에 성능적으로 유리한 장점이 있습니다. 그러나 SPA…

🌝동글동글 🌚