깃허브
목표
- 스크롤하면 컨텐츠가 차례로 보여지는 메인 페이지를 구현한다.
- 시간차를 갖고 나타나는 gif 애니메이션과 무한 로테이션 슬라이드를 구현한다.
소감
👸 요구사항
-
이번 과제에 포함된 슬라이드(Carousel) 기능은 프리온보딩 선발과제 때와 달리 라이브러리를 사용해서 구현하였다. (react-slick 라이브러리) 무한 로테이션과 버튼을 누르면 넘어가는 기능은 구현에 성공했는데, 위쪽에 아이 얼굴이 슬라이드와 함께 넘어가는 부분과 땅콩 로고가 시계처럼 움직이는 애니메이션은 아직 구현하지 못했다.
-
gif 애니메이션에 시간차를 두는 것은 프로젝트 이후에 따로 추가하였다. AOS 라이브러리의 속성을 사용하여, Check 애니메이션에 시간차를 두고 구현하는 데 성공했다.
🌹 Next.js
월요일 수업을 들으면서 Next.js의 라우팅 부분이 너무 흥미로웠다. 리액트에서 그토록 반복되던 라우팅 설정에서 이렇게 간단하게 해방되다니..👏 하지만 이번 과제는 아쉽게로 원 페이지라 Next의 라우팅 기능을 경험해보지는 못했다.
Next가 서버사이드렌더링(SSR) 방식이라는 것은 빠르게 로딩되는 첫 HTML 화면을 통해 알 수 있었다. 첫 로딩 때 아예 흰 화면인 리액트와는 달리, 뭔가를 화면에 보여주어서 로딩 속도가 훨씬 빠르게 느껴졌다.
⛳ Cypress
이번 과제에서 cypress를 통해 E2E 테스트를 해보려고 했다. 하지만 세팅은 했는데 애니메이션과 스크롤이 전부인 화면에서 무엇을 테스트해야 할지를 잘 몰라서 아쉽게도 실제 테스트를 해보지는 못했다.
=> 이 부분은 프로젝트 이후에 따로 조사를 해보았다.
사용자가 꼭 직접적인 인터랙션(ex. 마우스 클릭)을 하지 않아도 화면 상에서 경험하게 되는 모든 것이 E2E 테스트의 대상이라는 것을 알게 되었다.
예: 스크롤 좌표값을 인식하여 텍스트 애니메이션이 제대로 발동하는지, 스크롤 이후에 동영상이 재생되는지 등
✨ AOS(Animate On Scroll Library)
이번 프로젝트를 통해 알게 된 스크롤 애니메이션 구현이 편해지는 라이브러리이다. 코딩을 처음에 배울 때는 '라이브러리는 쓰면 안 된다'는 말을 자주 들었는데, 주변의 얘기를 통해서 실제 실무에서는 효율성을 위해 라이브러리 사용을 배제하지 않는다는 것을 알게 되었다. 라이브러리의 코드 규칙을 빠르게 파악하여 사용할 줄 아는 능력을 길러야겠다.
