본문 바로가기

분류 전체보기82

COMPLETE TIMER 타이머 기능 최종 완성본 component -Button.jsx -Input.jsx page -Timer.jsx css -Timer.css App.js component - import React from 'react' function Input({className, type, value, onChange, placeholder}) { return ( ) } export default Input component - import React from 'react' function Button({type, className, name, onClick}) { return ( {name} ) } export default Button page - import React, {useCallback, useEffec.. 2024. 2. 7.
4. HOUR, STOP/RESTART, RESET ※시 추가 ※타이머 정지/재시작 추가 ※리셋 기능 추가 component -Button.jsx -Input.jsx page -Timer.jsx css -Timer.css page - Timer.jsx import React, {useCallback, useEffect, useState} from 'react' import '../css/Timer.css' import Input from '../component/Input' import Button from '../component/Button' function Timer() { const MAX_TIME = 59 const [timeOut, setTimeOut] = useState(true) const [startView, setStartView] = .. 2024. 2. 7.
CHROME APP componenet -Input.jsx -Button.jsx -Checkbox.jsx module -Login.jsx -Clock.jsx -Weather.jsx -ToDoList.jsx page -ChromeApp.jsx css -List.css img -1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg App.js component - import React from 'react' function Input({className, type, name, value, onChange, maxLength, placeholder, checked}) { return ( ) } export default Input component - import React from 'react' function But.. 2024. 2. 5.
11. 시간에 따른 Title ※시간에 따라 사용자에게 Title로 인사 하기 componenet -Input.jsx -Button.jsx -Checkbox.jsx module -Login.jsx -Clock.jsx -Weather.jsx -ToDoList.jsx page -ChromeApp.jsx css -List.css img -1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg module - import React, {useEffect, useState} from 'react' import '../css/List.css' import Input from '../component/Input' import Button from '../component/Button' function Login() { const checkU.. 2024. 2. 4.

티스토리툴바