게으른개발너D

2023.11.04 - [프로젝트/Side Project] - [React] Handsontable 1 - 설치 및 데이터 추가 [React] Handsontable 1 - 설치 및 데이터 추가 Handsontable을 이용하여 간단한 기능을 구현하려다 의외로 개고생을 하여 기록한다. https://handsontable.com/docs/react-data-grid/ React Data Grid - Documentation | Handsontable Handsontable documentation What is Handsontable? Hand lazyhysong.tistory.com 2023.11.05 - [프로젝트/Side Project] - [React] Handsontable 2 - headers..

2023.11.04 - [프로젝트/Side Project] - [React] Handsontable 1 - 설치 및 데이터 추가 [React] Handsontable을 이용한 스프레드시트 구현 Handsontable을 이용하여 간단한 기능을 구현하려다 의외로 개고생을 하여 기록한다. https://handsontable.com/docs/react-data-grid/ React Data Grid - Documentation | Handsontable Handsontable documentation What is Handsontable? Hand lazyhysong.tistory.com 이전 글에서 기본적으로 구현한 스프레드시트이다. 이제부터 시작이다. ㅠㅠ 무언가를 구현할 때마다 고민거리가 생겼는데 그것들..

Handsontable을 이용하여 간단한 기능을 구현하려다 의외로 개고생을 하여 기록한다. https://handsontable.com/docs/react-data-grid/ React Data Grid - Documentation | Handsontable Handsontable documentation What is Handsontable? Handsontable (pronounced "hands-on-table") is a JavaScript data grid component that brings the well-known look and feel of spreadsheets to your application. Thousands of business apps depend on Handsontab..

App.js (유효성 검사 실행을 불러올 컴포넌트) 유효성 검사를 실행할 email과 password input form을 불러온다. form을 submit 할 버튼에 addEventListener로 유효성 검사를 실행할 VerifyForms class의 instance를 만든다. import VerifyForms from 'VerifyForms.js'; class App { constructor({ $target }) { this.$target = $target; this.$email = document.querySelector("#email"); this.$password = document.querySelector("#password"); this.$btn = document.querySelecto..

우뤼 컴퓨러 시스템에 밑바닥부터 타입스크립트 프로젝트를 설정해 보겠다! TS 프로젝트가 무엇인지, 설정은 어디에 작성해야하고, 어떤 것을 설정할 수 있는지 알아보쟝 But 지금부터 할 것이 알아두어야할 것이긴 하지만 그렇게 자주 사용하게 되진 않을 것이다. 왜냐면 NestJS, NextJS, CRA를 사용하면 요 라이브러리, 패키지들이 자동으로 TS 프로젝트를 만들어주기 때문에 우리가 수동으로 TS 프로젝트를 설정할 일이 거의 없기 때문이다. WebPack을 쓰는 것과 비슷하게 아주 가끔씩 우리가 직접 설정해줘야하는 일이 생길 수도 있다. 일단 typechain 이라는 폴더를 만들어서 vscode로 열어보쟝! 여기서 새 nodeJs 프로젝트를 만들자 npm init -y package.json 파일이 생..

1. style setting 시계 첫 setting은 이러하다 시침, 분침, 초침은 각각 hour-hand, min-hand, second-hand라는 class name을 가지고 있다. .hand { width: 50%; height: 5px; background: black; position: absolute; top: 50%; } 해당 hand들의 css 코드는 이렇게 되어 있다. default 세팅을 하기 위해 transform: rotate(90deg)를 추가해보면 시계의 왼쪽부분에서 해당 hand들이 돌아가 있을 것이다. 우리가 원하는 것은 큰원(시계)의 중간에 초첨을 맞춘 후 돌아가는 것이므로 transform-origin: 100%를 추가해 준다. 시계의 움직임과 살짝 튕기는 애니매이션도..

키보드로 두드렸을 때 화면에 나타낼 자판 모양 box와 키 값에 맞는 소리를 낼 수 있도록 audio를 작성한다. A clap S hihat D kick F openhat G boom H ride J snare K tom L tink key box에 해당되는 소리를 가진 audio는 같은 data-key 값을 가지고 있다. https://www.toptal.com/developers/keycode JavaScript Key Code Event Tool | Toptal® KeyCode.Info allows users to press any key and instantly get the JavaScript Key or Key Code KeyboardEvent. Check out the Tool and Eve..

Canvas Events 캔버스에 발생하는 이벤트를 세팅해 주려고 한다. ​ 1. mousemove 캔버스 안에서 마우스를 움직였을 때 스크립트에서 감지를 해야 한다. 먼저 캔버스를 불러오자. const canvas = document.getElementById("jsCanvas"); function onMouseMove(event) { console.log(event); } if(canvas) { canvas.addEventListener("mousemove", onMouseMove); } 캔버스 안에서 마우스를 움직였을 때 onMouseMove라는 함수가 작동하게 만들었다. console에서 해당 이벤트를 들여다보면 이렇게 나온다. 마우스를 캔버스 바깥에서 움직이면 아무것도 찍히지 않지만 캔버스 안에..