Catridge

프로그래머스 2020 Dev-Matching 고양이 사진 검색 사이트 과제를 내 맘대로 구현해 보자 🐱

개요

프로그래머스에서 주최한 2020 Dev-Matching 고양이 사진 검색 사이트 과제를 구현하였습니다. 문제를 잘 살펴보면, 오직 바닐라 자바스크립트만을 사용하여 SPA를 구현하는 과제임을 확인할 수 있었는데요, 리액트를 사용하기에 앞서서 리액트가 왜 만들어졌는지를 몸으로 체험하며 이해할 수 있었습니다.

Catridge 둘러보기

방식

SPA의 기본이 되는 router를 구현해보고, 컴포넌트를 JSX를 통한 생성이 아닌 엘리멘트를 직접 생성하고 상태에 따라 렌더링 하도록 구현하였습니다. 모듈 방식으로의 설계와 재사용할 수 있는 컴포넌트 방식으로 제작하였습니다.

구축 환경

  • Javascript ES6+
  • 과제 요구 사항은 Github을 확인해 주세요.

Catridge Github 둘러보기

무작위 고양이

다양한 고양이가 보고 싶으신가요? 우아하고 멋있는 고양이들이 무작위로 보입니다. 가끔 재미있는 고양이도 출몰하니 스크롤을 많이 내려보세요.

고양이 확인

내가 찾는 고양이를 발견하셨나요? 작게 보지 마시고 크게 확인해보세요. 내가 찾던 고양이 라면 컴퓨터에 저장 📸

편안한 UI, UX

사용자를 생각하며 편안하게 사용하실 수 있도록 만들었습니다. 다양한 경우의 수를 고려하여 최적의 사용자 경험을 선사합니다.