Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

🛠 개발 환경

• PC, Mobile 둘다의 환경에 최적화

💻 기술스택

Frontend

Backend

Database

구조도

시작 가이드

Requirements

작업 환경

• React 5.0.1
• Node.js 16.16.0
• MySql 8.0.31

Installation

$ git clone https://github.com/ji-hunc/HumanStats.git
$ cd HumanStats

Frontend

$ cd front
$ npm install
$ npm run start

Database

(개인 mysql 접속)
$ mysql -u root -p
(HSScript.sql 파일이 있는 path를 작성)
$ source path/HSScript.sql

Backend

$ cd server
$ npm install
$ npm run server

📷 화면 구성

npm start

디렉토리 구조

├── README.md
├── server
│   ├── node_modules
│   ├── main.js
│   ├── package-lock.json
│   └── package.json
└── front
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── yarn.lock
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    └── src
        ├── App.js
        ├── index.js
        ├── index.css
        ├── Api
        │   └── Api.js
        ├── components
        │   ├── AnswerCheck
        │   │   ├── AnswerCheck.js
        │   │   └── styles.js
        │   ├── AnswerCheck
        │   │   ├── Matrix.js
        │   │   └── styles.js
        │   ├── Navigation
        │   │   ├── Navigation.js
        │   │   └── styles.js
        │   ├── Ranking
        │   │   ├── Ranking.js
        │   │   └── styles.js
        │   └── ResultBox
        │       ├── ResultBox.js
        │       └── styles.js
        ├── pages
        │   ├── Home
        │   │   ├── Home.js
        │   │   └── styles.js
        │   ├── Login
        │   │   ├── Login.js
        │   │   └── styles.js
        │   ├── SignUp
        │   │   ├── SignUp.js
        │   │   └── styles.js
        │   ├── NumberMemoryTest
        │   │   ├── NumberMemoryTest.js
        │   │   └── styles.js
        │   ├── AlphabetMemoryTest
        │   │   ├── AlphabetMemoryTest.js
        │   │   └── styles.js
        │   ├── SequenceMemoryTest
        │   │   ├── SequenceMemoryTest.js
        │   │   └── styles.js
        │   └── ReactionTimeTest
        │       ├── ReactionTimeTest.js
        │       └── styles.js
        └── pages
            └── LoginState.js