Web dev
-
NodeJS / dotenv 로 환경변수 설정하기Web dev/NodeJS 2022. 3. 27. 11:35
mysql로 AWS RDS 연결에 성공하였다. 파일그대로 깃헙에 업로드하면 DB계정정보가 유출되니까 환경변수에 설정하여 업로드 해준다. .env 파일은 .gitignore에 설정해줘야 한다. .gitignore에 설정하면 업로드 할 때 설정파일은 업로드 되지 않는다. // .gitignore .DS_Store .env .env.local .env.development.local .env.test.local .env.production.local 이런식으로 해주면 된다. 1. dotenv 설치 npm i dotenv 2. .env 설정 // .env 파일 파일명앞에 '.' 을찍어줘야함 PORT = 5000 DB_HOST = "호스트 정보" DB_USER = "아이디" DB_PSWORD = "비밀번호" DB..
-
React / loginCheck customHook 만들기Web dev/React 2022. 3. 27. 00:04
포트폴리오 만드는중..오랜 사투끝에 로그인로그아웃 기능을 만들었다...하지만 세션을 리펙토링 해야한다.. 그냥 세션스토리지에 저장했기 때문에..세션을 제대로 적용한것도 아니다.. 갈길이 머니 일단 넘어가야지 ㅋㅋ.. 로그인,로그아웃을 만드니 로그인 여부에 따라 UI를 다르게 해줘야 한다. 로그인체크를 반복하다보니 custom hook으로 만들어 관리해보았다. hook을 만들땐 앞에 use를 붙혀줘야 된다고들 한다. useLoginCheck.js import React, { useEffect, useState } from 'react' export default function useLoginCheck() { const [isLogin, setIsLogin] = useState(false) useEffec..
-
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..