게으른개발너D

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..

https://programmers.co.kr/learn/courses/13213/lessons/91086 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 유형 파악하기 문제 설명 중 핵심 부분은 배상 비용을 계산하는 부분이다. 배상 비용은 각 요소를 제곱하게 되므로 최대한 각 요소를 골고루 처리하는 것이 배상 비용을 가장 최소화 할 수 있는 방법이다. 그러기 위해서는 매 루프마다 가장 큰 작업을 찾아서 처리해야 한다. 이때 가장 큰 작업을 찾기 위한 방법은 3가지가 있다. 매 루프마다 Math.max 함수를 호출한다. 매 루프마다 정렬한다. Heap..

✨ Dead Zone ✨ var을 이용해서 이렇게 작성해 보자 console.log(myName); var myName = 'Hwayeon'; // undefined hoisting은 JS가 프로그램을 실행하기 전에 얘네들을 어딘가로 이동시킨다는 것이다. 무조건 위에서 아래로 이동하는 것이 아니라, 이런 것들을 가지고 가서 어딘가로 옮겨주는 것이다. hoisted의 뜻은 프로그램이 시작될 때 variable들이 미리 top으로 끌어올려지는 것이다. var myName; console.log(myName); myName = 'Hwayeon'; // undefined 이런 경우는 원래 에러를 내야한다. 만약 let으로 바꾼다면 console.log(myName); let myName = 'Hwayeon'; ..

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

모든 브라우저에서 스타일을 동일하게 적용할 수 있도록 reset.css를 가져온다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerweb.com 코드를 모두 복사하여 reset..

1. typescript https://www.typescriptlang.org/ JavaScript With Syntax For Types. TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code. www.typescriptlang.org typescript가 포함된 react 앱을 만들려면 npx create-react-app 앱이름 --template typescript ​ 또는 이미 react 프로젝트를 생성하였다면 npm insta..

꿀잼!!! 전공자든 비전공자든 가볍고 재미있게 읽을 수 있는 책! 거의 반틈까지 읽었는데 원래 알던 지식도, 몰랐던 지식도 매우 쉽고 재미있게 풀어놨다 ​ 컬러에 그림까지 있고 구어체도 되어있어서 개인적으로 읽기도 편함! ​ 완독까지 홧팅!!