[1단계 - 점심 뭐 먹지] - 수이(김수연) 미션 제출합니다.#223
Conversation
JunilHwang
left a comment
JunilHwang
left a comment
There was a problem hiding this comment.
안녕하세요 수이!
RestaurantList에 대한 고민이 무척 많아보이네요 ㅎㅎ
일단 값과 UI의 동기화는... 지금 당장은 해소하기 어려워보여요.
자동으로 하기보단 수동으로 해야하는 그런 상황입니다.
이를 자동으로 하려면, state를 기반으로 UI를 계속 만들어내야 하는데,
이럴 경우 불필요한 렌더링이 많이 발생할 수 있어요.
그래서 프론트엔드 프레임워크가 이런 문제를 어떻게 해결했는지 한 번 찾아보시면 도움이 되리라 생각합니다.
react는 너무 복잡해서 preact 정도만 보셔도 좋을 것 같아요 ㅎㅎ
그리고 코드 개선에 대한 리뷰를 하나 남겼는데 한 번 확인 부탁드려요!
| static add(id, newRestaurant) { | ||
| const $targetList = document.getElementById(id); | ||
| append($targetList, LunchInfoCard(newRestaurant)); | ||
| } |
There was a problem hiding this comment.
id로 표현하는 이유를 아직 잘 모르겠어요!
이렇게 해도 똑같지 않을까요!?
constructor(id, restaurantList) {
this.#el = $(".restaurant-list");
restaurantList.forEach(({ src, name, distance, description, label }) => {
append(
this.#el,
LunchInfoCard({ src, name, distance, description, label })
);
});
}
static add(newRestaurant) {
append(this.#el, LunchInfoCard(newRestaurant));
}더 나아가면.. 이렇게 표현할 수도 있을 것 같아요.
constructor(id, restaurantList) {
this.#el = $(".restaurant-list");
this.#el.append(...restaurantList.map(LunchInfoCard))
}
static add(newRestaurant) {
this.#el.append(LunchInfoCard(newRestaurant));
}
src/main.js
Outdated
| MOCK_ITEM.restaurantList | ||
| ); | ||
|
|
||
| restaurantList.$restaurantList; |
src/component/AddLunchModalForm.js
Outdated
| }); | ||
|
|
||
| restaurantList.add({ | ||
| MOCK_ITEM.restaurantList.push({ |
There was a problem hiding this comment.
MOCK_ITEM에 값을 추가하고 있군요..!
이건 좀 위험해보여요 ㅠㅠ
MOCK_ITEM을 복사해서 어플리케이션에서 관리할 수 있도록 해주고 (전역상태같은?)
값의 변화는 MOCK_ITEM이 아니라 상태에 반영하는거죠.
값의 동기화 문제는... 지금 완벽하게 해결하긴 어려울 것 같아요 ㅎㅎ
고려할점이 무척 많아서요!
리액트는 이 문제를 어떻게 해결했을까요!?
|
해먼드 리뷰해주신 내용 대부분 반영했습니다! |
JunilHwang
left a comment
JunilHwang
left a comment
There was a problem hiding this comment.
안녕하세요 수이!
피드백 반영 잘 해주셨네요 ㅎㅎ
테스트 시점에 데이터를 주입하다는 것은
다르게 이야기 하면, 어플리케이션이 로딩 될 때 고정된 데이터를 사용하는게 아니라, 로딩하는 시점에 데이터를 주입할 수 있어야 한다는 이야기입니다!
이런 모습이랄까..
new App() -> MOCK_ITEM.restaurantList 를 고정으로 사용
new App(testItems) -> testItems 를 사용
이 외에도 여러가지 방법이 있겠지만... 중요한건 테스트를 위한 데이터와 실제 데이터를 구분해서 사용해야 테스트를 정교하게 작성할 수 있어요!
https://claude.ai/share/35c43a54-321b-467c-843a-5a482dffdd2a
위의 링크를 참고해주세요!
그리고 지금 form을 구성할 때 이렇게 사용하고 있어요
const $modalForm = /*...*/
append($modalForm, input1);
append($modalForm, input2);
append($modalForm, input3);
append($modalForm, input4);
append($modalForm, input5);
append($modalForm, input6);이런식으로 구성할 수 있도록 해주면 어떨까요?
append($modalForm, input1, input2, input3, input4, input5, input6);배열로도 수용할 수 있으면 어떨까요?
append($modalForm, [input1, input2, input3, input4, input5, input6]);혹은 함수 체이닝을 구성한다거나?
append($modalForm)
.concat(input1)
.concat(input2)
.concat(input3)
.concat(input4)
.concat(input5)
.concat(input6)개발자의 코드 작성 경험을 높이기 위한 고민을 다양하게 해보시면 좋을 것 같아요 ㅎㅎ
이번 단계는 여기서 마무리하도록 하겠습니다!
고생하셨어요~
| const restaurantList = new RestaurantList( | ||
| "toalRestaurantList", | ||
| MOCK_ITEM.restaurantList | ||
| ); |
There was a problem hiding this comment.
지금은 MOCK_ITEM.restaurantList로 데이터가 고정되어있는데요,
덕분에 테스트하기가 무척 어려운 그런 상태랍니다!
어플리케이션이 로딩되는 시점에 데이터를 가져올 수 있도록 하려면 어떻게 해야 좋을까요!?
그리고 테스트를 할 때는 테스트를 위한 데이터를 어플리케이션이 로딩될 때 주입하는거죠 ㅎㅎ
그래야 더 정확한 테스트가 가능하지 않을까요!?
| import { addRequired } from "./AddLunchModalForm.js"; | ||
| import toElement from "../utils/toElement.js"; | ||
|
|
||
| function TextareaForm({ id, bottomDescription, rows, label, required }) { |
There was a problem hiding this comment.
이렇게 표현하면 되지 않을까요!?
const $textareaForm = toElement(
`
<div class="form-item ${requiredClassName(required)}">
<label for="${id} text-caption" >${label}</label>
<Textarea
name=${id}
id=${id}
cols="30"
rows=${rows}
${required ? "required" : ""}
></Textarea>
<span class="help-text text-caption"
>${bottomDescription}</span
>
</div>
`
);| if (e.key === "Escape") { | ||
| Modal.close(id); | ||
| } | ||
| }; |
| document.getElementById(id).classList.add("modal--open"); | ||
| const $modal = toElement(`<div id="${id}" class="modal" />`); | ||
| append($modal, createModalBackdrop(id)); | ||
| append($modal, createModalContainer(modalContent)); |
There was a problem hiding this comment.
append($modal, createModalBackdrop(id), createModalContainer(modalContent));이렇게 한 번에 표현할 수 있도록 append를 만들어주면 어떨까요?
| }); | ||
|
|
||
| this.count = MOCK_ITEM.restaurantList.length; | ||
| constructor(id, items) { |
2 participants
pr : (#208)
배포 : https://shuyeon.github.io/javascript-lunch/
해먼드 안녕하세용
어쩌다 보니 세 번째 pr 정말 험난하네요,,
리뷰 마치시고 멘션 주시면 나머지는 수정할게요!!
잘 부탁드립니당