전체 글82 1. Diary Input, Block 일기장 작성 컴포넌트, 일기장 블럭 컴포넌트 구현 -스프레드 연산자(...)로 state 객체 나열 -저장 버튼을 누르면 작성한 일기장 객체 형태로 출력 component -Input.JSX -Button.JSX -Textarea.JSX -DiaryWrite.JSX -DiaryBlock.JSX css -Diary.css component - import React from 'react' function Input({className, type, name, value, onChange}) { return ( ) } export default Input component - import React from 'react' function Textarea({className, name, value, onChan.. 2024. 1. 28. 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. 3. Time Input ※Input 컴포넌트 추가 ※Start, Time out 화면 나타내기 ※분/초 입력해서 타이머 실행 ※최대 입력 숫자 59로 지정 component -Button.jsx -Input.jsx page -Timer.jsx css -Timer.css component - import React from 'react' function Input({className, type, value, onChange, placeholder}) { return ( ) } export default Input page - import React, {useCallback, useEffect, useState} from 'react' import '../css/Timer.css' import Button from '../comp.. 2024. 1. 26. 2. padStart, setTimeout ※00 : 00(분 : 초) 형식으로 업그레이드 -padStart 함수로 1 => 01 형식으로 변환 -setTimeout 함수로 함수 실행 잠시 지연 -타이머 리셋해서 다시 작동 component -Button.jsx page -Timer.jsx page - import React, {useCallback, useEffect, useState} from 'react' import Button from '../component/Button' function Timer() { const [timeOut, setTimeOut] = useState(true) const [second, setSecond] = useState(10) const [minuts, setMinuts] = useState(2) cons.. 2024. 1. 26. 1. Basic Timer ※타이머 기능 구현 -Button 컴포넌트 추가 -Timer 페이지 추가 component -Button.jsx page -Timer.jsx component - import React from 'react' function Button({type, className, name, onClick}) { return ( {name} ) } export default Button page - import React, {useEffect, useState} from 'react' import Button from '../component/Button' function Timer() { const [timer, setTimer] = useState(10) //주어진 시간 10초로 지정 const [timeOut,.. 2024. 1. 25. 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. 3. Getting Username ※username 값을 받아 브라우저에 표시 -로그인 상태 여부 확인 -로그아웃 버튼 추가 -삼항 연산자를 이용해서 true(로그인) false(로그아웃)마다 브라우저에 표시되는 div 분리 componenet -Input.JSX -Button.JSX module -Login.JSX css -List.css module - Login.JSX import React, {useState} from 'react' import '../css/List.css' import Input from '../component/Input' import Button from '../component/Button' function Login() { const [loginValue, setLoginValue] = useState.. 2024. 1. 24. 이전 1 ··· 7 8 9 10 11 다음
