메타인지 스터디는 각자 본인이 일주일동안 공부한 내용을 기록하고, 회고해보는 스터디이다.
일주일동안 구현한 기능들
- 더보기 버튼을 누르면 3초 있다가 로딩창이 뜨고, 상품이 뜨면 로딩창이 지워짐
- 3초이내 할인쿠폰 메세지 등장했다가 3초후에 사라짐
- Detail 페이지의 하단 탭 ui 만듦 (버튼 0 누르면 내용 0뜸)
- 내용0,내용1,내용2 가 뜰때 0.5초 간격을 두고 서서히 등장함
- Detail 페이지가 처음로드 될때 1초 간격을 두고 등장함
- 데이터를 데려와서 Cart 페이지에 반복문으로 렌더링
- 변경하기 버튼을 누르면 수량이 +1씩 추가됨
- Detail 페이지에서 주문하기 버튼을 누르면 Cart에 상품이 추가됨
<어려웠던 점>
변경하기 버튼을 누르면 수량이 +1씩 추가됨
타켓팅을 하기 어려웠다
(1) 배열을 기준으로, 0번째 버튼을 누를때 0번째 상품수량이 +1 되도록
(2) id를 기준으로, 특정 id의 버튼을 누를때 동일 id의 상품수량이 +1 되도록
<어떻게 품?>
Redux store 이라는 라이브러리 사용, props 없이 컴포넌트끼리 state 공유 편리하게!
단, 방법이 조금 복잡
Reducers 안에 State 변경함수를 작성할때
두번째 파라미터인 action 에 따라,
action payload가 이 증감이 될수도, 몇 번째가 될수도, id를 나타내는 값이 될 수도 있어서
처음에 받아들이기 어려웠으나,
의사코드를 작성하고
다 지운뒤 다시 코드를 따라쳐보면서 익숙해질 수 있었음
'Code States 44' 카테고리의 다른 글
| 230423 메타인지 스터디 4회차 (0) | 2023.04.23 |
|---|---|
| 의사코드의 중요성 (0) | 2023.04.11 |
| Session2 기술면접 준비 (0) | 2023.04.10 |
| 나만의 아고라 스테이츠 만들기 + 회고 (2) | 2023.03.11 |
| 로그인 창 만들기 + 회고 (0) | 2023.03.08 |
