2020/07/23 - [웹돌이 단편선] - [웹으로 낙서하기#1]자바스크립트를 사용해서 웹 브라우저에 디지털 시계를 올려놔보자! 2020/07/27 - [웹돌이 단편선] - [웹으로 낙서하기#2]디지털 시계의 시간을 흐르게 해보자! 이전 글에서는 디지털 시계를 만들고, 시간을 흐르게 해봤다. 이번 시간에는 디지털 시계의 외형과, 저번 글의 재귀호출에 영감을 받아, 스탑워치를 만들어보겠다. 스탑워치는 시간이 휙휙 빠르게 올라가는 모습이 상징적이라고 할수 있다. 이부분을 window.requestAnimationFrame을 사용하여 구현해보겠다. 1차적 구현 import React, { useState, useCallback, useEffect, useRef } from "react"; function S..

2020/07/23 - [웹돌이 단편선] - [웹으로 낙서하기#1]자바스크립트를 사용해서 웹 브라우저에 디지털 시계를 올려놔보자! [웹으로 낙서하기#1]자바스크립트를 사용해서 웹 브라우저에 디지털 시계를 올려놔보자! 웹으로 낙서하기 시리즈를 여는 글로써, 자바스크립트를 사용해 디지털 시계를 만들어보겠습니다. 필요한 기능 현재 시간을 HH:mm:ss 포맷으로 보여준다. 디지털 시계다. 1초마다 초가 흐른다. 필� exilee20c.tistory.com 이전 글에서는 디지털 시계 외형을 만들어봤다. 이번 글에서는 시계답게 1초마다 시간이 흐르는 것을 보여주는 간단한 코딩을 하겠다. 이전 글의 DigitalClock 컴포넌트로부터 시작한다. 시계는 그 자체로 시간의 흐름을 갖고 있기 때문에 스스로 state를..

웹으로 낙서하기 시리즈를 여는 글로써, 자바스크립트를 사용해 디지털 시계를 만들어보겠습니다. 필요한 기능 현재 시간을 HH:mm:ss 포맷으로 보여준다. 디지털 시계다. 1초마다 초가 흐른다. 필요한 기능은 이정도만 있으면 될것 같으니 바로 작업을 시작하면 될것같다. 첫 시작 먼저 현재시간을 보여준다. import React from "react"; function DigitalClock() { return {new Date().toString()}; } export default DigitalClock; 이제 시계에 보여주고 싶은 HH:mm:ss에 대한 값만 추려서 화면에 뿌려주면 된다. HH, mm, ss를 가져오는 메소드는 각각 아래와 같다. HH - Date.prototype.getHours mm..

VSCode 스니펫 기능 써보기 리액트 개발을 하면서 반복적이고 기계적으로 작성해야하는 코드들을 vscode 스니펫 기능을 사용하여 최대한으로 줄이는데 도움이 되고자 제가 쓰는 설정 몇가지를 공유합니다. 우선 아토믹 디자인 패턴을 사용하여 라는 원자 컴포넌트를 만들었다고 했을때의 파일구조는 대략 아래와 같을겁니다. 그리고 각각의 파일들의 내용은 이정도로만 작성해봤습니다. index.js export { default, default as Digit } from "./Digit"; Digit.js import React from "react"; import PropTypes from "prop-types"; import c from "./Digit.module.scss"; function Digit({ v..