비밀번호 재설정 폼 제출 구조 리팩토링 #43
Conversation
sangpok
left a comment
sangpok
left a comment
There was a problem hiding this comment.
아래와 같은 부분을 중점으로 수정 후에 다시 푸시해주시면 될 것 같아용. 내일까지 부탁드려요.
- API 요청 Server Action 반환 값 수정
- requestTokenValidation 실패 시 에러 핸들링
| const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/`, { | ||
| method: 'POST', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| body: JSON.stringify({ token }), | ||
| }); |
There was a problem hiding this comment.
나중에는 Fetcher로 따로 빼서 Endpoint만 신경쓸 수 있게 해도 좋을 것 같아요
| body: JSON.stringify({ token }), | ||
| }); | ||
|
|
||
| return { status: ActionStatus.Success, fields: response.json() }; |
There was a problem hiding this comment.
응답 자체가 해당 방식으로 오는 거에요, 따로 호출하는 API에서 지정해주는 게 아니구요.
그리고 fields로 담기는 게 아니고 payload 안에 필요한 fields가 담겨오는 거구요.
ActionStatus는 헷갈렸을 것 같긴 한데 백엔드랑 회의 전에 제가 임의로 설정해놓은 거라 enum의 형태라 현재 공유해놓은 응답 Status랑은 값이 달라요.
| } catch (error) { | ||
| alert('토큰 확인 요망 👾'); | ||
| return { status: ActionStatus.Error, issues: [error] }; | ||
| } |
There was a problem hiding this comment.
어떨 때 catch로 들어오는지 알고 쓰신 건 아닌 것 같아서, fetch의 Error Handling에 대해서 알아볼 필요가 있을 것 같아요.
여기에 잡히는 catch는 네트워크 레벨에서 발생하는 오류이거나 CORS 오류가 오게 되고, 400, 500으로 오는 건 잡히지 않아요.
그래서 response의 status값을 확인해서(주로 response.ok) 에러에 따라 throw를 던져주는 형태가 되어야 합니다.
try {
const res = await fetch("~");
if (!res.ok) {
// 아니면 응답에서 확인한다면 json으로 serialize하고 status를 확인
if (res.status === "400") {
throw new Error("404 Error")
}
if (res.status === "500") {
throw new Error("500 Error")
}
throw new Error(res.status)
}
return res.json()
} catch (e) {
}There was a problem hiding this comment.
물론 이것도 Fetcher를 만들어서 따로 수정하면 되겠지만, 관련 내용은 알고 계시는 게 좋을 것 같아서~
| const response = await requestTokenValidation(token); | ||
| const { email } = await response.fields; |
There was a problem hiding this comment.
에러 처리가 안 되어 있어요. fetch 과정에서 에러가 발생하면 작성하신 코드상으론 fields가 존재하지 않으므로 undefined가 반환될 텐데, undefined에서 email을 구조분해 하려고 하니 오류가 발생하게 될 거에요 ^~^
| password: z.string(), | ||
| passwordConfirm: z.string(), | ||
| }); | ||
| const passwordRegex = new RegExp(/^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,15}$/); |
There was a problem hiding this comment.
맨 마지막 정규식은 앞단 min()과 max()로 처리해주고 있는데, 그럼에도 필요한 정규식일까요~?
| // input hidden 대신 email 값을 formData에 포함시켰어요. | ||
| formData.append('email', email); |
There was a problem hiding this comment.
관련해서 디자인이 바뀔 것 같아서 input hidden으로 해놓는 게 좋을 것 같다는 거였는데, 제가 말씀을 못드렸네요😇
가져온 이메일을 disabled로 input에 채울 예정이에요. 관련해서는 나중에 따로 디자인 수정 후 알려드릴게요.
관련된 이슈 번호를 기입해주세요.
어떤 부분이 변경됐나요?
추가 정보 (선택)