codestates / codestates/TMT-client

[Dev-Log✍️] 나원빈 07/05 회고

Open
#61 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
0
Forks
3
PR merge metrics
No merged PRs in 30d

Description

### 오늘은 어떻게 프로젝트에 기여했나요?
- 유저정보 구현
- 로그인,회원가입 모달 리덕스 상태 구현
- 메인페이지 드로그앤드롭 구현
- fakeData로 테스트 해봤으니 실제 데이터로 다시한번 테스트 해봐야겠다.
- react-dnd 라이브러리로 구현했는데 생각보단 쉽지 않았다. 근데 왜 누르면 모달이 잠깐 뚱뚱해지지?
![화면 기록 2021-07-06 오전 3 59 28](https://user-images.githubusercontent.com/74464061/124510420-b4d99980-de0e-11eb-8270-09ad71a8f839.gif)

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
- 유저정보 api 구현할때 acc토큰이 만료될때 re토큰을 다시 보내줘야 하는데, catch로 err를 받을때 응답코드에 따라 다시 한번 요청을 보내도록 작성했다.
- 처음에 에러가 계속 발생했는데 어찌어찌 구현된것같다. 오류가 있는지 더 확인해 봐야겠다.
- axios에 interceptor를 사용하면 되는 것 같은데(?) 사실 구글링을 계속 해봐도 정확하게 쓰는 방법을 찾기 힘들었다. 예제를 보면서 삽질끝에 아래 방법으로 구현했다. 오류발생시 다시한번 새로운 요청으로 넘겨주는게 있을 것 같은데,,

```js
axios
.post(
userInfoURL,
{
originalPw: curPassword,
newPw: password,
},
{
headers: {
authorization: `Bearer ${setAccessToken}`,
},
}
)
.then((res) => {
history.push("./mypage");
})
.catch((err) => {
const status = err.response.status;
if (status === 405) {
setErrCurPassword(
"현재 비밀번호가 일치하지 않습니다. 다시 입력해주세요"
);
}
if (status === 409) {
dispatch(Actions.LoginStatus(false));
const callbackAxios = (): void => {
axios
.post(
tokenURL,
{},
{
headers: {
authorization: `Bearer ${setRefreshToken}`,
},
}
)
.then((res) => {
console.log(res.data);
dispatch(Actions.LoginStatus(true));
dispatch(
Actions.AccessToken(res.data.newAccessToken, setRefreshToken)
);
});
};
callbackAxios();
}
});
};

useEffect(() => {
async function fetchDate() {
const res = await axios
.get(userInfoURL, {
headers: {
authorization: `Bearer ${setAccessToken}`,
},
})
.then((res) => {
setInfors(res.data);
})
.catch((err) => {
const status = err.response.status;
if (status === 409) {
dispatch(Actions.LoginStatus(false));
const callbackAxios = (): void => {
axios
.post(
tokenURL,
{},
{
headers: {
authorization: `Bearer ${setRefreshToken}`,
},
}
)
.then((res) => {
console.log(res.data);
dispatch(Actions.LoginStatus(true));
dispatch(
Actions.AccessToken(
res.data.newAccessToken,
setRefreshToken
)
);
});
};
callbackAxios();
}
});
}
fetchDate();
}, []);
```
```js
const ModalName = [
,
,
,
];
const ModalNamesIndex = ["SignIn", "SignUp", "UserInfo"];

return

{ModalName[ModalNamesIndex.indexOf(modalName)]}
;
}
```
- 모달 상태를 리덕스로 해보고싶어 무한 구글링
- 띄우고싶은 페이지에 모달컴포넌트를 불러오고 핸들러함수 인자로 모달이름을 받아 해당하는 인덱스의 모달을 띄워준다.
- state 상태에 따라 on, off 되고 해당하는 모달이 띄워진다.
- TS를 첨 써보면서 "'IntrinsicAttributes & IntrinsicClassAttributes 유형에 지정할 수 없습니다." 에러를 많이 본것 같은데, 구글링해봤더니 props관련된 TS자체의 컴파일 버그라고 하더라, 어쨌든 {...props}처럼 쓰면 해결됨

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
* [ ] 오류찾기
* [ ] 배포테스트

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.