Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[14기 김동영] step2 - 상태 관리로 메뉴 관리하기 #288

Open
wants to merge 14 commits into
base: pers0n4
Choose a base branch
from

Conversation

pers0n4
Copy link

@pers0n4 pers0n4 commented Jul 24, 2022

Checklist

  • localStorage에 데이터를 저장하여 새로고침해도 데이터가 남아있게 한다.
  • 에스프레소, 프라푸치노, 블렌디드, 티바나, 디저트 각각의 종류별로 메뉴판을 관리할 수 있게 만든다.
    • 페이지에 최초로 접근할 때는 에스프레소 메뉴가 먼저 보이게 한다.
  • 품절 상태인 경우를 보여줄 수 있게, 품절 버튼을 추가하고 sold-out class를 추가하여 상태를 변경한다.

Description

  • function 형태로 선언되었던 Appclass로 변환
  • Web Storage의 사용 편의성을 높이기 위한 utils wrapper 함수 정의
    • 하면서 디렉터리 구조 변경
  • MenuItemApp의 상태에 따라 렌더하도록 변경
  • MenuItem 품절 속성 추가

Additional

  • App에서 render method를 호출할 때 menuList의 모든 childrenreplaceChildren으로 교체하는데, 일부분만 수정이 필요한 경우 어떻게 최적화를 진행할 수 있을까
  • 컴포넌트 자체를 세부적으로 구분해두지 않았다 보니 대부분의 로직이 App.js에 집중되는 중
    • 언젠가 menuForm, menuList, menuCount, categoryTitle element 등을 별도의 컴포넌트로 선언함으로써 책임을 분리하는 방향으로 진행하는게 좋을 듯

Demo

https://pers0n4.github.io/moonbucks-menu/

Copy link

@dhrod0325 dhrod0325 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

안녕하세요 동영님!

웹 컴포넌트로 깔끔하게 잘 만드셨네요. 많이 배웠어요! 👍

너무 잘 작성하셔서 남길게 별로 없네요... ㅠ

고생하셨습니다!

Comment on lines +23 to +31
try {
const value = storage.getItem(key);
if (typeof value !== "string") {
throw new TypeError(`${key} is not a string`);
}
return JSON.parse(value);
} catch {
return defaultValue;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

string이 아닌 키가 들어오면 defaultValue로 인한 오동작은 처리할 방법이 없을 것 같아요..! throw new TypeError만 던지고 try catch는 사용하는 부분에서 처리하거나 string이 아닌 키가 들어올땐 콘솔로 경고를 찍고 기본값을 리턴하는 구조는 어떨까요~?

this.isSoldOut = isSoldOut;
}

attributeChangedCallback(name, _oldValue, newValue) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

attributeChangedCallback 으로 처리하니 로직이 굉장히 심플해 지는 것 같네요. 저도 다음에 사용해봐야겠어요!👍

Comment on lines +144 to +149
...this.#state.menuList.slice(0, index),
{
name: menuItem.name,
isSoldOut: menuItem.isSoldOut,
},
...this.#state.menuList.slice(index + 1),

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분은 중복으로 사용되고 있는거 같은데 함수화 해서 사용하는건 어떨까요~?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants