[♻️ Refactor] user 코드 개선 #2
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
aahreum
approved these changes
Dec 11, 2025
Comment on lines
+83
to
+96
| export function ProtectedRoute({ children }) { | ||
| const router = useRouter(); | ||
| const token = storage.getToken(); | ||
|
|
||
| useEffect(() => { | ||
| if (!token || isTokenExpired(token)) { | ||
| router.push('/login'); | ||
| } | ||
| }, [token]); | ||
|
|
||
| if (!token) return null; | ||
| return children; | ||
| } | ||
|
|
Member
There was a problem hiding this comment.
아 이렇게 Route로 하나 더 분리해볼 수도 있겠네요!!!
저는 이 부분을 생각을 못했던 것 같아요...🫠
Contributor
Author
There was a problem hiding this comment.
이건 저도 gpt의 도움을 받아서 알게된 사실이에요!
Comment on lines
+39
to
+58
| export const storage = { | ||
| getToken: () => localStorage.getItem('accessToken'), | ||
| }; | ||
|
|
||
| // services/api.ts | ||
| // 서버와 통신만을 책임짐 | ||
| // 백엔드와 통신만을 담당 | ||
|
|
||
| // Pages, Hooks, Components 어디서든 API 로직 재사용 가능 | ||
| // 에러 핸들링 일원화 가능 | ||
| // 추후에 axios 같은 라이브러리로 변경시 여기에서만 바꿔주면 됨 | ||
| export const api = { | ||
| getUser: async (token: string) => { | ||
| const res = await fetch('/api/user', { | ||
| headers: { Authorization: `Bearer ${token}` } | ||
| }); | ||
| if (!res.ok) throw new Error('Failed to fetch'); | ||
| return res.json(); | ||
| } | ||
| }; |
Contributor
Author
There was a problem hiding this comment.
그런건 없고 필요에 따라 사용하는 것 같아요!
Comment on lines
+70
to
+74
| return useQuery({ | ||
| queryKey: ['user', token], | ||
| queryFn: () => api.getUser(token!), | ||
| enabled: !!token && !isTokenExpired(token), | ||
| }); |
aahreum
reviewed
Dec 11, 2025
Comment on lines
+40
to
+41
| getToken: () => localStorage.getItem('accessToken'), | ||
| }; |
Member
There was a problem hiding this comment.
만약 앱라우터 환경에서 사용하는거라고 가정한다면
window 타입 체크해도 좋을 것 같아요!
export const storage = {
getToken() {
if (typeof window === "undefined") return null;
return localStorage.getItem("accessToken");
}
};아니면 getToken을 사용하는 곳에서는 'use Client'를 적어야 한다고 명시해도 좋구요!
looks32
commented
Dec 13, 2025
Contributor
Author
looks32
left a comment
looks32
left a comment
There was a problem hiding this comment.
댓글에 댓글 달때도 이런 코멘트를 달아야하는군요...
Comment on lines
+39
to
+58
| export const storage = { | ||
| getToken: () => localStorage.getItem('accessToken'), | ||
| }; | ||
|
|
||
| // services/api.ts | ||
| // 서버와 통신만을 책임짐 | ||
| // 백엔드와 통신만을 담당 | ||
|
|
||
| // Pages, Hooks, Components 어디서든 API 로직 재사용 가능 | ||
| // 에러 핸들링 일원화 가능 | ||
| // 추후에 axios 같은 라이브러리로 변경시 여기에서만 바꿔주면 됨 | ||
| export const api = { | ||
| getUser: async (token: string) => { | ||
| const res = await fetch('/api/user', { | ||
| headers: { Authorization: `Bearer ${token}` } | ||
| }); | ||
| if (!res.ok) throw new Error('Failed to fetch'); | ||
| return res.json(); | ||
| } | ||
| }; |
Contributor
Author
There was a problem hiding this comment.
그런건 없고 필요에 따라 사용하는 것 같아요!
Comment on lines
+83
to
+96
| export function ProtectedRoute({ children }) { | ||
| const router = useRouter(); | ||
| const token = storage.getToken(); | ||
|
|
||
| useEffect(() => { | ||
| if (!token || isTokenExpired(token)) { | ||
| router.push('/login'); | ||
| } | ||
| }, [token]); | ||
|
|
||
| if (!token) return null; | ||
| return children; | ||
| } | ||
|
|
Contributor
Author
There was a problem hiding this comment.
이건 저도 gpt의 도움을 받아서 알게된 사실이에요!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
저는 아름님 처럼 할 자신이 없어서
코드만 보는게 좋을 것 같아서 이렇게 정리했습니다.
강사님의 자료를 읽어보았지만 지금 수준에서는 이해도 되질 않네요.
이번주에 직접 설명을 들으면 좀 나을지도... 그래서
일단 분리를 한 다는 것에 중점을 두어서 해보았습니다.
일단 분리만 해도 많은 점이 개선되는 것 같습니다.
앞으로는 분리를 잘 하면서 작업을 해보아야겠습니다.