Open
Conversation
JunilHwang
reviewed
Mar 9, 2023
Comment on lines
+1
to
+9
| function debounce(func) { | ||
| let frameId; | ||
| return function () { | ||
| if (frameId) { | ||
| cancelAnimationFrame(frameId); | ||
| } | ||
| frameId = requestAnimationFrame(func); | ||
| }; | ||
| } |
Member
There was a problem hiding this comment.
Suggested change
| function debounce(func) { | |
| let frameId; | |
| return function () { | |
| if (frameId) { | |
| cancelAnimationFrame(frameId); | |
| } | |
| frameId = requestAnimationFrame(func); | |
| }; | |
| } | |
| function debounce(func) { | |
| let frameId; | |
| return () => { | |
| cancelAnimationFrame(frameId); | |
| frameId = requestAnimationFrame(func); | |
| }; | |
| } |
바로 cancel 해버려도 되지 않을까요!?
이름은 debounceOneFrame 처럼 조금 더 명시적으로 지어주면 좋을 것 같아요!
Comment on lines
+26
to
+27
| if (value !== null && typeof value === "object") | ||
| return observable(value); |
Member
There was a problem hiding this comment.
오... 객체면 다시 한 번 씌워주는군요 ㅎㅎ 좋습니다 👏👏👏
| if (value !== null && typeof value === "object") | ||
| return observable(value); | ||
|
|
||
| if (currentObserver && typeof observers !== "undefined") { |
Member
There was a problem hiding this comment.
observers가 undefined일 수가 있나요?
Comment on lines
+12
to
+13
| this.updateState(); | ||
| this.render(); |
Member
There was a problem hiding this comment.
updateState에서도 render를 실행하고 있기 때문에, 컴포넌트가 생성되는 시점에 render 함수가 총 두 번 실행될 것 같아요!
Comment on lines
+7
to
+10
| observe(() => { | ||
| console.log("ItemsView 컴포넌트에서 옵저버..."); | ||
| console.log(this.$props); | ||
| }); |
Member
There was a problem hiding this comment.
- observable을 통해서 만든 객체가 observe내에서 사용 되고,
- observable의 값이 변경 되면 observe를 실행한다
이런 흐름인데 지금은 observe에 observable로 씌워진 친구가 없어서, updateState는 최초에 1회만 실행되겠네요!
다만 컴포넌트가 생성되는 시점에 updateState를 실행하기 때문에, 이 컴포넌트의 상위 컴포넌트가 렌더링되는 경우에만 다시 생성되지 않을까 싶어요.
Comment on lines
+13
to
+40
| template() { | ||
| const { todoItems } = this.$props; | ||
|
|
||
| return ` | ||
| <ul> | ||
| ${todoItems | ||
| .map( | ||
| ({ done, name, updateState }, index) => ` | ||
| <li data-id="${index}"> | ||
| <input type="checkbox" ${ | ||
| done ? "checked" : "" | ||
| } id="toggle-btn" ${updateState ? "class='updated'" : ""}/> | ||
| <input type="text" ${ | ||
| done ? "class='todo checked'" : "class='todo'" | ||
| } id="title-${index}" value="${name}" ${ | ||
| updateState ? "" : "readOnly" | ||
| } /> | ||
| <button class="btn" id="update-btn">${ | ||
| updateState ? "완료" : "수정" | ||
| }</button> | ||
| <button class="btn deleteBtn" id="delete-btn">삭제</button> | ||
| </li>` | ||
| ) | ||
| .join("")} | ||
| </ul> | ||
|
|
||
| `; | ||
| } |
Member
There was a problem hiding this comment.
곰곰이 생각해보면, ItemsViews 컴포넌트는 클래스로 만들 필요 자체가 없는거죠..!
단순하게 함수로 표현해도 되지 않을까요?
Comment on lines
+3
to
+12
| export default class ItemAppender extends Component { | ||
| template() { | ||
| return ` | ||
| <div class="input-container"> | ||
| <input type="text" placeholder="새로운 할 일을 입력해주세요" id="append-input" class="append-input"/> | ||
| <button class="btn" id="append-btn">추가</button> | ||
| </div> | ||
| `; | ||
| } | ||
| } |
Member
There was a problem hiding this comment.
앞선 내용과 동일합니다!
state를 사용하고 있지도 않고,
props를 사용하고 있지도 않기 때문에 그냥 함수로 만들어서 사용해도 무방할 것 같아요~
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
3주차 피드백 해주신걸 늦게 확인해서 해당 내용은 5주차에 적용해서 올려보겠습니다!!!
🎯 완료한 Task
옵저버 패턴 어플리케이션 적용
피드백
학습 시간
몰입
미션