[index.js] const secondHand = document.querySelector('.clock-second'); const minsHand = document.querySelector('.clock-minute'); const hourHand = document.querySelector('.clock-hour'); function setDate() { const now = new Date(); const seconds = now.getSeconds(); const secondsDegrees = (seconds / 60) * 360 + 90; secondHand.style.transform = `rotate(${secondsDegrees}deg)`; const mins = now.getMin..

배운 점 1. return문의 활용 if (!audio) return; return문을 사용하여 지정된 키 외의 다른 키는 무시되도록 하였다. 이를 통해 굳이 아무 요소도 담기지 않은 null값의 audio 변수를 갖고 코드를 더이상 진행하지 않도록 했고, 에러도 방지했다. 2. currentTime 프로퍼티 audio.currentTime = 0; 눌린 키보드 키에 연결된 드럼 소리는 잘 나왔으나, 키를 연속으로 누를 때 해당하는 소리는 연속으로 나오지 않는 문제가 있다. 그 이유는 연결된 드럼 소리 오디오 파일이 끝까지 재생되어야만 다시 소리가 나올 수 있었기 때문이다. 이 문제를 해결하기 위해 currentTime 프로퍼티를 사용해주었다. currentTime은 HTML의 미디어 요소(비디오나 오디..

리액트로 프로젝트를 만들며 최근 느낀 점은 제가 기초가 많이 부족하다는 것입니다. 저는 기초가 탄탄한 개발자가 되고 싶기에 어떤 것을 공부하고 어떠한 방법으로 할 지에 대해 고민했습니다. 그 결과 바닐라 자바스크립트를 공부하기 위한 방법으로 토이프로젝트를 개발하면서 바닐라 자바스크립트의 사용에 익숙해지려고 합니다. 토이 프로젝트 아이디어를 찾아보던 중 찾게 된 것이 바로 다음의 챌린지입니다. 이 챌린지는 30일간 프레임워크, 라이브러리 등 없이 순수 자바스크립트로 프로젝트를 완성시키는 챌린지입니다. 제가 이 챌린지를 선택한 이유는 다양한 주제의 프로젝트들이 나와있어 기획에 있어서 부담을 줄일 수 있다고 생각했기 때문입니다. 또한 강의 제작자의 깃허브에 코드가 공유되어있고, 짧은 강의도 올라와 있기 때문에..

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/trim String.prototype.trim() - JavaScript | MDN trim() 메서드는 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환합니다. 여기서 말하는 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 developer.mozilla.org trIm() 메서드는 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환합니다. 여기서 말하는 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등..

https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault Event.preventDefault() - Web API | MDN Event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다. developer.mozilla.org event.preventdefault()란? event.preventdefault()는 Event 인터페이스에서 제공하는 메서드로 html에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드입니다 예를 들어 태그는 각각 페이지 이동이나 form 데이터 전송 등의 기본 이벤트들이 있는데e..

화살표 함수를 사용할 때 문법을 간소화하는 것이 필요하다 가장 중요한 것은 대안책을 알아야 하는 것인데, 1) 매개 변수 괄호 생략 만약 화살표 함수가 한 개의 파라미터만 가지고 있다면 괄호를 생략할 수 있다 Instead of (userName) => { ... } you could write userName => { ... } Please note) 만약 함수에 파라미터가 없을 경우 괄호는 생략되면 안된다. () => { ... } 사용 만약 함수가 한 개 이상의 파라미터를 가질 경우 괄호는 생략되면 안된다. userName, userAge => { ...} 대신에 (userName, userAge) => { ... }를 사용해야 된다. 2) 함수 본문에 중괄호 생략 만약 화살표 함수가 아무 문법이 ..