TIL/Project 13

[React] 장바구니 수량 변경 기능 구현

상품리스트를 컴포넌트로 뺐기 때문에 그 안에서 수량 변경이나 계산이 모두 이루어져야 한다고 생각했는데, 그렇게 계산된 요소를 부모 컴포넌트로 끌어올리고 다시 사이드바의 최종 금액에 반영해야 한다고 생각하니 어려웠다. 그걸로 며칠을 붙잡고 고민했는데 멘토님의 피드백을 받고 수량을 +,-로 변경하는 minusCount 함수와 plusCount 함수를 부모 컴포넌트에서 함수를 쓰고 prop으로 끌어오도록 수정했다. 그리고 - 버튼에는 disabledMinus 함수를 작성하여 1 이하로는 숫자가 떨어지지 않게끔 disabled를 주었다. cartList를 useState()로 설정해놨는데, state를 직접적으로 건드는 방식은 지양하는 게 좋다고 해서 spread 연산자로 복제해서 계산하도록 했다. 클릭한 버튼..

TIL/Project 2022.07.24

[React] Footer layout 구현 완료

푸터는 거의 퍼블리싱 위주여서 수월하게 진행했다. 장바구니하다가 푸터하니 정말 단순 작업처럼 느껴졌다. 클론코딩한 사이트의 푸터가 우리가 메인 폰트로 정한 'Gowun Dodum'보다는 고딕체에 가까워 보여서 구글 폰트에서 유사한 느낌의 'IBM Plex Sans KR'을 사용했다. 컴포넌트는 상단의 로그인 옆 SNS 부분과, 그 아래 카테고리 부분, 그리고 푸터 로고 옆의 회사소개, ... 와 같이 반복되는 부분을 상수데이터로 넣기 위해 사용했다. 상수 데이터 형식은 다 동일하기에 SNS 부분만 적용한 코드를 넣어보겠다. const FOOTER_SNS = [ { id: 1, url: 'https://blog.naver.com/wecode', icon: 'fa-brands fa-blogger-b', },..

TIL/Project 2022.07.22

[React] 장바구니 layout 구현

장바구니 초기 셋팅 후 레이아웃만 구현했다. 장바구니에 담은 상품리스트는 반복되는 요소라 map() 메소드를 사용해서 컴포넌트로 만들었다. 안에 있는 데이터는 Mock data로 만들었고, Trello로 공유받은 키값을 맞춰 작성했다. 지금 로직으로는 for문을 돌려서 모든 상품을 선택한 기준으로 최종 금액을 계산해서 표기하도록 짜여있는데 나중에 선택한 상품만 골라서 금액을 합산하려면 로직을 다시 써야겠지... 어렵다 어려워 😔

TIL/Project 2022.07.20