<aside> 💡 사용목적

1. 인스턴스 생성 과정에서의 로딩 속도 감소
2. React의 Component 기능을 통해 쉬운 업데이트 및 유지 보수
3. 변경 사항에 대한 웹 페이지 변화를 바로바로 파악 가능
4. 많은 UI 라이브러리

</aside>

App 페이지

React App

React 웹 페이지 초기 구상

• 메인 페이지 : 현재 프로젝트 설명 + Get Started를 누른 경우 예측 서비스를 사용 할 수 있도록 설정
• Task Page
  • 웹페이지에 이미지를 업로드 or 촬영한 이후 해당 이미지를 웹 페이지에 노출
  • 유저가 버튼을 눌러 제출한 경우 예측 결과 및 기타 정보를 표시

사용한 UI 라이브러리

Overview - Material UI

구현 결과

Main Page

Fish Classification

Sashimi Classification

About us

사용 후기

• 장점
  • UI 디자인을 편리하게 해주는 공통 parameter를 가져서 쉽게 위치, 크기, 스타일 변경이 가능
  • 코드가 변경점이 웹페이지에 바로 적용되는 점을 확인할 수 있어서 문제가 발생한 경우 빠르게 파악할 수 있었음
  • Vscode를 활용하여 LiveShare로 진행할 경우 각자 작업하고 있는 Component가 적용될 경우 생기는 문제점 들을 파악할 수 있어서 소요되는 시간이 감소
  • jsx를 활용하여 html 방식의 코드 작성이 가능한 점
• 단점
  • React 외 추가 라이브러리를 사용하지 않을 경우 대부분의 기능을 직접 구현해야 한다는 점이 아쉬움