Day7은 Day4와 같이 강사님이 주석 처리 해주신 코드의 설명대로 코드를 짜는 수업이었다. 이 주석들은 많이 쓰이는 배열의 메소드들을 활용하기 위한 것들이다. 배운 것 1. 메소드 Array.prototype.some() Array.prototype.every() Array.prototype.find() Array.prototype.findIndex() 느낀 점 평소 위의 4가지 메소드는 자주 마주치지만 스스로 코드를 작성하려고 하면 어려움을 느끼는 메소드들이었는데, 이번 수업을 통해 배열의 메소드들을 많이 연습할 수 있는 시간이었다.

이번 프로젝트는 flexbox를 이용해 Flex Panesl Image Gallery를 만드는 프로젝트이다. 배운 것 1. Element.classList.toggle(String) 클래스 값 토글 클래스가 존재하면 제거하고 fals를 반환하고, 클래스가 존재하지 않으면 추가하고 true를 반환해준다. 2. Array.prototype.forEach() forEach() 메서드는 각 배열 요소에 대해 제공된 함수를 한 번씩 실행한다. 느낀 점 이번 프로젝트는 쉬워보였는데 너무 어려웠다. 프로젝트들을 진행해 나갈 수록 나의 빈 부분이 보이는 것 같다. js문법에 대해 어려움을 느끼고 있는데, 나에게 이 프로젝트는 js 문법을 배우는 것이 아니라 js문법을 응용한다는 느낌이 든다. js 문법을 어떻게 공부할..

Day4는 강사님이 주석 처리 해주신 코드의 설명대로 코드를 짜는 수업이었다. 이 주석들은 많이 쓰이는 배열의 메소드들을 활용하기 위한 것들이다. 배운 것 1. console.table() 나는 결과를 출력할 때에 console.log만 사용했었는데, 이번에 console.table에 대해 처음 알게 되었다. const oldest = inventors.sort(function (a, b) { const lastInventor = a.passed - a.year; const nextInventor = b.passed - b.year; return lastInventor > nextInventor ? -1 : 1; }); console.log('oldest', oldest); console.table(ol..

배운 점 1. css 변수 지정하기 :root { --base: #ffc600; --spacing: 10px; --blur: 10px; }] :root 클래스는 전체 문서에서 액세스하고 사용할 수 있는 전역 CSS 변수를 정의하는 데 사용된다. 위의 코드처럼 선언을 하고 아래의 코드와 같이 var()함수를 사용하여 접근하면 된다. img { padding: var(--spacing); background: var(--base); filter: blur(var(--blur)); } padding: var(--spacing);: 변수의 값을 이용하여 이미지의 패딩을 설정한다 --spacing. background: var(--base);: 변수의 값을 이용하여 이미지의 배경색을 설정한다 --base. fil..

[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의 미디어 요소(비디오나 오디..