노마드코더15 7. 위도, 경도 불러오기 ※ 현재 위치의 위도와 경도를 가져옴, Weather 모듈 추가 -navigator.geolocation.getCurrentPosition 함수로 사용자의 현재 위치를 요청 componenet -Input.jsx -Button.jsx module -Login.jsx -Clock.jsx -Weather.jsx page -ChromeApp.jsx css -List.css img -1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg module - : 사용자의 현재 위치를 요청 import React, {useEffect} from 'react' function Weather() { const getLocation = position => { const lat = position.coords.lati.. 2024. 2. 1. 6. Background Image ※배경화면 랜덤으로 나타내기, ChromeApp.jsx 추가 - Math.floor(반올림), Math.random(랜덤 숫자)로 새로고침마다 랜덤 이미지 출력 componenet -Input.jsx -Button.jsx module -Login.jsx -Clock.jsx page -ChromeApp.jsx css -List.css img -1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg page - : Math.floor(반올림), Math.random(랜덤 숫자)로 랜덤 이미지 출력 import React from 'react' import '../css/List.css' import Image1 from '../img/1.jpg' import Image2 from '../img/2.jp.. 2024. 1. 27. 5. Clock ※시계 기능을 구현, Clock. 모듈 추가 -new Date()로 현재 시각 지정 -setInterval 함수로 매 1초 간격으로 시간 갱신 -clearInterval 함수로 매초 재렌더링하여 성능저하 방지 componenet -Input.jsx -Button.jsx module -Login.jsx -Clock.jsx css -List.css module - : setInterval(매 초마다 반복), clearInterval(반복 정지) import React, {useEffect, useState} from 'react' function Clock() { const [clock, setClock] = useState(new Date()) //현재 시각 지정 const renewTime = () =>.. 2024. 1. 25. 4. LocalStorage Username ※localStorage로 username 저장(setItem), 삭제(removeItem), 불러오기(getItem) ※useEffect로 브라우저 렌더링 시, localStorage 값 저장 유무에 따라 로그인 상태 유지 componenet -Input.jsx -Button.jsx module -Login.JSX css -List.css module - import React, {useEffect, useState} from 'react' import '../css/List.css' import Input from '../component/Input' import Button from '../component/Button' function Login() { const checkUsername = lo.. 2024. 1. 24. 이전 1 2 3 4 다음
