📍Project Summery

TheCatAPI를 활용해 고양이 정보를 불러와 종에 따른 고양이의 상세설명과 다양한 사진을 볼 수 있다.
로그인을 통해서 마음에 드는 고양이 사진을 mypage에 담을 수 있고, my page에 담긴 고양이 사진을 클릭하면 상세 정보를 한 번 더 확인 할 수 있다.

Adorable Cats 배포 페이지 : 클릭!

📍Stack

• HTML/CSS
• JavaScript(ES6+)
• React
• React-Router - APIs
• Scss
• flex
• Postman
• Firebase - authentication
• Netlify
  
  

📍Skill

• 로그인
• 고양이 종 리스트
• 고양이 정보 제공
• 고양이 사진 ‘좋아요’ 기능
• 로그아웃 상태 시 ‘좋아요’ 기능 대신 로그인 유도 모달창
• 마이 페이지
• 다크모드 기능
  
  

📍Projects

✨ Firebase를 이용한 로그인 페이지

Firebase에 Authentication을 이용해 Google과 Github으로 로그인 할 수 있도록 페이지를 제작했다. 이 페이지는 개인화 기능의 활용도가 높지 않기 때문에 간단한 로그인을 통해 이용하는 것이 적절하다고 생각했다.

---

✨ The Cat API를 이용한 고양이 정보 불러오기

The Cat API에서 fetch API를 이용해 두번의 정보를 불러왔다.
먼저, 고양이 리스트의 target value에 해당하는 고양이의 정보orgin, name, subscription, temperature를 불러온다.
그리고 해당하는 고양이 종의 다양한 사진을 불러와서 각 사진마다 '좋아요'를 할 수 있는 기능을 추가했다.

---

✨ 로그아웃 상태 시 ‘좋아요’ 기능 대신 로그인 유도 모달창

로그인 후 고양이 사진을 '좋아요' 기능으로 마이 페이지에 저장 할 수 있다. 로그인을 하지 않았을 경우 모달창을 띄워 로그인을 하도록 유도하도록 제작했다.

---

✨ 마이 페이지에 '좋아요'한 고양이 사진 저장

'좋아요'한 이미지를 마이 페이지에서 리스트 형식과 상세보기 형식으로 확인 할 수 있다. '좋아요'한 이미지 리스트를 먼저 보여주고, 이미지를 클릭하면 홈에서 확인했던 고양이 정보를 함께 볼 수 있다.

---

✨ Darkmode 기능

Scss를 이용해 ligth와 Dark 모드를 만들었다. 가장 상단에 컴포넌트를 만들어 해당하는 모드는 선택하면 모든 페이지에 적용되도록 제작했다.

📍후기

이번 프로젝트는 public API를 통해 데이터를 전달받고, 마운트시키고, 업데이트 하는 과정을 상세하게 알 수 있었던 시간이었다. 그리고 다양한 라이브러리를 원하는 기능으로 사용할 수 있도록 직접 찾아보고 공부하면서 스스로 문제를 해결해나가는 시간을 충분히 가졌다. 그리고 CSS 전처리기 Scss의 다양한 기능을 사용하여 생산성을 증가시켰다.

그리고 데이터를 다양한 방법을 통해서 컴포넌트 별로 전달하고, 내부 API를 좀 더 다양하게 사용했다. Scss의 변수나 Mixin, nesting등으로 flex를 활용해 레이아웃이나 스타일링을 간편하게 제작할 수 있었다.

---

📍교육자료

• 드림코딩 - 리액트 기본 강의
• TheCatAPI - document
• React Router - hooks
• Firebase - authentication document
• SCSS - documentation

---

소스코드 : 클릭!