-
Notifications
You must be signed in to change notification settings - Fork 41
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
feat: Next / TypeScript / React Query / Zustand / Vanilla Extract를 사용하여 Real World 1차 기능 구현을 완료합니다. #155
Conversation
test123
…eware를 사용하여 로그인 권한 체크
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
89개.... 😇
핵심 내용은 코멘트 남겨드렸어요!
7주동안 고생 많았습니다 👏👏👏
@@ -0,0 +1,43 @@ | |||
import { HTTP_METHOD, COMMON_HEADERS } from '@/constants/api'; | |||
import { API_BASE_URL } from '@/constants/env'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
환경변수는 상수 파일보다 .env
에서 관리하면 좋을 것 같네요! 네이밍에서 그 의도를 드러낸 바와 같이 말이죠
|
||
constructor() {} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이러면 생성자 함수가 의미가 있을까... 싶습니다!
객체와 클래스의 차이가 무엇일까요?
async request(url: string, options: any, method: string) { | ||
const response = await fetch(`${this.BASE_URL}${url}`, { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fetch API의 options는 타입 선언 파일에 제공되므로, any 보다는 해당 타입을 확장해서 사용하거나 차용하는 것을 추천드려요.
if (!response.ok) { | ||
throw new Error(`HTTP error! Status: ${response.status}`); | ||
} | ||
|
||
return response; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
서버 에러
또는 네트워크 에러
일 때 핸들링은 어떻게 될까요?
const queryClient = useQueryClient(); | ||
|
||
const onSuccess = () => { | ||
queryClient.invalidateQueries({ queryKey: ['articles', tab] }); | ||
}; | ||
|
||
const onError = () => { | ||
// 권한이 없을 경우 login 페이지로 이동 | ||
router.push('/login'); | ||
}; | ||
|
||
const { favorite, unFavorite } = useArticles({ onSuccess, onError }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
커스텀 훅으로 분리시키면 어떨까요? 한 컴포넌트에서 너무 많은 역할을 갖고 있네요!
const useAuth = ({ | ||
loginSuccess, | ||
loginError, | ||
signupSuccess, | ||
signupError, | ||
signoutSuccess, | ||
signoutError, | ||
}: { | ||
loginSuccess?: (res: UserResponse) => void; | ||
loginError?: (err: Error) => void; | ||
signupSuccess?: (res: UserResponse) => void; | ||
signupError?: (err: Error) => void; | ||
signoutSuccess?: (res: UserResponse) => void; | ||
signoutError?: (err: Error) => void; | ||
}) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
비슷한 프로퍼티가 너무 많은 것 같은데, 로그인/로그아웃, 회원가입/탈퇴로 묶는 건 어떨까요?
📌 이슈 링크
📖 작업 배경
🛠️ 구현 내용
💡 참고사항
아래는 스터디가 끝나고 개인적으로 진행하고 싶은 부분입니다.
🖼️ 스크린샷