전체 글
-
localStorage 와 sessionStorage 의 차이점Web dev/ETC 2022. 3. 26. 17:07
로그인 로그아웃 기능을 공부하다가 세션을 사용하게 되었다. 세션스토리지에 저장하여 로그인 유지가 가능하도록 공부하였다. 로컬스토리지와 세션스토리지의 차이점에 대해 찾아보았다. 1. localStorage 사용자 세션 데이터 유지할수 있다 브라우저 닫았다가 다시 열었을 때도 지속된다. 탭을 여러개 열어도 공유된다. 명시적으로 삭제될때까지 지속된다. 변경 사항은 저장되어 현재 및 향후 사이트 방문 시 사용할 수 있다. * 정리 : 사용자가 브라우저 창을 닫았을 때 데이터는 삭제되지 않으며, 일, 주, 월 및 연도에 사용할 수있는 만료 날짜없이 사용자 정보 데이터를 저장한다. //Set the value in a local storage object localStorage.setItem('key', 'valu..
-
jQuery / class 제어하기Web dev/jQuery 2022. 3. 25. 14:36
제이쿼리에는 어느정도 익숙하지만 그래도 기록으로 남기려고 한다. 주의 할점은 셀렉터에서 대상이 id인지 class인지 '#' '.' 으로 선언해줘야한다. 하지만 뒤에 메서드에는 '.' 을 안붙혀줘도 된다. 1. 클래스 추가 $('선택자').addClass('class1'); // 1개 추가 $('선택자').addClass('class1 class2'); // 여러개 추가 2. 클래스 제거 $('#선택자').removeClass('class1'); // 1개 제거 $('#선택자').removeClass('class1 class2'); // 여러개 제거 3. 클래스 교체 : 체이닝으로도 할 수 있다. $('선택자').switchClass('oldClass', 'newClass'); $('선택자').remov..
-
JavaScript / Scroll event , scrollTop 구하기Web dev/JavaScript 2022. 3. 25. 14:03
리엑트로 퍼블리싱중이다. 스크롤 시 헤더가 변화하는걸 구현하려고 했다. 처음엔 훅으로 해보려고 했는데 잘안되서그냥 자바스크립트로 구현했다. 1. 스크롤이벤트 발생시 함수를 실행해준다. document.addEventListener('scroll', function() { scrollDown(); }); 2. 스크롤 했을때 일정구간이 지나면 클래스를 부여한다. const scrollDown = () =>{ const scrollTop = document.documentElement.scrollTop; const headerWrap = document.getElementById("header"); if(scrollTop > 100){ console.log("헤더야 없어져랏") headerWrap.classL..
-
React / JavaScript module.css 클래스 부여하기Web dev/React 2022. 3. 25. 13:50
리엑트에서 스크롤 다운을 하면 헤더에 변화를 주려 클래스를 부여하는데 잘 동작하지 않았다. 클래스는 module.css. 에서 불러오고 있어서 불러오면 변수로 넣어주니 잘 동작했다. import React from 'react'; import HeaderNav from './HeaderNav'; import HeaderTop from './HeaderTop'; import header from '../../assets/css/common/header.module.css'; export default function Header() { const scrollDown = () =>{ const scrollTop = document.documentElement.scrollTop; const headerWrap..
-
JavaScript / Class 제어하기Web dev/JavaScript 2022. 3. 25. 13:44
리엑트로 퍼블리싱중이다. 아직 나에게는 제이쿼리가 익숙하지만 요즘 잘 안쓴다길래 바닐라스크립트로하려고기본중에 기본인 클래스 제어하는걸 공부해봤다. const element = document.getElementById('element'); 1. 클래스 추가 element.classList.add('class1'); // 1개 추가 element.classList.add('class1', 'class2') // 여러개 추가 2. 클래스 제거 element.classList.remove('class1'); // 1개 제거 element.classList.remove('class1', 'class2') // 여러개 제거 3. 클래스 교체 element.classList.replace('oldClass', 'n..
-
React / tab 쉽고 간단하게 만들기Web dev/React 2022. 3. 20. 14:10
상품 상세페이지를 만드는중에 탭메뉴를 구현해야 했다. 구글링 하다보면 탭메뉴 예제는 많이 있었다. 이 코드가 제일 짧고 가독성이 좋다 import React, { useState } from 'react' import tab from '../../assets/css/sub/product.module.css'; import styled from "@emotion/styled"; import ReviewSlide from '../main/ReviewSlide'; const Tabs = styled.div` display: flex; justify-content: center; `; const Tab = styled.button` width:100%; height: 40px; box-sizing: border..
-
React / useState 로 count 만들기Web dev/React 2022. 3. 20. 13:31
상품상세 페이지 만드는 도중 수량체크하는걸 만들어보았다. useState 사용예제로 흔한 카운트버튼을 만들어 보았다. 이제 장바구니 찜하기 구매하기까지 공부해 봐야겠다. 수량체크여서 0이 되지 않게끔 조건을 걸어주었다. import React, { useState } from 'react'; import detail from '../assets/css/sub/product.module.css'; export default function ItemDetailPage() { const [number, setNumber] = useState(1); const increase = () => { setNumber(number + 1); } const decrease = () => { if(number > 1 ){..
-
React / useParams Hook으로 파라미터 받아 데이터 뿌려주기Web dev/React 2022. 3. 18. 21:52
상품리스트 페이지를 구현하려고 한다. 카테고리별로 뿌려주는 데이터가 다르기 때문에 URL의 파라미터를 받아 뿌려줘야 했다. 자바스크립트 경우 location.search 로 url값을 받아와 정규표현식으로 다듬어 사용해야해서 코드가 길어지고 정규표현식때문에 어려웠당. 하지만 React는 react-router-dom의 useParams Hook으로 간편하게 값을 받아올 수 있었다. 1. 라우터 설정해주기 // app.js 2. 링크에 파라미터 전달해주기 나는 헤더에서 제품을 누르면 인덱스로 전체보기를 하려고 all이라고 붙혀주었다. //HeaderTop.jsx 제품 3.useParams로 값 받아오기 //SubItemList.jsx // 라우트설정에 :category로 해줬으니 변수명도 같은걸로 설정해줘..