[학습메이트 최기환] Chapter 1-1. 프레임워크 없이 SPA 만들기 #69
Conversation
This file contains 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
|
|
||
| event.stopPropagation(); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
오호 이렇게하면 이벤트 위임을 한번에 할 수 있었겠군요..! 멋진 코드 잘 보고갑니다 기환님! 👍
JunilHwang
reviewed
Dec 21, 2024
Comment on lines
+9
to
+22
| const RouteGuard = ( | ||
| Component: () => string, | ||
| options: RouteGuardOptionParams, | ||
| ) => { | ||
| return () => { | ||
| if (options.condition()) { | ||
| navigator.replace(options.redirectTo); | ||
| return options.Fallback; | ||
| } | ||
| return Component; | ||
| }; | ||
| }; | ||
|
|
||
| export default RouteGuard; |
There was a problem hiding this comment.
오 ㅋㅋㅋ RouteGuard 를 만들어주셨군요! 좋습니다 👍🏻👍🏻👍🏻
Comment on lines
+1
to
+5
| export type User = { | ||
| username: string; | ||
| email: string; | ||
| bio: string; | ||
| }; |
There was a problem hiding this comment.
Suggested change
| export type User = { | |
| username: string; | |
| email: string; | |
| bio: string; | |
| }; | |
| export type User = Record<'username' | 'email' | 'bio', string> |
이렇게도 표현할 수 있답니다~!
Comment on lines
+5
to
+16
| export function getUser(): User | null { | ||
| let user = localStorage.getItem(USER); | ||
|
|
||
| if (!user) return null; | ||
|
|
||
| return JSON.parse(user); | ||
| } | ||
|
|
||
| export function setUser(user: User) { | ||
| localStorage.setItem(USER, JSON.stringify(user)); | ||
| rerender(); | ||
| } |
There was a problem hiding this comment.
localStorage를 추상화해서 사용하는 계층이 있으면 좋겠네요!
그리고 store가 바로 render를 의존하고 있는데,
이런것들도 밖에서 처리되면 좋겠어요!
There was a problem hiding this comment.
감사합니다ㅎㅎ 사실 구독 발행 패턴으로 상태관리 스토어를 만들어 볼까 했는데 의지가 거기까지 안가더라고요.... 다음주차 과제는 좀 더 힘을 실어보겠습니다:)
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.
과제 체크포인트
기본과제
1) 라우팅 구현:
2) 사용자 관리 기능:
3) 프로필 페이지 구현:
4) 컴포넌트 기반 구조 설계:
5) 상태 관리 초기 구현:
6) 이벤트 처리 및 DOM 조작:
7) 라우팅 예외 처리:
심화과제
1) 해시 라우터 구현
2) 라우트 가드 구현
3) 이벤트 위임
과제 셀프회고
좋은 구조를 만들어 보려고 노력했습니다! React와 React-Router-Dom의 구조에 가깝게 만들어 보려고 했던거 같아요. render, navigator, router의 결합도를 최대한 낮추려 했습니다.
라이브러리 폴더의
큰 구조는 요정도이고, eventProcessor라는걸 만들어서 이벤트 위임 처리와 이벤트 추가 처리를 하게끔 했는데, 얘는 어디에 놓으면 좋을지... libs에 둬야 할거 같기도 하고.....모르겠습니다!!!