Skip to content

Latest commit

 

History

History
86 lines (63 loc) · 2.96 KB

README.md

File metadata and controls

86 lines (63 loc) · 2.96 KB

🥄 HanSpoon

🪄 개요

리액트를 이용한 spoonacular 클론 프로젝트입니다.
기존 사이트 문제점을 분석하고 개선을 목표로 하는 프로젝트입니다.


🌟 데모 사이트

https://hanspoon-31cd9.web.app/


📆 기간

2021.01.06 ~ 2022.01.28


⬅️ before

  1. 고전적인 UI/UX
  2. 반응형시 깨지는 레이아웃
  3. 작동하지 않는 기능
  4. 모달에서 키보드 트랩이 되지 않음
  5. 시멘틱하지 않은 HTML 태그 사용

➡️ After

  1. 모던한 UI/UX 및 사용자의 니즈를 파악한 설계
  2. 모바일부터 태블릿, 데스크탑까지 호환되는 반응형
  3. 모든 기능이 작동할 뿐 아니라 사용자에게 흥미를 유발할 기능을 추가
  4. 모달에서도 키보드 트랩이 가능하도록 구현
  5. 시멘틱한 태그를 사용하여 SEO 점수 향상 및 유지보수시 이해하기 쉬운 설계

이외에도 노력한 점

  • 이미지 최적화(사이즈 변경, img -> background, preload)
  • api요청 최소화
  • 폰트 최적화

📚 사용한 메인 기술 및 라이브러리


📝 프로젝트 Wiki

https://github.com/TeamCooks/hanspoon/wiki


🎓 팀 구성

박태준 서혜연 이한결 이효원

🛠 설치 방법

요구사항

  • Node.js가 설치되어 있어야 합니다.

설치

$ git clone https://github.com/TeamCooks/hanspoon.git
$ cd PROJECT
$ npm install

시작

$ npm start

빌드

$ npm build

업데이트

일부 변경사항이 있을 수 있습니다. npm pull과 npm install를 종종해서 업데이트를 받을 수 있습니다.

npm pull
npm install