[17팀 석금용][Chapter1-2] 프레임워크 없이 SPA 만들기 #115
Conversation
- processVNode 함수
| const PageComponent = targetPage ?? NotFoundPage; | ||
| const error = globalStore.getState().error; | ||
|
|
||
| const closeError = (e) => { |
There was a problem hiding this comment.
관련된 로직이 main.jsx 에도 있는데 별도로 추가하신 이유가 있으실까요?
There was a problem hiding this comment.
NotFoundPage 처리는 처리되지 않는 URL로 접근했을 경우에 처리하고, 에러바운더리는 런타임 도중에 에러처리하려고 추가했어요!
| const handler = handlers.get(target); | ||
| if (handler) { | ||
| handler(event); | ||
| if (event.cancelBubble) { |
There was a problem hiding this comment.
오 event.cancelBubble 가 있군요!
cancelBubble은 이벤트의 버블링 설정이 되어 있냐 아니냐를 나타내는 걸까요?
해당 코드가 있고 없고의 차이는 어떤걸까요?
There was a problem hiding this comment.
해당 타겟에서 이벤트가 실행되면 그 후에 버블링을 할 필요가 없을거 같아서 추가했습니답!
There was a problem hiding this comment.
새로 추가한 파일도 lib/index.js에 추가해서 사용해주시면 좋을 것 같아요!
| } | ||
|
|
||
| const handlers = eventMap.get(eventType); | ||
| handlers.set(element, handler); |
There was a problem hiding this comment.
Map의 키로 객체도 쓸 수 있다는 걸 처음 알았네요!
금용님 코드 참고해서 eventMap 내부 구현 리팩토링 해보려구요! 감사합니다 👍👍
|
|
||
| export const addEvent = (element, eventType, handler) => { | ||
| if (!eventMap.has(eventType)) { | ||
| eventMap.set(eventType, new Map()); |
There was a problem hiding this comment.
오 금용님은 Map으로 구현해주셨군요! Map으로 구현하니 불필요한 filter 작업이나 for문을 돌리지 않아도 바로 찾을 수 있어서 너무 좋네요!! 좋은 방법 알아갑니다 감사합니다!:)
|
금용님 코드는 항상 읽으면 직관적이고 읽기 쉽다는 생각이 드네요 :) |
과제 체크포인트
기본과제
1) createVNode
2) createElement
3) 컴포넌트를 jsx로 정의하여 사용했는지 확인하기
심화 과제
1) Diff 알고리즘 구현
2) 이벤트 위임 구현
리뷰 받고 싶은 내용
궁금한 점
과제를 수행하면서 느낀점
과제 시작 전 생각
오... virtual DOM을 만들어야 된다? 그걸 내가? 어떻게 만들어야지? 시작을 어떻게 해야 돼?
이번주 빨간날은 죽었다 생각해야겠다.
과제 제출 후 생각
오... 이게 되네...? 이런 개념이구나.
이렇게 해서 필요한 부분만 렌더링이 되는구나.
기타
과제 난이도
5점 만점에 5점