Java Scripts (57) 썸네일형 리스트형 Front End App Project creation for Vue/React vue project creation option 1) npm install -g @vue/cli // vue project 를 만들기 위해서는 전역적으로 install 해야함. VS code 에 설치하는 확장 program Vue 5 Snippets vetur 나 volar 와 같은 확장 program HTML 과 CSS Support vue create [project_name] option 2) npx create-vue project_name // vita base project 로 최근에 announce 된 것임 react project creation npm install -g create-react-app // globally 설치하고 react application 을 creation 함 .. SandBox for Easy Code Testing 개발환경이 미리 준비된 cloud 환경에서 code 를 빠르게 작성하여 동작을 확인할 수 있는 것임 https://codesandbox.io/ CodeSandbox: Instant Cloud-Based IDE CodeSandbox is a cloud development platform that empowers developers to code, collaborate and ship projects of any size from any device in record time. codesandbox.io 여기서는 react 용 project instance (strange-violet-7) 를 만들고 아래의 code 를 App.js 에 update 하여 useState 를 test 하였다. Project .. Hook in React - useNotification note) MDN 의 notification api 를 이용하여 구현함 https://developer.mozilla.org/ko/docs/Web/API/Notification Notification - Web API | MDN Notifications API의 Notification 인터페이스는 사용자에게 데스크톱 알림을 설정하고 보여주는데 사용됩니다. developer.mozilla.org note) chrome : setting-> Privacy and security -> Site settings -> Notifications 의 Default behavior 에서 Use quieter messaging 를 선택하고서 notification 이 만들어지는 것을 확인 할 수 있었다. 일단 동작이 된.. Hook in React - useScroll note) 100 ? "red" : "blue" }}>Hi 와 같이 style 에서는 대괄호를 2개 사용한다 {{}} note) scroll event 를 감지하여 element 의 색을 변경(Blue -> Red)시키고 있다. import { useState, useEffect } from "react"; export const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = () => { setState({ y: window.scrollY, x: window.scrollX }); }; useEffect(() => { window.addEventListener("scroll", onScroll.. Hook in React - useNetwork note) network 이 online 인지 offline 인지 인지하여 화면에 표시해 준다. note) 동작을 확인하기 위하여는 chrome broser 에서 inspect -> Network 에서 Fast 3G 를 누르면 Browser 를 offline 으로 만들수 있고, offline 이 되면 화면도 같이 offline 으로 표시된다. note) offline online event handler 를 useEffect 안에서 self 로 등록 해제가 되고 있는 멋진 code 이다. note) sample working codes import { useState, useEffect } from "react"; export const useNetwork = (onChange) => { const [s.. Hook in React - useBeforeLeave note) const { clientY } = event;와 같이 사용하면 event object 에서 clientY 만을 뽑아낼수 있다. (유용한 기법) note) mouseleave event handler 등록과 해제를 아래 code 와 같이 useEffect 안에서 자체적으로 하고 있다 awesome codes. useEffect(() => { document.addEventListener("mouseleave", handle); return () => document.removeEventListener("mouseleave", handle); }, []); note) 아래는 test 가 가능한 전체 code 이다. import { useEffect } from "react"; export con.. Hook in React - usePreventLeave note) browser window 를 빠져나가려 할 때 저장하지 않았다고 알려주는 기능. note) "beforeunload" event 에 등록된 함수는 browser window 가 빠져나갈 때 호출된다. note) protect button 을 누르고 window 를 빠져나가면 “Changes you made may not be saved.” 의 pop up message 가 나타나고, Unprotected button 을 누르고 window 를 빠져나가면 아무런 message 가 보이지 않는다. export const usePreventLeave = () => { const listener = event => { event.preventDefault(); event.returnValue = ".. Hook in React - useAxios note) console.log(`loading:${loading}\nError:${error}\nData:${JSON.stringify(data)}`) 변수를 ${} 을 이용하여 여러 data 를 하나의 string 으로 표시하는 기술이다 ( awesome ) note) return { ...state, refetch }; 와 같이 return 되는 것을 const {loading, data, error, refetch} = useAxios({url: "https://yts.mx/api/v2/list_movies.json"}); 와 같이 원허눈 것을 지정하여 받을 수도 있다. note) settrigger 를 이용하여 trigger 를 강제로 변경 시켜, useEffect 를 실행하는 구조로 되어 있다.. 이전 1 2 3 4 ··· 8 다음
