📂src
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import store from './store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);
App.js
import React, { memo } from 'react';
import TrafficList from "./pages/TrafficList";
const App = memo(() => {
return (
<div>
<h1>교통사고 현황</h1>
<hr />
<TrafficList />
</div>
);
});
export default App;
store.js
import { configureStore } from "@reduxjs/toolkit";
import TrafficSlice from "./slices/TrafficSlice";
const store = configureStore({
reducer: {
TrafficSlice: TrafficSlice,
}
})
export default store;
📂pages
TrafficList.js
import React, { memo, useEffect, useCallback, useState } from "react";
import { NavLink, useNavigate } from "react-router-dom";
import Spinner from "../components/Spinner";
import ErrorView from "../components/ErrorView";
import Table from "../components/Table";
import dayjs from "dayjs";
import { useDispatch, useSelector } from "react-redux";
import { deleteItem, getList } from "../slices/TrafficSlice";
import styled from "styled-components";
import { useQueryString } from "../hooks/useQueryString";
import { current } from "@reduxjs/toolkit";
const ControlContainer = styled.form`
position: sticky;
top: 0;
background-color: #fff;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 10px 0;
.control {
margin-right: 5px;
display: inline-block;
font-size: 16px;
padding: 7px 10px 5px 10px;
border: 1px solid #ccc;
}
.clickable {
background-color: #fff;
color: #000;
text-decoration: none;
cursor: pointer;
&:hover {
background-color: #06f2;
}
&:active {
transform: scale(0.9, 0.9);
}
}
`;
const TrafficList = memo(() => {
const dispatch = useDispatch();
const { data, loading, error } = useSelector((state) => state.TrafficSlice);
const [range, setRange] = useState([]);
const [when, setWhen] = useState("전체");
useEffect(() => {
const period = [];
dispatch(getList()).then(result => {
result.payload.forEach(v => {
if (period.indexOf(v.year) < 0) period.push(v.year);
});
setRange(period);
});
}, []);
const onSelectChangeYear = useCallback(e => {
e.preventDefault();
const currentValue = e.currentTarget.value;
if (currentValue != "") {
dispatch(getList({ year: currentValue }));
setWhen(currentValue);
} else {
dispatch(getList());
setWhen("전체");
}
}, []);
console.log(useQueryString);
return (
<>
<h2>Traffic Accident Data List({when})</h2>
<Spinner loading={loading} />
<ControlContainer>
<select onChange={onSelectChangeYear} style={{
margin: "20px", width:
'200px'
}}>
<option value="">---- 년도 선택 ----</option>
{
range[0] && range.sort((a, b) => a - b).map(v => {
return (
<option key={v + 100} value={v}>{v}년도</option>
);
})
}
</select>
</ControlContainer>
{
error ? <ErrorView error={error} /> : (
data && data.length > 0 && (<Table>
<thead>
<tr>
<th>번호</th>
<th>년도</th>
<th>월</th>
<th>교통사고 건수</th>
<th>사망자 수</th>
<th>부상자 수</th>
</tr>
</thead>
<tbody>
{
data.map(v2 => {
return (
<tr key={v2.id}>
<td>{v2.id}</td>
<td>{v2.year}</td>
<td>{v2.month}월</td>
<td>{v2.accident}건</td>
<td>{v2.death}명</td>
<td>{v2.injury}명</td>
</tr>
)
})
}
</tbody>
<tfoot>
<tr>
<th colSpan='3'>합계</th>
<th>
{data.map((v, i) =>
v.accident).reduce((acc, cur) => acc + cur, 0).toLocaleString()}건
</th>
<th>
{data.map((v, i) => v.death).reduce((acc, cur) => acc + cur, 0).toLocaleString()}건
</th>
<th>
{data.map((v, i) => v.injury).reduce((acc, cur) => acc + cur, 0).toLocaleString()}건
</th>
</tr>
</tfoot>
</Table>
))
}
</>
);
});
export default TrafficList;
📂slices
TrafficSlice.js
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
import { pending, fulfilled, rejected } from "../helper/ReduxHelper";
import { cloneDeep } from "lodash";
export const getList = createAsyncThunk("TrafficSlice/getList", async (payload,
{ rejectWithValue }) => {
let result = null;
const URL = process.env.REACT_APP_API_TRAFFIC_LIST;
let params = null;
if (payload?.year) {
params = {
year: payload.year,
};
}
try {
const response = await axios.get(URL, { params: params });
result = response.data;
} catch (e) {
result = rejectWithValue(e.response);
}
return result;
});
const TrafficSlice = createSlice({
name: 'TrafficSlice',
initialState: {
data: null,
loading: false,
error: null,
},
reducers: {
getCurrentData: (state, action) => {
return state;
},
},
extraReducers: {
[getList.pending]: pending,
[getList.fulfilled]: fulfilled,
[getList.rejected]: rejected,
},
});
export const { getCurrentData } = TrafficSlice.actions;
export default TrafficSlice.reducer;
📂components
ErrorView.js
import React, { memo } from 'react';
const ErrorView = memo(({error}) => {
return (
<div>
<h1>Oops~!!! {error.code} Error.</h1>
<hr />
<p>{error.message}</p>
</div>
);
});
export default ErrorView;
Spinner.js
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { Blocks } from 'react-loader-spinner';
const Spinner = memo(({loading, width, height}) => {
return (
<Blocks
visible={loading}
height={width}
width={height}
ariaLabel="blocks-loading"
wrapperStyle={{
position: 'fixed',
zIndex: 9999,
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)'
}}
wrapperClass='blocks-wrapper'
/>
);
});
Spinner.defaultProps = {
visible: false,
width: 100,
height: 100,
};
Spinner.propTypes = {
visible: PropTypes.bool.isRequired,
width: PropTypes.number,
height: PropTypes.number
};
export default Spinner;
Table.js
import styled from 'styled-components';
const Table = styled.table`
border-collapse: collapse;
border-top: 3px solid #168;
font-size: 14px;
text-align: center;
margin: auto;
width: 100%;
th {
color: #168;
background: #f0f6f9;
padding: 10px;
border: 1px solid #ddd;
&:first-child {
border-left: 0;
}
&:last-child {
border-right: 0;
}
}
td {
padding: 10px;
border: 1px solid #ddd;
&:first-child {
border-left: 0;
}
&:last-child {
border-right: 0;
}
}
`;
export default Table;
📂helper
ReduxHelper.js
const pending = (state, { payload }) => {
return { ...state, loading: true }
};
const fulfilled = (state, { payload }) => {
return {
data: payload,
loading: false,
error: null
}
};
const rejected = (state, { payload }) => {
return {
...state,
loading: false,
error: {
code: payload?.status ? payload.status : 500,
message: payload?.statusText ? payload.statusText : 'Server Error',
}
}
};
export { pending, fulfilled, rejected };
📂hooks
useQueryString.js
import { useLocation } from "react-router-dom";
const useQueryString = (props) => {
const { search } = useLocation();
const query = new URLSearchParams(search);
const params = Object.fromEntries(query);
return params;
};
export { useQueryString };
📂 backend
{
"traffic_acc": [
{
"id": 1,
"year": 2005,
"month": 1,
"accident": 15494,
"death": 504,
"injury": 25413
},
{
"id": 2,
"year": 2005,
"month": 2,
"accident": 13244,
"death": 431,
"injury": 21635
},
{
"id": 3,
"year": 2005,
"month": 3,
"accident": 16580,
"death": 477,
"injury": 25550
},
{
"id": 4,
"year": 2005,
"month": 4,
"accident": 17817,
"death": 507,
"injury": 28131
},
{
"id": 5,
"year": 2005,
"month": 5,
"accident": 19085,
"death": 571,
"injury": 29808
},
{
"id": 6,
"year": 2005,
"month": 6,
"accident": 18092,
"death": 476,
"injury": 28594
},
{
"id": 7,
"year": 2005,
"month": 7,
"accident": 18675,
"death": 528,
"injury": 29984
},
{
"id": 8,
"year": 2005,
"month": 8,
"accident": 19035,
"death": 562,
"injury": 31603
},
{
"id": 9,
"year": 2005,
"month": 9,
"accident": 18759,
"death": 577,
"injury": 29831
},
{
"id": 10,
"year": 2005,
"month": 10,
"accident": 19757,
"death": 639,
"injury": 31597
},
{
"id": 11,
"year": 2005,
"month": 11,
"accident": 19129,
"death": 574,
"injury": 30337
},
{
"id": 12,
"year": 2005,
"month": 12,
"accident": 18504,
"death": 530,
"injury": 29750
},
{
"id": 13,
"year": 2006,
"month": 1,
"accident": 14971,
"death": 420,
"injury": 24533
},
{
"id": 14,
"year": 2006,
"month": 2,
"accident": 14270,
"death": 373,
"injury": 22903
},
{
"id": 15,
"year": 2006,
"month": 3,
"accident": 16767,
"death": 465,
"injury": 26013
},
{
"id": 16,
"year": 2006,
"month": 4,
"accident": 17948,
"death": 469,
"injury": 28725
},
{
"id": 17,
"year": 2006,
"month": 5,
"accident": 19140,
"death": 531,
"injury": 30279
},
{
"id": 18,
"year": 2006,
"month": 6,
"accident": 17435,
"death": 455,
"injury": 27032
},
{
"id": 19,
"year": 2006,
"month": 7,
"accident": 18634,
"death": 516,
"injury": 29978
},
{
"id": 20,
"year": 2006,
"month": 8,
"accident": 18794,
"death": 585,
"injury": 30882
},
{
"id": 21,
"year": 2006,
"month": 9,
"accident": 19293,
"death": 580,
"injury": 30186
},
{
"id": 22,
"year": 2006,
"month": 10,
"accident": 19100,
"death": 651,
"injury": 30715
},
{
"id": 23,
"year": 2006,
"month": 11,
"accident": 19877,
"death": 701,
"injury": 31270
},
{
"id": 24,
"year": 2006,
"month": 12,
"accident": 17516,
"death": 581,
"injury": 27713
},
{
"id": 25,
"year": 2007,
"month": 1,
"accident": 14914,
"death": 468,
"injury": 23975
},
{
"id": 26,
"year": 2007,
"month": 2,
"accident": 14696,
"death": 446,
"injury": 23717
},
{
"id": 27,
"year": 2007,
"month": 3,
"accident": 18166,
"death": 476,
"injury": 28811
},
{
"id": 28,
"year": 2007,
"month": 4,
"accident": 18055,
"death": 460,
"injury": 28555
},
{
"id": 29,
"year": 2007,
"month": 5,
"accident": 19264,
"death": 516,
"injury": 30532
},
{
"id": 30,
"year": 2007,
"month": 6,
"accident": 18310,
"death": 538,
"injury": 28662
},
{
"id": 31,
"year": 2007,
"month": 7,
"accident": 18037,
"death": 503,
"injury": 28676
},
{
"id": 32,
"year": 2007,
"month": 8,
"accident": 17982,
"death": 512,
"injury": 29711
},
{
"id": 33,
"year": 2007,
"month": 9,
"accident": 18506,
"death": 532,
"injury": 29583
},
{
"id": 34,
"year": 2007,
"month": 10,
"accident": 19026,
"death": 582,
"injury": 29802
},
{
"id": 35,
"year": 2007,
"month": 11,
"accident": 17815,
"death": 565,
"injury": 27674
},
{
"id": 36,
"year": 2007,
"month": 12,
"accident": 16891,
"death": 568,
"injury": 26208
},
{
"id": 37,
"year": 2008,
"month": 1,
"accident": 14741,
"death": 444,
"injury": 23522
},
{
"id": 38,
"year": 2008,
"month": 2,
"accident": 14176,
"death": 428,
"injury": 23282
},
{
"id": 39,
"year": 2008,
"month": 3,
"accident": 16752,
"death": 502,
"injury": 26284
},
{
"id": 40,
"year": 2008,
"month": 4,
"accident": 17498,
"death": 476,
"injury": 27364
},
{
"id": 41,
"year": 2008,
"month": 5,
"accident": 19515,
"death": 493,
"injury": 30935
},
{
"id": 42,
"year": 2008,
"month": 6,
"accident": 18824,
"death": 423,
"injury": 28872
},
{
"id": 43,
"year": 2008,
"month": 7,
"accident": 19562,
"death": 452,
"injury": 30553
},
{
"id": 44,
"year": 2008,
"month": 8,
"accident": 18545,
"death": 529,
"injury": 29705
},
{
"id": 45,
"year": 2008,
"month": 9,
"accident": 18023,
"death": 502,
"injury": 27894
},
{
"id": 46,
"year": 2008,
"month": 10,
"accident": 19926,
"death": 574,
"injury": 30882
},
{
"id": 47,
"year": 2008,
"month": 11,
"accident": 19597,
"death": 528,
"injury": 30585
},
{
"id": 48,
"year": 2008,
"month": 12,
"accident": 18663,
"death": 519,
"injury": 29084
},
{
"id": 49,
"year": 2009,
"month": 1,
"accident": 16532,
"death": 475,
"injury": 27373
},
{
"id": 50,
"year": 2009,
"month": 2,
"accident": 15502,
"death": 405,
"injury": 24429
},
{
"id": 51,
"year": 2009,
"month": 3,
"accident": 18224,
"death": 468,
"injury": 27967
},
{
"id": 52,
"year": 2009,
"month": 4,
"accident": 19153,
"death": 439,
"injury": 29521
},
{
"id": 53,
"year": 2009,
"month": 5,
"accident": 20237,
"death": 519,
"injury": 31743
},
{
"id": 54,
"year": 2009,
"month": 6,
"accident": 19249,
"death": 433,
"injury": 29084
},
{
"id": 55,
"year": 2009,
"month": 7,
"accident": 20281,
"death": 454,
"injury": 31545
},
{
"id": 56,
"year": 2009,
"month": 8,
"accident": 19993,
"death": 514,
"injury": 32200
},
{
"id": 57,
"year": 2009,
"month": 9,
"accident": 21004,
"death": 500,
"injury": 31700
},
{
"id": 58,
"year": 2009,
"month": 10,
"accident": 21440,
"death": 592,
"injury": 33255
},
{
"id": 59,
"year": 2009,
"month": 11,
"accident": 20156,
"death": 522,
"injury": 31062
},
{
"id": 60,
"year": 2009,
"month": 12,
"accident": 20219,
"death": 517,
"injury": 31996
},
{
"id": 61,
"year": 2010,
"month": 1,
"accident": 17124,
"death": 438,
"injury": 27655
},
{
"id": 62,
"year": 2010,
"month": 2,
"accident": 15803,
"death": 406,
"injury": 24968
},
{
"id": 63,
"year": 2010,
"month": 3,
"accident": 17801,
"death": 396,
"injury": 27350
},
{
"id": 64,
"year": 2010,
"month": 4,
"accident": 18386,
"death": 395,
"injury": 28191
},
{
"id": 65,
"year": 2010,
"month": 5,
"accident": 20372,
"death": 447,
"injury": 31521
},
{
"id": 66,
"year": 2010,
"month": 6,
"accident": 18910,
"death": 474,
"injury": 28311
},
{
"id": 67,
"year": 2010,
"month": 7,
"accident": 18965,
"death": 453,
"injury": 29577
},
{
"id": 68,
"year": 2010,
"month": 8,
"accident": 19383,
"death": 410,
"injury": 31032
},
{
"id": 69,
"year": 2010,
"month": 9,
"accident": 19439,
"death": 436,
"injury": 30470
},
{
"id": 70,
"year": 2010,
"month": 10,
"accident": 21575,
"death": 619,
"injury": 33282
},
{
"id": 71,
"year": 2010,
"month": 11,
"accident": 20271,
"death": 541,
"injury": 30907
},
{
"id": 72,
"year": 2010,
"month": 12,
"accident": 18849,
"death": 490,
"injury": 29194
},
{
"id": 73,
"year": 2011,
"month": 1,
"accident": 16454,
"death": 395,
"injury": 25611
},
{
"id": 74,
"year": 2011,
"month": 2,
"accident": 14208,
"death": 339,
"injury": 22493
},
{
"id": 75,
"year": 2011,
"month": 3,
"accident": 16832,
"death": 338,
"injury": 25371
},
{
"id": 76,
"year": 2011,
"month": 4,
"accident": 18570,
"death": 429,
"injury": 28534
},
{
"id": 77,
"year": 2011,
"month": 5,
"accident": 19414,
"death": 393,
"injury": 29906
},
{
"id": 78,
"year": 2011,
"month": 6,
"accident": 18505,
"death": 415,
"injury": 28469
},
{
"id": 79,
"year": 2011,
"month": 7,
"accident": 19253,
"death": 462,
"injury": 29576
},
{
"id": 80,
"year": 2011,
"month": 8,
"accident": 18896,
"death": 472,
"injury": 30034
},
{
"id": 81,
"year": 2011,
"month": 9,
"accident": 19065,
"death": 474,
"injury": 29055
},
{
"id": 82,
"year": 2011,
"month": 10,
"accident": 20952,
"death": 520,
"injury": 32133
},
{
"id": 83,
"year": 2011,
"month": 11,
"accident": 20283,
"death": 514,
"injury": 30917
},
{
"id": 84,
"year": 2011,
"month": 12,
"accident": 19279,
"death": 478,
"injury": 29292
},
{
"id": 85,
"year": 2012,
"month": 1,
"accident": 16818,
"death": 418,
"injury": 26281
},
{
"id": 86,
"year": 2012,
"month": 2,
"accident": 16656,
"death": 393,
"injury": 25998
},
{
"id": 87,
"year": 2012,
"month": 3,
"accident": 18255,
"death": 403,
"injury": 27899
},
{
"id": 88,
"year": 2012,
"month": 4,
"accident": 19372,
"death": 483,
"injury": 29628
},
{
"id": 89,
"year": 2012,
"month": 5,
"accident": 19672,
"death": 444,
"injury": 30163
},
{
"id": 90,
"year": 2012,
"month": 6,
"accident": 18854,
"death": 476,
"injury": 28314
},
{
"id": 91,
"year": 2012,
"month": 7,
"accident": 19333,
"death": 416,
"injury": 29642
},
{
"id": 92,
"year": 2012,
"month": 8,
"accident": 18407,
"death": 409,
"injury": 29051
},
{
"id": 93,
"year": 2012,
"month": 9,
"accident": 19234,
"death": 486,
"injury": 29462
},
{
"id": 94,
"year": 2012,
"month": 10,
"accident": 19557,
"death": 533,
"injury": 29759
},
{
"id": 95,
"year": 2012,
"month": 11,
"accident": 19750,
"death": 508,
"injury": 30054
},
{
"id": 96,
"year": 2012,
"month": 12,
"accident": 17748,
"death": 423,
"injury": 28314
},
{
"id": 97,
"year": 2013,
"month": 1,
"accident": 16016,
"death": 389,
"injury": 25094
},
{
"id": 98,
"year": 2013,
"month": 2,
"accident": 14187,
"death": 335,
"injury": 22255
},
{
"id": 99,
"year": 2013,
"month": 3,
"accident": 17465,
"death": 409,
"injury": 26461
},
{
"id": 100,
"year": 2013,
"month": 4,
"accident": 18031,
"death": 380,
"injury": 27795
},
{
"id": 101,
"year": 2013,
"month": 5,
"accident": 19686,
"death": 420,
"injury": 29676
},
{
"id": 102,
"year": 2013,
"month": 6,
"accident": 18329,
"death": 436,
"injury": 27673
},
{
"id": 103,
"year": 2013,
"month": 7,
"accident": 18441,
"death": 444,
"injury": 28387
},
{
"id": 104,
"year": 2013,
"month": 8,
"accident": 18691,
"death": 412,
"injury": 29190
},
{
"id": 105,
"year": 2013,
"month": 9,
"accident": 17806,
"death": 430,
"injury": 26938
},
{
"id": 106,
"year": 2013,
"month": 10,
"accident": 19797,
"death": 499,
"injury": 29507
},
{
"id": 107,
"year": 2013,
"month": 11,
"accident": 19396,
"death": 479,
"injury": 28986
},
{
"id": 108,
"year": 2013,
"month": 12,
"accident": 17509,
"death": 459,
"injury": 26749
},
{
"id": 109,
"year": 2014,
"month": 1,
"accident": 15905,
"death": 389,
"injury": 24328
},
{
"id": 110,
"year": 2014,
"month": 2,
"accident": 14061,
"death": 325,
"injury": 21501
},
{
"id": 111,
"year": 2014,
"month": 3,
"accident": 18420,
"death": 358,
"injury": 27714
},
{
"id": 112,
"year": 2014,
"month": 4,
"accident": 18443,
"death": 341,
"injury": 27323
},
{
"id": 113,
"year": 2014,
"month": 5,
"accident": 20314,
"death": 398,
"injury": 30684
},
{
"id": 114,
"year": 2014,
"month": 6,
"accident": 18530,
"death": 367,
"injury": 27740
},
{
"id": 115,
"year": 2014,
"month": 7,
"accident": 19649,
"death": 407,
"injury": 29596
},
{
"id": 116,
"year": 2014,
"month": 8,
"accident": 19603,
"death": 359,
"injury": 30633
},
{
"id": 117,
"year": 2014,
"month": 9,
"accident": 19243,
"death": 445,
"injury": 29052
},
{
"id": 118,
"year": 2014,
"month": 10,
"accident": 20760,
"death": 470,
"injury": 31199
},
{
"id": 119,
"year": 2014,
"month": 11,
"accident": 19872,
"death": 476,
"injury": 29525
},
{
"id": 120,
"year": 2014,
"month": 12,
"accident": 18752,
"death": 427,
"injury": 28202
},
{
"id": 121,
"year": 2015,
"month": 1,
"accident": 16902,
"death": 381,
"injury": 25887
},
{
"id": 122,
"year": 2015,
"month": 2,
"accident": 14939,
"death": 296,
"injury": 22999
},
{
"id": 123,
"year": 2015,
"month": 3,
"accident": 18616,
"death": 378,
"injury": 27921
},
{
"id": 124,
"year": 2015,
"month": 4,
"accident": 19386,
"death": 354,
"injury": 29431
},
{
"id": 125,
"year": 2015,
"month": 5,
"accident": 20543,
"death": 389,
"injury": 31264
},
{
"id": 126,
"year": 2015,
"month": 6,
"accident": 18649,
"death": 390,
"injury": 27469
},
{
"id": 127,
"year": 2015,
"month": 7,
"accident": 20278,
"death": 359,
"injury": 30409
},
{
"id": 128,
"year": 2015,
"month": 8,
"accident": 19864,
"death": 405,
"injury": 30618
},
{
"id": 129,
"year": 2015,
"month": 9,
"accident": 20811,
"death": 387,
"injury": 31256
},
{
"id": 130,
"year": 2015,
"month": 10,
"accident": 21587,
"death": 470,
"injury": 32436
},
{
"id": 131,
"year": 2015,
"month": 11,
"accident": 21170,
"death": 410,
"injury": 31773
},
{
"id": 132,
"year": 2015,
"month": 12,
"accident": 19290,
"death": 402,
"injury": 28937
},
{
"id": 133,
"year": 2016,
"month": 1,
"accident": 17067,
"death": 336,
"injury": 26323
},
{
"id": 134,
"year": 2016,
"month": 2,
"accident": 15664,
"death": 292,
"injury": 24021
},
{
"id": 135,
"year": 2016,
"month": 3,
"accident": 17946,
"death": 310,
"injury": 26609
},
{
"id": 136,
"year": 2016,
"month": 4,
"accident": 19452,
"death": 353,
"injury": 29216
},
{
"id": 137,
"year": 2016,
"month": 5,
"accident": 19554,
"death": 347,
"injury": 29172
},
{
"id": 138,
"year": 2016,
"month": 6,
"accident": 17977,
"death": 321,
"injury": 26668
},
{
"id": 139,
"year": 2016,
"month": 7,
"accident": 18955,
"death": 358,
"injury": 28586
},
{
"id": 140,
"year": 2016,
"month": 8,
"accident": 18398,
"death": 336,
"injury": 28017
},
{
"id": 141,
"year": 2016,
"month": 9,
"accident": 17883,
"death": 375,
"injury": 26761
},
{
"id": 142,
"year": 2016,
"month": 10,
"accident": 19918,
"death": 440,
"injury": 29635
},
{
"id": 143,
"year": 2016,
"month": 11,
"accident": 19234,
"death": 416,
"injury": 28520
},
{
"id": 144,
"year": 2016,
"month": 12,
"accident": 18869,
"death": 408,
"injury": 28192
},
{
"id": 145,
"year": 2017,
"month": 1,
"accident": 16970,
"death": 353,
"injury": 26099
},
{
"id": 146,
"year": 2017,
"month": 2,
"accident": 14832,
"death": 280,
"injury": 22323
},
{
"id": 147,
"year": 2017,
"month": 3,
"accident": 17047,
"death": 295,
"injury": 25046
},
{
"id": 148,
"year": 2017,
"month": 4,
"accident": 17717,
"death": 293,
"injury": 26530
},
{
"id": 149,
"year": 2017,
"month": 5,
"accident": 18502,
"death": 366,
"injury": 27268
},
{
"id": 150,
"year": 2017,
"month": 6,
"accident": 18047,
"death": 315,
"injury": 26454
},
{
"id": 151,
"year": 2017,
"month": 7,
"accident": 18158,
"death": 357,
"injury": 27362
},
{
"id": 152,
"year": 2017,
"month": 8,
"accident": 18682,
"death": 353,
"injury": 28162
},
{
"id": 153,
"year": 2017,
"month": 9,
"accident": 19891,
"death": 419,
"injury": 29371
},
{
"id": 154,
"year": 2017,
"month": 10,
"accident": 18863,
"death": 420,
"injury": 28698
},
{
"id": 155,
"year": 2017,
"month": 11,
"accident": 19377,
"death": 379,
"injury": 28472
},
{
"id": 156,
"year": 2017,
"month": 12,
"accident": 18249,
"death": 355,
"injury": 27044
},
{
"id": 157,
"year": 2018,
"month": 1,
"accident": 17026,
"death": 304,
"injury": 25438
},
{
"id": 158,
"year": 2018,
"month": 2,
"accident": 16208,
"death": 275,
"injury": 24630
},
{
"id": 159,
"year": 2018,
"month": 3,
"accident": 17022,
"death": 310,
"injury": 25015
},
{
"id": 160,
"year": 2018,
"month": 4,
"accident": 17992,
"death": 303,
"injury": 26643
},
{
"id": 161,
"year": 2018,
"month": 5,
"accident": 18636,
"death": 309,
"injury": 27834
},
{
"id": 162,
"year": 2018,
"month": 6,
"accident": 18082,
"death": 266,
"injury": 26574
},
{
"id": 163,
"year": 2018,
"month": 7,
"accident": 18699,
"death": 315,
"injury": 28104
},
{
"id": 164,
"year": 2018,
"month": 8,
"accident": 18335,
"death": 357,
"injury": 27749
},
{
"id": 165,
"year": 2018,
"month": 9,
"accident": 18371,
"death": 348,
"injury": 27751
},
{
"id": 166,
"year": 2018,
"month": 10,
"accident": 19738,
"death": 373,
"injury": 28836
},
{
"id": 167,
"year": 2018,
"month": 11,
"accident": 19029,
"death": 298,
"injury": 28000
},
{
"id": 168,
"year": 2018,
"month": 12,
"accident": 18010,
"death": 323,
"injury": 26463
}
]
}
.env.development
REACT_APP_API_TRAFFIC_LIST = "/traffic_acc"
REACT_APP_API_TRAFFIC_ITEM = "/traffic_acc/:id"
.env.production
REACT_APP_API_TRAFFIC_LIST = "/traffic_acc"
REACT_APP_API_TRAFFIC_ITEM = "/traffic_acc/:id"
package.json
{
"name": "exam13",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001",
"dependencies": {
"@reduxjs/toolkit": "^1.9.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"axios": "^1.2.0",
"axios-hooks": "^4.0.0",
"classnames": "^2.3.2",
"dayjs": "^1.11.6",
"json-server": "^0.17.1",
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-helmet-async": "^1.3.0",
"react-loader-spinner": "^5.3.4",
"react-redux": "^8.0.5",
"react-router-dom": "^6.4.3",
"react-scripts": "5.0.1",
"redux-devtools-extension": "^2.13.9",
"sass": "^1.56.1",
"styled-components": "^5.3.6",
"styled-components-breakpoints": "^1.1.1",
"styled-reset": "^4.4.2",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start | json-server --watch backend/data.json --port 3001",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
