codestates / codestates/TMT-client
[Dev-Log✍️] 나원빈 07/05 회고
- Dominant language
- TypeScript
- Stars
- 0
- Forks
- 3
- PR merge metrics
- No merged PRs in 30d
Description
### 오늘은 어떻게 프로젝트에 기여했나요?
- 유저정보 구현
- 로그인,회원가입 모달 리덕스 상태 구현
- 메인페이지 드로그앤드롭 구현
- fakeData로 테스트 해봤으니 실제 데이터로 다시한번 테스트 해봐야겠다.
- react-dnd 라이브러리로 구현했는데 생각보단 쉽지 않았다. 근데 왜 누르면 모달이 잠깐 뚱뚱해지지?

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
- 유저정보 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
}
```
- 모달 상태를 리덕스로 해보고싶어 무한 구글링
- 띄우고싶은 페이지에 모달컴포넌트를 불러오고 핸들러함수 인자로 모달이름을 받아 해당하는 인덱스의 모달을 띄워준다.
- 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.