목록복습스터디과제 (14)
안녕하세요
https://youngentry.github.io/week2-youtube-api/ React App youngentry.github.io 라이브러리 sass (css) $ npm i sass react-dom (라우터) $ npm i react-router-dom@6 redux-toolkit (상태관리) $ npm i@reduxjs/toolkit react-redux googleapis (api 라이브러리) $ npm install googleapis --save axios (fetch 라이브러리) $ npm i axios react-player (iframe 리액트 라이브러리) $ npm i react-player 레이아웃 컴포넌트 구조 JS파일 폴더 구조 components 네비게이션 바와 같이 ..
[1주차 과제 장바구니 사이트] (2023-01-13 ~ 2023-01-18 약 일주일) React App youngentry.github.io 1주차 과제 장바구니(1) - css 구현하기 1주차 과제 장바구니(2) - 장바구니에 추가, 삭제, 수량 조절, 전체가격 표시 1주차 과제 장바구니(3) - 장바구니 비우기, 금액초과 경고, 입력값 검사 1주차 과제 장바구니(완료) - 모달창 다음 단계로, 드래그 기능 Point. 확장성을 고려한 설계 모달 stage별로 다음 단계로 넘어가기 위한 조건은 모두 다르기 때문에 stage각각에 필요한 함수를 만드는 것이 아닌, 검사할 조건을 전달하여 true면 다음 단계로 넘어가도록 합니다. ex) 0 => 1 nextStage(구매금액검사함수, stage+1) ..
[1주차 과제 장바구니 사이트] (2023-01-13 ~ 2023-01-18 약 일주일) React App youngentry.github.io 1주차 과제 장바구니(1) - css 구현하기 1주차 과제 장바구니(2) - 장바구니에 추가, 삭제, 수량 조절, 전체가격 표시 1주차 과제 장바구니(3) - 장바구니 비우기, 금액초과 경고, 입력값 검사 1주차 과제 장바구니(완료) - 모달창 다음 단계로, 드래그 기능 장바구니 비우기 장바구니에 상품이 없으면 버튼이 나타나지 않고, 장바구니에 상품이 있으면 장바구니 비우기 버튼이 나타난다. {cartList.length ? ( clearCartList()}> 장바구니 비우기 ) : null} 장바구니 비우기 버튼을 클릭하면 cartList를 비운다 // ---..
[1주차 과제 장바구니 사이트] (2023-01-13 ~ 2023-01-18 약 일주일) React App youngentry.github.io 1주차 과제 장바구니(1) - css 구현하기 1주차 과제 장바구니(2) - 장바구니에 추가, 삭제, 수량 조절, 전체가격 표시 1주차 과제 장바구니(3) - 장바구니 비우기, 금액초과 경고, 입력값 검사 1주차 과제 장바구니(완료) - 모달창 다음 단계로, 드래그 기능 장바구니에 제품 추가하기 1. 장바구니를 렌더링하기 위한 리스트를 만든다. const [cartList, setCartList] = useState([]); 2. 삼항연산자를 이용해 장바구니에 상품이 있을 때, 없을 때를 나누어 표시한다. {cartList.length ? ( cartList.m..