Conversation
- 각 폼 제출 후 로컬스토리지에 액세스토큰, 리프레시토큰 저장까지 구현
- 로그인 유지 중일 땐 네비게이션바의 로그인 버튼이 프로필이미지로 유지된다.
- 네비게이션바에 프로필이미지를 누르면 로그아웃 실행
src/components/common/Nav.tsx
Outdated
src/api/auth.ts
Outdated
There was a problem hiding this comment.
이번 미션 작업 영역입니다.
API 통신에서 에러를 반환해도 정확히 찾아서 수정하는 것이 어려웠습니다. 에러 메시지를 보고 고쳐나가는 방법에 대해 조언을 받고 싶습니다.
There was a problem hiding this comment.
더 자세한 에러 핸들링과 관련해 아래와 관련해 참고해볼 수 있습니다.
https://yamoo9.github.io/axios/guide/error-handling.html
또 axios에서는 isAxiosError라는 메서드가 존재합니다. 이 메서드는 주어진 인자가 axios에서 발생한 error인지 판별하는 역할을 합니다.
catch (error) {
if (axios.isAxiosError(error)) {
console.error('Axios 오류 메시지:', error.message);
if (error.response) {
console.error('서버 응답 상태 코드:', error.response.status);
console.error('서버 응답 데이터:', error.response.data);
}
} else {
console.error('Axios를 사용하여 요청을 보내는 도중 오류 발생:', error);
}
}
src/contexts/AuthContext.tsx
Outdated
src/pages/LoginPage/LoginPage.tsx
Outdated
src/pages/SignUpPage/SignUpPage.tsx
Outdated
src/types.ts
Outdated
| server: { | ||
| port: 3000, | ||
| }, |
There was a problem hiding this comment.
API 통신에서 자꾸 에러가 발생하는 원인을 정확히 찾지 못했는데, 혹시 로컬호스트의 3000번 포트가 아니어서 그런지 확인해봤습니다. 이 문제와 관련이 있을까요?
- 액세스토큰 있는 경우 홈으로 이동 - 새로고침할 경우 로그인 상태 유지
- 액세스 토큰과 리프레시 토큰을 설정, 가져오기, 삭제하는 함수 추가. - 사용자 데이터를 설정, 가져오기, 삭제하는 함수 추가. - localStorage에서 모든 토큰과 사용자 데이터를 지우는 함수 추가. - signUpUser와 loginUser 함수를 수정하여 storageHelper를 사용해 토큰과 사용자 데이터를 관리.
| } | ||
| }; | ||
|
|
||
| const handleSocialClick = (e: React.MouseEvent<HTMLElement>) => { |
There was a problem hiding this comment.
이 경우 if (target.tagName === 'IMG') 조건이 없으면 의도하지 않은 요소가 클릭될 때 오류가 발생할 수 있습니다.
| @@ -9,7 +9,37 @@ export interface Product { | |||
| tags: string[]; | |||
| } | |||
|
|
|||
| export interface Product { | |||
There was a problem hiding this comment.
Product 인터페이스는 list 속성으로 여러 ProductItem을 포함하고 있으므로, 이를 더 명확하게 표현하는 이름( ProductList)으로 변경할 수 있습니다.
| <form className={styles.formContainer} onSubmit={handleSubmit(onSubmit)}> | ||
| <label htmlFor="email">이메일</label> | ||
| <input | ||
| type="text" |
There was a problem hiding this comment.
input 필드 설정을 상수로 관리하는 것에는 몇 가지 이점이 있습니다.
중앙 집중화된 관리: 비밀번호 필드의 설정을 하나의 파일에 모아두면 관리가 편리합니다. 여러 곳에서 동일한 설정을 사용할 수 있고, 변경이 필요할 때 해당 파일만 수정하면 됩니다.
재사용성: 동일한 비밀번호 입력 필드를 여러 곳에서 사용할 수 있습니다. 예를 들어, 회원가입 폼, 로그인 폼 등 여러 곳에서 비밀번호 필드를 사용할 경우 중복 코드를 줄일 수 있습니다.
유지보수 용이성: 비밀번호의 최소 길이, 유효성 검사 규칙 등의 설정이 변경되어야 할 경우, 설정 파일 하나만 수정하면 됩니다. 이는 코드의 유지보수를 간편하게 만듭니다.
일관성: 일관된 UI와 기능을 제공할 수 있습니다. 모든 비밀번호 필드가 동일한 스타일과 설정을 사용하므로 사용자 경험이 향상됩니다.
실수 방지: 설정 파일을 통해 일관된 방식으로 필드를 사용하므로 실수를 줄일 수 있습니다. 예를 들어, 유효성 검사 규칙을 한 곳에서 관리하면 다른 곳에서 설정을 잘못 사용하는 실수를 방지할 수 있습니다.
export const INPUT_FIELD_SETTINGS = {
email: {
id: "email",
placeholder: "이메일을 입력해 주세요.",
validation: {
required: "이메일을 입력해 주세요.",
pattern: {
value: /^\S+@\S+$/i,
message: "이메일 형식이 올바르지 않습니다.",
},
},
},
password: {
id: "password",
placeholder: "비밀번호를 입력해 주세요.",
validation: {
required: "비밀번호를 입력해 주세요.",
minLength: {
value: 8,
message: "비밀번호 길이를 8자리 이상 입력해주세요.",
},
},
},
};
기본 요구사항
체크리스트 [기본]
회원가입
로그인
메인
심화
멘토님께
이전 파일을 건드리다 전부 새로 가져와서 프로젝트 전체가 변경사항이 됐습니다ㅠㅠ