클라이머들을 위한 커뮤니티 ‘OlaOla’는

서버 없이 프론트엔드 기술에 집중하여 진행한 개인 프로젝트입니다.

영상 및 이미지 업로드를 위해 브라우저 저장소인 IndexedDB를 사용하였고,

무한 스크롤, 스크롤 스냅, 페이지네이션, 캐러셀 등을 구현하여

다채로운 화면을 구현하려고 노력하였습니다.

배포 링크 : https://ola-ola-nine.vercel.app/ Github : https://github.com/wlals4264/olaola

(개발 기간 : 2024.11.18 ~ 2024.12.12)

사용 기술

Skill

• React
• TypeScript
• Recoil
• Vite

Style

• Styled-component
• Tailwind

ETC

• Firebase
• IndexedDB
• UIDD
• ReactQuill

주요 기능

✨ 메인 페이지

• 스크롤 스냅
  • 사이트의 주요 기능 3가지(피드 둘러보기, 암장 정보 공유, 암장 찾기)를 효과적으로 보여주기 위해 CSS에서 제공하는 Scroll Snap 속성 사용
  • 버튼을 사용해 스크롤 스냅에 진입하고 스크롤 구역에 진입 후에는 버튼이 사라지도록 구현
• 캐러셀
  • 메인 페이지의 동적인 화면 구성을 위해 이미지를 캐러셀로 구현하고 자동으로 넘어가도록 구현
  • 버튼을 통해 이미지를 넘길 수도 있도록 구현
• Top 버튼
  • Top 버튼을 누르면 화면 상단으로 이동하고 스크롤 스냅도 초기화 되도록 구현

✨ 이메일 회원가입 & 로그인 및 구글 로그인 구현

• Firebase를 사용해 이메일 회원가입 및 로그인 구현
  • 라이브러리 사용없이 자체적으로 유효성 검사 구현 및 실시
  • 사용성을 위해 입력값이 비어있으면 focus되도록 구현
• Firebase를 사용해 구글 로그인 구현
  • 보안을 위해 앱키 등 중요한 변수를 환경 변수로 관리
  • 배포 시 도메인 및 환경 변수 추가 설정

회원가입

이메일 로그인 & 소셜 로그인

✨ 피드 업로드 기능

• IndexedDB를 사용해 데이터를 저장 및 가져오기 구현
  • IndexedDB는 실제 서버와 유사하게 File 및 Blob 객체를 저장할 수 있으며, 비동기적으로 데이터를 읽고 쓰기 때문에 클라이언트 단에서 서버와 통신하는 방식과 유사한 방식으로 비동기 처리 구현이 가능
  • 이미지 파일 미리보기는 createObjectURL 을 사용하여 구현

✨ 피드 둘러보기 기능

• 무한 스크롤 구현
  • 내 피드 보기와 피드 둘러보기 화면에서 무한 스크롤 구현
  • 내 피드 보기에서는 6개씩, 피드 둘러보기 화면에서는 9개씩 불러오도록 구현