Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

비밀번호 재설정 기능 버그 수정 #93

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from

Conversation

live-small
Copy link
Member

@live-small live-small commented Aug 16, 2022

🧊 관련이슈

#88

👨‍💻 작업사항

메일 > 비밀번호 재설정, 코드 유효하지 않을 때 에러페이지로 대응

  • 비밀번호 재설정 메일을 보낸 후, 몇분 간만 재설정 페이지에 접근할 수 있음 (이를 코드로 체크함)
    • 코드가 유효하지 않을 때, 만료된 코드입니다을 보여주는 에러페이지로 이동해야함.
    • 아직 에러페이지를 만들진 않았고, 간단하게 만들어 놓은 에러페이지 router 로 이동시켰음.
    • 필요한 에러페이지 만든 후, 라우터 연결하면 될 거 같습니다.

메일 > 비밀번호 재설정 > 완료 후, url을 "/"로 이동

  • 비밀번호 재설정을 성공적으로 끝내면, 바꾼 비밀번호로 자동 로그인이 되어 home이 보여야 함
    • 라우터를 / 로 처리하지 않아 home이 보이지 않아서 이를 처리해야했음.
    • 로그인 후, 없는 라우터에 대해 redirect /로 처리함

💬 참고해주세요

로그인 후, 없는 라우터에 대해 redirect / 처리

로그인 유무와 상관없이 정의하지 않은 라우터에 대해서 리다이렉트 루트로 처리했었는데,
로그인 후에는 리다이렉트 루트처리할 필요가 없을 거 같다고 해서, 해당 코드를 지웠습니다.
그런데, 없는 라우터에 대해 home으로 리다이렉트 할 경우가 생겨서 이번에 추가했는데, 어떻게 생각하시나요??

  • 방법1) 이렇게 되면, 저희가 처리할 에러페이지를 라우터에 대응해놓고, 그 밑에 리다이렉트 홈으로 둬서
    저희가 처리하지 않은 페이지에 대해서는 home으로 돌아가게 됩니다!
  • 방법2) 리다이렉트 처리하지 않고, 처리하지 않은 페이지를 에러페이지로 대응하는 방법도 있습니다!

로그인 후, 없는 route에 대해서 /로 리다이렉트 시킴
비밀번호 재설정 신청 후, 일정시간만 재설정 할 수 있는 페이지 이동 유효함
@live-small live-small added the enhancement New feature or request label Aug 16, 2022
@live-small live-small self-assigned this Aug 16, 2022
Comment on lines +96 to 101
dispatch(checkCurrentURL({ code, username }))
.unwrap()
.catch(() => {
history.push("/error");
});
}, []);
Copy link
Collaborator

@kimyoungyin kimyoungyin Sep 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • thunk나 slice에서 라우트 이동이 불가능해서 이렇게 컴포넌트 내부에서 처리하도록 한 걸까요?(unwrap())
    -> 내부에서 useEffect로 위 동작을 처리한 경우 컴포넌트가 마운트 된 후에 코드 유효성 검사를 하게 되는데, 이 때 코드가 유효하지 않을 때 의미 없는 렌더링이 발생할 것 같아요. 굳이 그럴 필요 없이 상위 컴포넌트에서 로딩 처리를 위임하여 재설정 코드 유효성이 통과된다면 하위 컴포넌트인 ResetPasswordForm을 렌더링하도록 하는 건 어떨까요?
  • deps에 dispatch, code, username을 넣지 않은 이유가 있을까요?
  • thunk별 수행하는 동작이: checkCurrentURL: 재설정 하기 위해 주어진 코드가 유효한지 확인, resetPassword: 비밀번호 재 설정 맞을까요?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

하나씩 답변드릴게용!

deps에 dispatch, code, username을 넣지 않은 이유가 있을까요?

code, username은 백엔드가 넘겨준 url에서 추출해오기 때문에, 최초 렌더링 이후 변경될 가능성이 없기때문에 deps에 넣을 필요를 못 느꼈습니다.

dispatch는 다른 곳에서도 계속 안넣어왔던 거 같은데, 영인님은 dispatch를 넣는 이유가 있으신가요?


thunk별 수행하는 동작이: checkCurrentURL: 재설정 하기 위해 주어진 코드가 유효한지 확인, resetPassword: 비밀번호 재 설정 맞을까요?

넵 맞습니다!


thunk나 slice에서 라우트 이동이 불가능해서 이렇게 컴포넌트 내부에서 처리하도록 한 걸까요?(unwrap())

네 맞아요. 이 부분 꽤나 고민했었는데..! 꼼꼼히 봐주셔서 감사합니다!

내부에서 useEffect로 위 동작을 처리한 경우 컴포넌트가 마운트 된 후에 코드 유효성 검사를 하게 되는데, 이 때 코드가 유효하지 않을 때 의미 없는 렌더링이 발생할 것 같아요. 굳이 그럴 필요 없이 상위 컴포넌트에서 로딩 처리를 위임하여 재설정 코드 유효성이 통과된다면 하위 컴포넌트인 ResetPasswordForm을 렌더링하도록 하는 건 어떨까요?

  • 아 그렇네요. 의미없는 렌더링..! useEffect가 렌더링 전에 실행되는 줄 알았는데, 렌더링 이후에 실행되는 거더라구요. 영인님 의견이 좋은 거 같습니다. 그렇게 수정해서 커밋해놓을 게요!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • https://okky.kr/articles/957064: dispatch를 deps에 넣을지에 대한 내용인데, 전 불변성이 유지되긴 하더라도 넣어주는 편이었습니다!
  • unwrap(): 확인해보니 authSlice에서 checkCurrentURL가 Return하는 promise에 대한 state 변화는 없네요! 저는 얼마 전까지도 몰랐던 건데, unwrap() 처리를 하더라도 addCase에 등록된 해당 thunk extraReducer는 호출되더라구요.. 참고하세요!

렌더링 관련 커밋 사항 발생하면 리뷰 하도록 하겠습니다!

Comment on lines 64 to +73
void,
{ code: string; username: string }
>("auth/checkResetPassword", async (payload, ThunkOptions) => {
try {
const config = {
params: {
code: payload.code,
username: payload.username,
},
};
const { data } = await customAxios.get(
`/accounts/password/reset`,
config,
);
console.log(data);
} catch (error) {
throw ThunkOptions.rejectWithValue(error);
}
>("auth/checkResetPassword", async (payload) => {
const config = {
params: {
code: payload.code,
username: payload.username,
},
};
await customAxios.get(`/accounts/password/reset`, config);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

스크린샷 2022-09-07 오후 4 40 22
에러가 나지 않고 200번 대 response가 오더라도 "올바르지�않은 비밀번호 재설정 코드입니다." 인 경우에는 에러 처리를 해줘야 하지 않을까요?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dispatch(checkCurrentURL({ code, username }))
            .unwrap()
            .catch(() => {
                history.push("/error");
            });
    }, []);

여기 catch문에서 처리될 거라고 생각했는데, 200번대였군요..! 이 부분도 에러처리 반영하겠습니다. 감사합니다

@live-small
Copy link
Member Author

@kimyoungyin 리뷰 감사합니다!
해당 pr에 참고해주세요 이 부분에 대해서는 어떻게 생각하시나요?
(로그인 후, 없는 라우터에 대해 redirect / 처리)

@kimyoungyin
Copy link
Collaborator

404 페이지 만들기 전까지는 home으로 redirect 시켜주는 것으로 유지하면 좋을 것 같아요

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants