[Nick] VM 2주차 1번째 PR #65
Conversation
=>👍 ㅎㅎ
=> 느낀점과 하시려는 방향을 말씀주시니 소통하는 것 같아 좋네요~
=> 항상 감사합니다 ㅎㅎ 😄
=> Nick 혹시 "최소 실행 제품" 이라는 작업 프로세스를 아시나요? 이 번 데모데이 때 Nick의 자판기가 하나의 기능이 온전한 제품보단 "최소 실행 제품"으로 선보여지면 좋을 것 같아요~ 사용자가 해당 제품을 사용해보고 필요한 기능을 피드백 주고 서로 소통하는 부분을 경험하는 것도 정말 중요하거든요 ㅎㅎ Nick은 이미 잘하고 있지만 참고해주세요~ [Minimum Viable Product 최소 실행 제품]
=> Nick 이 말한 것처럼 최적화를 위해 시도해볼 수 있는 것들이 1)Context 분리 2)React.memo 3)useMemo 를 사용하는 방법들이 있는데요. 어느 하나 쉽지 않죠 ^^;; React를 만드시는 분은 1번 방법을 선호한다던데 한 번 이 글을 참고해보세요
=> 학생 땐 저도 Nick과 똑같았어요 ㅎㅎ 너무 조급해하시지 않아도 됩니다. 저는 위에 말씀드린 것처럼 제품 출시에 대한 기간 제한이 있다면 또는 내가 그 기간을 정했다면(저희는 데모데이겠죠) "최소 실행 제품"을 만들어내볼 것 같아요. 이번주 금요일에 최소 실행 제품을 만들기 위해선 어떤 기능을 구현해야하고 어떤 기능은 구현하지 말아야 할까 같이 구분지어 놓고 진행해보세요. 어떤 기능을 최적화한 경험도 중요하지만 유저가 내 제품을 사용해보고 피드백받는 경험도 정말 중요하다고 생각합니다~ |
|
고생하셨고 금요일날 또 뵐게요~ |
안녕하세요 Hamill!
2주차 1번째 PR입니다.
지난번 말씀해주신 뽀모도로 기법으로 학습을 진행하니 확실히 집중도도 높아지고 피로도도 많이 줄어든 것 같습니다 감사합니다!
설계와 구현 비율을 조절하려고 했었는데, 디자인을 짠 뒤에 컴포넌트들을 만들면서 기초적인 화면만 구현하면서 여기엔 어떤 상태가 들어오게 될 지, 어떻게 사용해야 할 지 고려하며 만들게 되어 전체적인 구상을 할 수 있었던 것 같습니다!
간단하게 보여지는 화면을 디자인 하게 될 때 그 컴포넌트의 깊이와 받을 상태등을 고려하게 되어 앞으로도 보여지는 것과 그 안의 내용물을 함께 고려하며 진행하려 합니다!
디자인은 디자이너 친구가 Pigma 사용법과 간단한 Img 파일들, 디자인 시안을 만들어주어 사용했습니다!
ES Lint는 제가 봐도 제 코드가 중구난방인 구석이 있어 다음 프로젝트부터 적용해보려 합니다!
2주차 현재까지의 진행상황
주말 동안 화면 구현을 진행했는데, 제가 생각했던 의도와는 다르게 진행이 되고 있었고 도무지 어디서 부터 손대야 할 지 모르겠어서 처음부터 뒤엎고 다시 시작했습니다..!!ㅎㅎ..
아무래도 급하게 처음부터 다시 진행하다보니 문서 정리등을 할 시간이 없었습니다ㅠㅠ
주말과 오늘까지 리액트 기능을 사용하는 법에 초점을 맞춰 학습을 진행했었는데, 예상과 다르게 동작할 때 작동 원리를 모르니 어떻게 손봐야할지 애를 많이 먹었습니다ㅠ
앞으로 조금씩 사용법이 익숙해진 기능들의 동작 원리를 찬찬히 살펴보려 합니다.
기능적으로 구현한 것은 Context API를 이용해 제품 재고를 set하고 import 해와 사용했습니다.
재고 관리 페이지가 생기게 되거나, 지갑 페이지에서 다시 자판기 페이지로 넘어왔을 때에 수량을 기억해 두고 상태가 손실되는 것을 방지하기 위해 사용했습니다!
또, 입력된 금액보다 비싼 제품에는 모든 event를 작동시키지 않고, 재고 수량이 다 떨어지면 비활성화 되게 만들었습니다.
현재 임의로 1000원이 투입되어 있는 상태인데, 보여지는 금액은 4000원이고 제품을 구매해도 1000원이 사라지지 않습니다ㅠㅠ
또, 토글 버튼을 통해 페이지를 이동할 때 버튼이 슬라이드 하는 이벤트를 추가하였습니다.
동작 예시
데모페이지
슬라이드 이벤트
재고 부족시 비활성화
페이지 이동 후에도 이전 상태를 기억
앞으로의 계획
문서 정리
자판기 상태표시화면 기능구현
지갑 구현 및 자판기와 연동
질문사항
현재 Context가 컴포넌트 최상단에 위치하여 구독하고 있는 모든 Component가 재렌더 되는 상황입니다.
usememo나 react memo등을 학습하여 해결해보려 하고 있습니다.
다른 컴포넌트들은 어찌저찌 해법을 생각해낼 수 있을 것도 같은데, 제품 수량같이 변화가 자주 일어나는 상태를 사용하고 있는 컴포넌트들의 재렌더를 어떻게 최적화 해야할지 고민입니. ㅠㅠ
또, 최적화가 신경쓰여 해결하려 노력하다 결국 기능 구현을 많이 하지 못했습니다.
지금처럼 최적화를 신경써서 천천히 구현하는 것과 일단 모든 기능을 구현하려 노력하고 추후에 최적화를 진행하는 것이 좋을지 모르겠습니다.
저는 이번 미션이 상태 관리의 중요성을 느끼고 그에 따라오는 문제들을 해결해보는 것이 중요한 미션처럼 느껴져서 전자를 택했는데, 문제 해결도 못하고 기능도 많이 못만들어 너무 아쉽습니다ㅠㅠ
hamill이라면 어떻게 하셨을지, 그리고 평소에 어떻게 진행하시는지 궁금합니다.
이상입니다!
잘부탁드립니다!