react-compound-timer 라이브러리를 사용하여 타이머를 만들어보았다. https://www.npmjs.com/package/react-compound-timer react-compound-timer Timer compound react component www.npmjs.com 코드에 관한 설명은 위 링크 내용을 참고해주세요 import React from 'react' import Timer from 'react-compound-timer/build'; export default function SetTimer() { const Hours = Timer.Hours const Minutes = Timer.Minutes const Seconds = Timer.Seconds console.dir..

오류 import React, { useState } from 'react' export default function App() { const [timer, setTimer] = useState('0'); const currentTimer = () => { const date = new Date(); const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); const seconds = String(date.getSeconds()).padStart(2, "0"); return (`${hours}:${minutes}:${seconds}`) } const cu..

Spread . . . 으로 나타낸다. Array, Object들 안에 있는 요소(element)를 개별적으로 뽑아낼 수 있다. 뽑아낸 요소들로 새로운 Array, Object 만들기가 용이하다. Spread는 변수를 가져가서 풀어 헤친다(Unpack) [Array] const number = [1, 2, 3] //배열을 풀어 헤쳐서 개별 값들을 출력해줌 console.log(...number) //1 2 3 console.log(number) //[1, 2, 3] const english = ['a', 'b'] //새 배열로 만들어 사용하기 편함 const newArr = [...number, ...english] console.log(newArr) //[1, 2, 3, 'a', 'b'] [Object..

프로미스(promise)를 이해하기 위해서는 JavaScript가 어떤 식으로 작동하는지 알아야 한다. 싱글 쓰레드 언어인 JavaScript는 비동기 처리를 위해서 콜백(Call Back)을 이용해 이를 보완하였다. 하지만 Call Back이 중첩되면서 코드의 복잡도가 증가하고, 예외처리에 어려움이 생기기 시작했다. 이러한 점을 보안하기 위해 프로미스(promise)가 만들어졌다. 비동기 처리 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행함. 비동기 처리 예 - setTimeout() // 1 console.log("First"); // 2 setTimeout(() => { console.log("Second") }, 3000) // 3 console.log("Third") 위..

Destructuring 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. [MDN] 객체나 배열에서 필요한 값을 개별 변수에 저장하는 것 객체 디스트럭처링 (Object destructuring) const settings = { notifications: { follow: true }, color: { theme: "yello" }, }; // 프로퍼티 key값을 기준으로 Destructuring되어 할당된다. const { notifications: { follow }, color} = settings; console.log(follow, color); // true { theme: 'yello' } 예시 //선언 co..

절대 경로 설정 방법 프로젝트 최상위 폴더(root)에 jsconfig.json 파일을 추가한 뒤 아래 코드 입력 { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } 경로 (Path) 문서, 파일, 그림 등의 위치 예) C:\Users\Someone\Desktop\Example 상대 경로 (Relative Path) 현재 위치를 기준으로 나타냄 상위 폴더, 하위 폴더, 현재 폴더 (동일한 Level)를 연결함 예) 상위 폴더 : ../디렉토리명/파일명 하위 폴더 : ./디렉토리명/파일명 현재 폴더 : ./파일명 import Home from '../routes/Home'; 절대 경로 (Absolute Path) 루트(root) 디렉토리를 ..