[Step 6] Router 직접 만들기 (김채은) #30
Open
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
JunilHwang
reviewed
Mar 9, 2023
vanilla-todo/src/util/fronzen.js
Outdated
Comment on lines
1
to
33
| export const frozen = (value) => { | ||
| let frozenValue; | ||
| if (Array.isArray(value)) { | ||
| frozenValue = []; | ||
| frozenArray(frozenValue, value); | ||
| } else if (typeof value === "object" && value !== null) { | ||
| frozenValue = {}; | ||
| frozenObject(frozenValue, value); | ||
| } else { | ||
| frozenValue = value; | ||
| } | ||
| return frozenValue; | ||
| }; | ||
|
|
||
| const frozenArray = (frozenValue, arr) => { | ||
| arr.forEach((v, i) => { | ||
| if (typeof v === "object" && v !== null) { | ||
| frozenValue[i] = frozen(v); | ||
| } else { | ||
| frozenValue[i] = v; | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| const frozenObject = (frozenValue, obj) => { | ||
| for (const [k, v] of Object.entries(obj)) { | ||
| if (typeof v === "object" && v !== null) { | ||
| frozenValue[k] = frozen(v); | ||
| } else { | ||
| frozenValue[k] = v; | ||
| } | ||
| } | ||
| }; |
There was a problem hiding this comment.
객체를 변경하지 못하게 만드는 함수가 아니라, 객체를 복사하는 함수 같아요!
그렇다면 frozen이 아니라 deepCopy 처럼 표현하면 어떨까요?
vanilla-todo/src/store.js
Outdated
Comment on lines
20
to
27
| case ADD_TODO: | ||
| return { ...state, todos: action.payload }; | ||
| case DELETE_TODO: | ||
| return { ...state, todos: action.payload }; | ||
| case TOGGLE_TODO: | ||
| return { ...state, todos: action.payload }; | ||
| case EDIT_TODO: | ||
| return { ...state, todos: action.payload }; |
vanilla-todo/src/core/Component.js
Outdated
Comment on lines
18
to
23
| get state() { | ||
| return frozen({ ...this.#state }); | ||
| } | ||
| get props() { | ||
| return frozen({ ...this.#props }); | ||
| } |
There was a problem hiding this comment.
구조해제할당은 하지 않아도 똑같이 동작할 것 같아요 ㅋㅋ
vanilla-todo/src/core/Component.js
Outdated
Comment on lines
50
to
52
| events.forEach((event) => { | ||
| this.#addEvent(event.type, event.target, event.handler); | ||
| }); |
There was a problem hiding this comment.
Suggested change
| events.forEach((event) => { | |
| this.#addEvent(event.type, event.target, event.handler); | |
| }); | |
| events.forEach(({ type, target, handler }) => this.#addEvent(type, target, handler)); |
사람마다 선호도의 차이가 있겠지만, 저는 이렇게 표현하는게 좋은 것 같아요! 더 깔끔한 느낌?
vanilla-todo/src/core/Component.js
Outdated
Comment on lines
46
to
49
| const events = this.event(); | ||
| if (!events) { | ||
| return; | ||
| } |
There was a problem hiding this comment.
Suggested change
| const events = this.event(); | |
| if (!events) { | |
| return; | |
| } | |
| const events = this.event() || []; |
이러면 한 방에 해결되지 않을까요!?
vanilla-todo/src/core/ReduxStore.js
Outdated
Comment on lines
9
to
12
| for (const [key, value] of Object.entries(newState)) { | ||
| if (!state.hasOwnProperty(key)) continue; | ||
| state[key] = value; | ||
| } |
There was a problem hiding this comment.
이런 로직도 유틸함수로 만들어서 관리할 수 있겠네요!
vanilla-todo/src/route.js
Outdated
|
|
||
| renderPath(); | ||
|
|
||
| window.addEventListener("locationChange", renderPath); |
There was a problem hiding this comment.
locationChange라는 이벤트 타입도 상수로 관리할 수 있지 않을까 싶어요~
Comment on lines
9
to
11
| window.addEventListener("popstate", (e) => { | ||
| this.#setUrl(e.target.location.pathname); | ||
| }); |
There was a problem hiding this comment.
pathname만 가져다가 사용하게 되면 queryString이나 hash 같은건 무시되지 않을까요?
There was a problem hiding this comment.
https://developer.mozilla.org/ko/docs/Web/API/URL/URL
위의 API를 활용하면 조금 더 편리하게 router에 대한 정보를 관리할 수 있답니다!
Comment on lines
19
to
34
| #parse(url) { | ||
| const splitUrl = url.split("?"); | ||
| const path = splitUrl[0]; | ||
| const queryString = {}; | ||
|
|
||
| if (splitUrl.length > 1) { | ||
| splitUrl[1].split("&").forEach((query) => { | ||
| const [key, value] = query.split("="); | ||
| if (key && value) { | ||
| queryString[key] = value; | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| return { path, queryString }; | ||
| } |
|
|
||
| const locationChange = new CustomEvent("locationChange"); | ||
|
|
||
| export default class HistoryRouter { |
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.
🎯 완료한 Task
피드백
학습 시간
몰입
미션