[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..
[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 스크롤 최상..
