https://vitejs.dev/guide/ Vite Next Generation Frontend Tooling vitejs.dev npm create vite@latest 이후 패키지명을 작성하고 프레임워크를 선택해준다. 사용언어 타입을 정해준다. 이후 code (프로젝트명) 으로 실행시키고 npm i 로 인스톨해준다. 모든것이 제대로 작동하는지 확인하기위해서 npm run dev 를 통해 확인 git remote add origin URL 을 통해서 github연결 react router dom 설치 npm i react-router-dom@6.14.2 style을 reset 해주고 설치하기 npm i styled-reset npm i styled-components@6.0.7 npm i @type..

import React, { useState } from "react"; import { HashRouter as Router, Route, Switch } from "react-router-dom"; export default () => { //hooks const [isLoggedIn, setIsLoggedIn] = useState(false); return ( {/* {isLoggedIn ? show home : show login page} */} {isLoggedIn ? : } ) } Router.js에서 태그를 열어서 작성해주고 import React from "react"; const Auth = () => Auth; export default Auth; Auth.js에서 위처럼 선언해주면 ..

React 환경설정 vscode에서 새 윈도우를 생성하고 터미널을 열어서 cd ---- 로 패키지 경로 설정을 한 이후에 npx create-react-app (패키지명) 을 통해서 react 패키지 설치하기. 터미널에 code nwitter를 입력하여 새창으로 프로젝트 오픈 이후 Github에 업로드시 새 레파지토리 생성을 하고 해당 레파지토리의 주소를 복사한다. 터미널에서 git remote add origin " 생성한 레파지토리 URL " 입력 입력후 error: remote origin already exists. 에러 발생시 git remote remove origin 명령어를 입력해서 기존에 연결되어 있는 원격 저장소와의 연결을 끊어줍니다. git remote add origin [새롭게 연..

useNotification https://developer.mozilla.org/en-US/docs/Web/API/Notification Notification - Web APIs | MDN The Notification interface of the Notifications API is used to configure and display desktop notifications to the user. developer.mozilla.org notification API 를 활용한 알람이 실행되는 함수 if(!("Notification" in window)){ return; } window가 아니라면 브라우저에서 notificatio을 지원하지 않기때문에 예외처리 해준다. const fireNotif ..

useScroll useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); addEvent를 하면 같은이름과 같은 handler로 removeEvent를 꼭 해줘야한다. const onScroll = () => { console.log("x : ", window.scrollX, "y :" , window.scrollY); } window를 통해서 scroll의 좌표값에 접근을 하고 스크롤위치가 변경이 될때마다 좌표값이 출력된다. setState({x : window.scrollX, y : window.scrollY}); setS..

useFadeIn const useFadeIn = () => { const element = useRef(); useEffect(() => {}) return {ref : element, style : {opacity : 0}}; } export default function App() { const fadeInH1 = useFadeIn(); return ( Hi ); } {ref : element, style : {opacity : 0}}을 return하여서 h1태그에 속성값으로 풀어준다 {...fadeInH1} useEffect(() => { if(element.current) { const {current} = element; current.style.transition = `opacity 3s` ..