렌탈 서비스를 제공하는 가상의 회사 Home4U의 홈페이지를 React를 활용하여 SPA(Single-Page-Application)방식으로 구현한 프로젝트 입니다. 홈페이지에서는 렌탈 가능한 집의 목록 및 이벤트가 진행중인 상품의 목록을 출력하고, 사무실의 위치를 지도 API를 통해 제공하며 , 자사에 대한 소개를 동영상 링크를 통해 안내하고 있습니다. 웹 사이트는 반응형으로 만들어져 있어, 휴대폰, 태블릿PC 등 다양한 환경에 각각 알맞게 화면의 크기가 바뀌고 UI가 변경됩니다.
홈페이지 링크: Home4U
React
React-Scroll
Animation on Scroll(Aos)
Styled-components
Kakao Api
근래에는 태블릿PC와 모바일을 이용한 웹 서핑이 늘어나며, 다양한 사용자들이 데스크탑PC 외의 장치로도 웹 사이트에 접근하는 경우가 많아졌습니다. 이와 같은 수요에 발맞춰 사용자가 모바일 환경에서도 일반PC 환경과 동등한 수준의 서비스를 제공받을 수 있도록 웹 페이지를 반응형으로 제작하였습니다. 해당 웹 페이지는 어떠한 디바이스에서 접근하더라도 환경에 알맞게 화면과 요소의 크기 및 배치가 변경되어 최적화된 서비스를 사용자에게 제공합니다.
모바일 환경에서는 위와 같이 UI가 알맞게 변경됩니다.
React 라이브러리를 활용하여 SPA 방식으로 구현된 프로젝트이며, React-Scroll을 통해 사용자가 다른 섹션으로 이동할 때 페이지를 다시 re-rendering하지 않아 뛰어난 사용자 경험을 제공합니다.
업로드된 파일을 폴더에 넣고 코드 편집기를 열어 코드 편집기의 터미널에 아래와 같은 명령어를 입력해 주세요.
npm install
또는
yarn add
해당 명령어는 package.json파일에 적혀있는 프로젝트에 필요한 패키지들을 다운받도록 해줍니다. 그 후, 실행을 위해 다음과 같은 명령어를 입력합니다.
npm start
또는
yarn start
| 브라우저 | 지원 여부 |
|---|---|
 |
⭕ |
 |
⭕ |
 |
⭕ |
 |
⭕ |
 |
❌ |
 |
❓ |
 |
⭕ |