[js] 자바스크립트로 시간차 지연 출력 (ft. for문, setTimeout, react)
자바스크립트에서 시간차, 지연을 위한 구현 방법입니다. 자바스크립트를 이용하여 시간차를 두고 출력하는 방법은 setTimeout와 async를 이용한 방법이 있습니다. 여기서 데이터의 양이 많을 경우, for문과 map을 이용해 setTimeout 을 사용하는 방법이 좋습니다. for문, setTimeout 예제 1초 마다 0부터 4까지 시간차로 출력됩니다. const data = [1, 2, 3, 4, 5] for (let i = 0; i { console.log(i) }, i * 1000) } //결과 //0 //1 //2 //3 //4 map, for문, setTimeout 예제 데이터의 양이 많을 경우 map과 함께 이용하여 데..
[react] 네비게이션 구현
react, 웹 admin, dashbord에서 필요한 nav 바를 구현합니다. 구현 화면 구현 영상 구현 내용 1. react, hooks를 이용한 Nav 바 구현 2. style은 tailiwind 사용 3. 하위 메뉴 hidden에서 상위 메뉴 클릭 시 하위 메뉴 출현 상위 폴더 const Nav = () => { const menus = [ { id: 1, upperMenu: '상위 메뉴1', lowerMenu1: '하위 메뉴1', lowerMenu2: '하위 메뉴2' }, { id: 2, upperMenu: '상위 메뉴2', lowerMenu1: '하위 메뉴1', lowerMenu2: '하위 메뉴2' }, { id: 3, upperMenu: '상위 메뉴3', lowerMenu1: '하위 메뉴1'..
[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..
