codestates / codestates/MUNADU-client

[Dev-Log] 6월 3일 목요일 / 류제천

Open
#161 0 comments 0 reactions 1 assignee Claimed by @rjc1704 View on GitHub
Dominant language
TypeScript
Stars
0
Forks
1
PR merge metrics
No merged PRs in 30d

Description

### 오늘은 어떻게 프로젝트에 기여했나요?
* 상세페이지의 무술 개요 부분 반응형 구현
* 네이버지도 API가 검색어에 따른 장소리스트를 제공하는 API 서비스를 종료함에 따라 카카오맵 API로 새로 적용하였고,
각 무술별 체육관리스트 정보를 카카오맵 API를 통해 배열로 받아서 무술정보를 정리한 Json에 업데이트 했고,
이 Json에 있는 좌표를 기반으로 지도에 위치를 마킹하는 작업 진행.
* 지도의 초기 위치 지정은 로그인 상태이면서 주소 등록한 경우, 등록한 주소를 초기 위치로 지정했고, 비로그인 상태이거나 주소 등록을 안한 경우, 체육관리스트 중 첫 번째 체육관의 위치를 초기 위치로 지정함.
* 리뷰나 댓글 등의 데이터를 받아 오기 위한 Ajax 통신 시 로딩창을 구현했으나 로딩시간이 1초 미만이라 오히려 불필요한 효과로 사료됨.

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
* 카카오맵 API를 사용하는 방식도 네이버지도 API를 사용하는 방식과 유사했다. 하지만 별도로 react용으로 만들어진 것고 html javascript 기준으로 API문서가 적용되어 있어서 변환하는 게 시간이 소요 되었다.

* 로딩창 구현을 고민하면서 어떻게 하면 리덕스를 이용해서 isLoading 이란 boolean 값에 따라 로딩화면을 on/off할지 고민하다가
리덕스툴킷을 사용하면 아래 코드처럼 Ajax통신이 pending 상태인지, fulfilled 상태인지, rejected 상태인지를 쉽게 구분할 수가 있어 그 상황에 따라 isLoading 값을 정의해 주면 되었다!

```js
const reviewReducer = createSlice({
name: "reviewReducer",
initialState: dummy as IState,
reducers: {},
extraReducers: {
[getUserReviewList.pending.type]: (state) => {
state.isLoading = true;
},
[getUserReviewList.fulfilled.type]: (state, action: Ipayload) => {
state.userReviewList = action.payload.data.data;
state.isLoading = false;
},
[getUserReviewList.rejected.type]: (state) => {
state.isLoading = false;
},
```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- [ ] 프로젝트 발표 자료 준비
- [ ] Wiki 정리

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.