Skip to content

Latest commit

 

History

History
59 lines (43 loc) · 4.89 KB

README.md

File metadata and controls

59 lines (43 loc) · 4.89 KB

MotuS ─ 행동 유사도 측정을 위한 솔루션
Frontend Repository


🔥 Main Contributor

오소현 김경재
한림대학교 한림대학교
빅데이터전공 4학년 빅데이터전공 2학년
@osohyun0224 @PortalCube

🧑🏻‍💻 How to Setup

  1. 리포지토리를 클론하고 클론한 디렉토리에 들어갑니다.
git clone https://github.com/MotuS-Web/MotuS-FrontEnd
cd MotuS-FrontEnd
  1. .env 파일을 열고 임시 값을 모두 지운 다음, 미리 세팅한 Spring 서비스와 AI 서비스 URL을 입력합니다.
VITE_SPRING_URL=[Spring 서비스의 URL]
VITE_AI_URL=[AI 서비스의 URL]
  1. Node 18 이상을 준비한 다음, 다음의 명령어를 실행하여 개발 서버를 엽니다.
npm install
npm start build
npm run dev

주의: 본 레포지토리를 Production으로 배포하려는 경우, 사용자의 웹캠에 접근할 수 있도록 반드시 HTTPS 환경으로 배포하시기 바랍니다.

📚 Libraries

Stack Version Why
React 18.2.0 많은 사용자들이 오랜 기간동안 사용하여 다른 프레임워크에 비해 오픈 소스 생태계가 활발하며,
컴포넌트 단위로 분리하여 개발을 할 수 있어 분업하기 좋고 생산성이 탁월하기 때문에 도입
Redux 8.1.2 모든 상태 업데이트를 액션으로 정의하고,
액션 정보에 기반하여 Reducer에서 상태를 업데이트하기 때문에
상태를 더욱 쉽게 예측 가능하게 하여 유지보수 측면에 긍정적인 효과가 있어
상태 관리를 하는 컨테이너로 채택
@reduxjs/toolkit 1.9.5 Redux를 사용하면서 생기는 boilerplate 코드를 줄이고,
Redux 코드 작성에 필요한 도구와 헬퍼를 갖추기 위함.
또한 불변성을 유지하면서 상태 업데이트를 간소화하고,
비동기 작업을 쉽게 관리하기 위해 도입
Styled-Components 6.0.6 스타일 작성의 생산성 향상을 위하여 CSS-in-JS 도입
axios 1.5.0 API 통신에 사용하기 위해 도입
Vercel Link 다른 개발 팀과의 협업 시 프론트 개발 현황을 vercel로 호스팅한 것으로 확인이 가능해 이해를 도움.
또한 빌드 도구로 활용해 개발시 오류를 바로 확인이 가능함.

💡 Contribution

MotuS 프론트엔드 레포지토리에 기여해주셔서 감사합니다! Contribution 가이드는 CONTRIBUTING.md에서 확인해주세요.