[react] 장바구니 추가, 삭제, 전체 삭제 기능 구현
예제는 패스트캠퍼스의 "이웅재"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 const [orders, setOrder] = useState([{id: ' ', quantity: 0}]) 의 형식으로 state 관리 장바구니에 상품 추가 선택한 상품 삭제, 전체 장바구니 삭제 사용한 web API: find(), map(), filter() 구현 영상 상품 리스트 컴포넌트 {prototypes.map((prototype) => { const { id, thumbnail, title, price, desc, picUrl } = prototype; const onAdd = () => {addToOrder(id)} //** 이 부분에서 클릭이벤트로 해당 id 보내줌 return ( {title} $ {p..
[react] 체크 박스 토글 기능 구현 (ft. new Set(), checked)
react, set 객체를 이용한 체크박스 토글 기능 구현입니다. 구현 화면 구현 영상 구현 내용 - react, hooks 방식 - 체크 박스 토글 기능(한번 클릭 선택, 두번 클릭 취소) - es6 최신 문법, set 객체를 이용하여 체크된 요소들 넣어주기 react 체크박스 토글 기능 (new Set()) import React, { useState } from "react"; const Check = () => { const formData = [ { id: 1, name: "딸기" }, { id: 2, name: "바나나" }, { id: 3, name: "피자" }, { id: 4, name: "불고기" }, { id: 5, name: "김치" }, { id: 6, name: "볶음밥" }, ..
[js] 스크롤 이동, 스크롤 현재 위치 (ft. scrollTop, scrollIntoView)
web 스크롤 API, window.scrollTo() 입니다. 모바일 웹뷰에서 페이지를 이동하거나, 컴포넌트를 교체할때마다 이전 페이지나 컴포넌트의 스크롤 위치가 유지될때 스크롤을 강제로 상위로 이동시킬때 사용합니다. clientHeight, scrollHeight, offsetHeight 차이 clientHeight: 요소의 내부 높이, 패딩 값은 포함, 스크롤바, 테두리, 마진은 제외 scrollHeight: 요소에 들어있는 컨텐츠의 전체 높이(스크롤 끝까지 내렸을때), 패딩과 테두리가 포함, 마진은 제외 offsetHeight: 요소의 높이입니다. 패딩, 스크롤 바, 테두리(Border)가 포함, 마진은 제외 scrollHeight > offsetHeight > clientHeight 스크롤 최상..
[react] Redux 예제 (ft. 미들웨어, Redux-thunk, Redux-devtools)
react에서 Redux 사용 예제입니다. 예제는 유투버, code Scalper님의 강의를 들으면서 공부한 내용입니다. Redux의 기본 원리 화면 결과 폴더 구조 폴더 안 파일 구조 react Redux 예제 구현 순서 컴포넌트 파일 구성 CRA로 프로젝트 생성, components 폴더 구성 components 폴더 내에 Subscribers.js, Display.js, Views.js 세 개의 파일 생성 App.js에서 위의 하위 components 삽입 리덕스 redux 폴더 안에, 하위 폴더 생성(comments, subscribers, views) 각 하위 폴더 마다, types.js, actions.js, reducer.js 순서로 파일 생성 types.js : action type을 변수..
[js] 현재 날짜, 시간 가져오기(ft. 월, 일, 요일, 시간)
자바스크립트를 이용한 날짜 출력 방법입니다. 현재 날짜, 시간 구하기 let now = new Date(); // 현재 날짜 및 시간 연도 구하기 let year = now.getFullYear(); 월 구하기 let todayMonth = now.getMonth() + 1; 일 구하기 let todayDate = now.getDate(); 요일 구하기 getDay()는 숫자로 출력됩니다. 화요일의 경우, 2로 나오기 때문에, 숫자를 이용하여, 요일을 출력해야 합니다. const week = ['일', '월', '화', '수', '목', '금', '토']; let dayOfWeek = week[now.getDay()]; 시간 구하기 let hours = now.getHours(); 분 구하기 let mi..
