- React Project
- 현재위치이동
- 주소검색
- 불법주정차공간 판단
- 주변 cctv, 학교, 주차장 위치 확인
- ES6
- React-Hooks
- React-Redux
- Redux-Saga
- SCSS
- axios
- React-Router
- Swiper
- Koa.js
- kakaomap을 이용하여 부산광역시 내의 cctv, 학교, 주차장 위치를 마커로 표시하였습니다.
- Koa.js를 이용해 api 서버를 만들어 주변 2KM이내 정보만 표시하였습니다
- Redux, Redux-Saga를 사용하여 위치정보를 요청하고 정리하였습니다.
- 검색 기능을 수행하는 Custom Hook
const getSearchList = async (text) => {
const response = await getAddress(text);
return response;
};
const useSearch = (text) => {
const [searchFocus, setSearchFocus] = useState(false);
const [searchList, setSearchList] = useState([]);
const handleSearchList = useCallback(
async (text) => {
const newSearchList = await getSearchList(text);
setSearchList(newSearchList);
},
[setSearchList]
);
useEffect(() => {
handleSearchList(text);
}, [text, handleSearchList]);
return [searchFocus, searchList, setSearchFocus, handleSearchList];
};
- 현재위치를 전역으로 dispatch하는 Custom Hook
const useLocation = () => {
const current = useSelector((state) => state.location);
const dispatch = useDispatch();
const setCurrent = useCallback(
(newLocation) => {
dispatch(setLocationSaga(newLocation));
},
[dispatch]
);
return [current, setCurrent];
};
- Redux를 이용해 위치정보 관리
const initialState = {
cctv: [],
children: [],
parkinglot: [],
};
const parkLocation = handleActions(
{
[SET_CCTV]: (state, { payload: cctv }) => ({
...state,
cctv: cctv,
}),
[SET_CHILDREN]: (state, { payload: children }) => ({
...state,
children: children,
}),
[SET_PARKING_LOT]: (state, { payload: parkinglot }) => ({
...state,
parkinglot: parkinglot,
}),
},
initialState
);
- redux-saga를 이용해 주소->위경도 변환 api호출 주변 정보를 갱신
function* setRoadToPosition(action) {
try {
yield put(startLoading());
const response = yield call(roadToPosition, action.payload);
const { lat: latitude, lng: longitude } = response;
yield put(setLocation({ latitude, longitude }));
yield put(setCCTVSaga({ latitude, longitude }));
yield put(setChildrenSaga({ latitude, longitude }));
yield put(setParkingLotSaga({ latitude, longitude }));
yield put(finishLoading());
} catch (e) {
console.error(e);
}
}
- 카카오지도 api최적화