- 라이브러리 설치
npm install
- 실행
npm start
- 첫 번째 빈칸 오픈 시 지뢰가 터지지 않음
- 게임 타이머 (우측)
- 남은 지뢰 갯수 (좌측)
- 우클릭 시 깃발 기능
- 난이도 변경 기능
- 난이도 시 난이도 정보 저장 (마지막에 사용한 난이도 유지)
-
import { useState, useEffect } from "react"; const StopWatch = () => { const [time, setTime] = useState(0); const [isRunning, setIsRunning] = useState(false); useEffect(() => { let interval: NodeJS.Timer | undefined; if (isRunning) { interval = setInterval(() => { setTime((prevTime) => prevTime + 10); }, 10); } else { clearInterval(interval); } return () => clearInterval(interval); }, [isRunning]); return ( <div> <time> {`0${Math.floor((time / 60000) % 60)}`.slice(-2)} :{" "} {`0${Math.floor((time / 1000) % 60)}`.slice(-2)} </time> <div> <button type="button" onClick={() => setIsRunning(true)}> Start </button> <button type="button" onClick={() => setIsRunning(false)}> Stop </button> <button type="button" onClick={() => setTime(0)}> Reset </button> </div> </div> ); }; export default StopWatch;
-
.container { display: grid; grid-template-rows: 1행크기 2행크기 ...; grid-template-rows: [선이름] 1행크기 [선이름] 2행크기 [선이름] ...; }
-
import React from "react"; import ReactDOM from "react-dom"; import Modal from "react-modal"; const customStyles = { content: { top: "50%", left: "50%", right: "auto", bottom: "auto", marginRight: "-50%", transform: "translate(-50%, -50%)", }, }; // Make sure to bind modal to your appElement (https://reactcommunity.org/react-modal/accessibility/) Modal.setAppElement("#yourAppElement"); function App() { let subtitle; const [modalIsOpen, setIsOpen] = React.useState(false); function openModal() { setIsOpen(true); } function afterOpenModal() { // references are now sync'd and can be accessed. subtitle.style.color = "#f00"; } function closeModal() { setIsOpen(false); } return ( <div> <button onClick={openModal}>Open Modal</button> <Modal isOpen={modalIsOpen} onAfterOpen={afterOpenModal} onRequestClose={closeModal} style={customStyles} contentLabel="Example Modal" > <h2 ref={(_subtitle) => (subtitle = _subtitle)}>Hello</h2> <button onClick={closeModal}>close</button> <div>I am a modal</div> <form> <input /> <button>tab navigation</button> <button>stays</button> <button>inside</button> <button>the modal</button> </form> </Modal> </div> ); } ReactDOM.render(<App />, appElement);
-
onContextMenu={props.onClickOpenDeleteModal}
-
[js] 문자열 앞 혹은 뒤에 자리수만큼 특정 문자(0, 공백) 채우기
var num = 123; console.log(String(num).padStart(5, "0")); // '00123' var text = "abc"; console.log(text.padStart(5, " ")); // ' abc'