[10팀 이정은] [Chapter 1-2] 프레임워크 없이 SPA 만들기 - 작성중 #56
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
pitangland
reviewed
Dec 27, 2024
Comment on lines
+27
to
+37
| if (vNode.props) { | ||
| Object.entries(vNode.props).forEach(([key, value]) => { | ||
| if (key === "className") { | ||
| $el.setAttribute("class", value); | ||
| } else if (key.startsWith("on")) { | ||
| addEvent($el, key.toLowerCase().slice(2), value); | ||
| } else { | ||
| $el.setAttribute(key, value); | ||
| } | ||
| }); | ||
| } |
There was a problem hiding this comment.
updateAttributes 함수에 넣어서 속성 처리를 해줄 수 있을 것 같습니다!
(사실.. 저도 템플릿에 있길래 함수에 넣어서 구현한거라 좋은지, 안좋은지 잘은 모르겠지만..)
pitangland
reviewed
Dec 27, 2024
There was a problem hiding this comment.
예상되는 리스너들을 미리 등록해놓고 구현하신 부분이 이런 방법도 있구나 알게되었습니다!!
ywkim95
reviewed
Dec 28, 2024
Comment on lines
+24
to
+25
| child !== false && | ||
| child !== true, // 이것 까지 추가하면 Falsy값이 아니지 않나? boolean을 따로 처리해줘야하나? |
There was a problem hiding this comment.
이부분은 null을 제외한 나머지를 typeof로 변환하시면 조금 더 깔끔하게 작성하실 수 있을거에요
Comment on lines
+28
to
+40
| root.addEventListener("click", eventHandler); | ||
| root.addEventListener("input", eventHandler); | ||
| root.addEventListener("change", eventHandler); | ||
| root.addEventListener("focus", eventHandler); | ||
| root.addEventListener("blur", eventHandler); | ||
| root.addEventListener("keydown", eventHandler); | ||
| root.addEventListener("keyup", eventHandler); | ||
| root.addEventListener("keypress", eventHandler); | ||
| root.addEventListener("mouseover", eventHandler); | ||
| root.addEventListener("mouseout", eventHandler); | ||
| root.addEventListener("mousemove", eventHandler); | ||
| root.addEventListener("mouseup", eventHandler); | ||
| root.addEventListener("mousedown", eventHandler); |
There was a problem hiding this comment.
eventType을 가져와서 활용하시는 것도 좋았을 것 같아요! 아마 WeakMap을 활용하시려고 이 방법을 택하신거겠죠? WeakMap은 색인이 어려워서 루프 도는게 안되서 이 방법말고는 저도 따로 생각나는게 없더라구요. 그래서 Map으로 변경했습니다 ㅎㅎ..
| oldElement.setAttribute(name.toLowerCase(), ""); | ||
| } else { | ||
| oldElement.setAttribute(name, value); | ||
| } |
There was a problem hiding this comment.
className => class로 변경하는 부분이 빠진 것 같아요!
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) Diff 알고리즘 구현
2) 포스트 추가/좋아요 기능 구현
과제 셀프회고
기술적 성장
코드 품질
학습 효과 분석
과제 피드백
리뷰 받고 싶은 내용