NextJS와 GatsbyJS 중 고민하는 당신에게 React를 배우다 보면 자연스레 한번쯤은 Facebook에서 만든 Create React App(React 웹 개발용 Boilerplate)를 접해 보셨을 겁니다. 이 이외에도 React를 토대로 만들어진 프레임워크들이 있다는 것을 알고 계신가요? React가 웹 앱 개발에 자리잡아 가는 과정 속에서 많은 개발자들은 웹 앱 개발, 사용자 경험 향상 및 마케팅 측면에서 보다 효율적으로 할 수 있는 방법을 찾아가게 되었고, 그 과정 속에서 GatsbyJS와 Next.js…
React 프로젝트에 TDD 적용하기 (Using react-testing-library) 최근에 회사 팀원분을 통해 react-tesing-library에 대한 소개와 TDD 적용기를 간단한 세미나를 통해 들은 적이 있습니다. 짧은 시간이었지만 나는 유닛테스트 정도의 테스트 코드만 주로 작성해보았던 터라 꽤 재미있게 들었고, 좀 더 찾아보았습니다. 왜 TDD…
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 Hooks이 정식 릴리즈 된 이후 많은 사람들이 Hooks을 사용하고 있습니다. Hooks를 사용하는 가장 큰 이유는 바로 컴포넌트로 부터 상태 관련 로직을 추상화 할 수 있고, 별도의 함수로 빼서 재사용이 가능하기 때문인데요. 상태관리 로직의 재사용 의 특징을 활용해 다양한 Custom Hooks를 만들어 사용 할 수 있습니다. 보통 웹에 Animation…
회사에서 GatsbyJS를 사용하여 채용페이지를 개발 하였습니다. 채용 사이트를 만들면서 GatsbyJS를 사용하였는데요. React를 할 줄 알면 매우 쉽게 사용할 수 있지만 직접 배포해 보지 않으면 놓치기 쉬운 문제들도 꽤 있었습니다. 지금부터 채용 사이트 출시까지의 과정에서 어떤 고민과 문제가 있었는지 그리고 어떻게 풀어 나갔는지 이야기 해보려고 합니다. 👇👇 자세한 내용은 아래 링크로 👇👇 React밖에 모르는 당신에게. GatsbyJS한 잔, ‘채용~’
API Cache를 사용해 SPA 페이지 사용자 경험 개선하기 (w. axios, react) 대부분의 SPA(Single Page Application)는 화면을 그리는 로직들이 모두 클라이언트에 존재하고, 화면을 그리는데 필요한 데이터만 서버에서 요청하여 가져오는 방식으로 구현하고 있습니다. 이렇게 할 경우 MPA(Multiple Page Application)보다 자연스러운 사용자 경험(UX)나 필요한 리소스만 부분적으로 로딩하기에 성능적으로 유리한 장점이 있습니다. 그러나 SPA…