[솔로프로젝트] My small trip(1) - parallax scroll

[솔로프로젝트를 react, next.js, recoil, tailwind를 사용해 개발]

 

솔로프로젝트를 구현해 본적이 없기때문에 이번에는 내가 그동안 써봤지만 익숙하지 않은, 또는 써보고 싶은 스킬들을 모아모아 세팅 > 구현 > 배포까지 해보기로 했다. 

 

1. window에 VScode, node.js를 설치

 

2. create-next.js-app으로 next.js기반의 react환경을 만들어줬다.

chocolatey를 설치하는데 실패했는데, 그래도 npm, node.js설치에는 문제가 없어서 진행했다.

local에서 잘 확인이 되는지 구동 시켜보니 제대로 설치된 것인지 잘 보였다. 

3. 랜딩페이지를 위한 parallax scroll 

 

랜딩 페이지에는 parallax scroll을 이용해 해당 여행지의 이미지에 맞는 배경을 CSS로 넣어주어 ui를 특별하게 만들어 주려고 한다. parallax scroll은 쉽게 말해 한개 또는 두개 이상의 이미지를 넣는데 이들의 스크롤 속도에 차이를 두어 사용자가 배경의 입체감을 느낄수 있게 하는 기술이며, 시차 스크롤이라고도 한다. 

위 이미지를 보면 앞, 중간, 뒤의 빌딩이 다른 속도로 움직이는 것을 볼 수 있다. 나도 이와 같은 효과를 주고 싶어 관련 파일, 영상을 찾아봤다. 아래 참고에 나온 영상이 많이 도움이 되었는데, react-spring을 설치해 이와 같은 시차스크롤을 구현했다.

위 처럼 여러개의 이미지를 다운받고 화면에 겹치게 그려준 뒤 스크롤을 내릴때 속도가 다를수 있게 코드를 짜주었다. 

해당 영상의 내용을 따라 코드를 입력하고 이미지와 CSS를 연결 후 저장 버튼을 눌렀는데, 

 

에러가 하나 떴다. 역시 에러 없으면 코딩이 아니다. createContext를 사용한 적 없는데도 이와 같은 에러가 나타나서 찾아보니 next.js가 ssr을 하다보니 클라이언트 컴포넌트라는 것을 명시해 주지 않으면 컴파일 과정에서 에러가 날 수 있다는 것. 따라서 상단에 'use client'를 적어주면 이 에러가 해결된다고 한다. 

 

저장 후 이미지가 적용된 아래와 같은 화면을 확인할 수 있었다 

 

 

참고

https://www.youtube.com/watch?v=jeSPvDI-IJw