반응형 Dev. Yelee ˗ˋˏϟˎˊ˗99 [JavaScript30/Day-2] JS and CSS Clock HOW? 1. 시침, 분침, 초침 element 받아오기 2. 현재 시간, 분, 초 받아오기 3. 2를 1초에 한 번씩 update 4. update 할 때마다 1번에서 받아온 각 element를 update Solution TIL (Today I Llearned🎉) CSS에서 transform-origin 속성 transform-origin : 100%를 사용하면 중심축이 우하단으로 변경되고 이를 기점으로 rotate 된다 transform-origin : 50% 50% 이면 중심축이 element의 중심부를 기점으로 rotate CSS에서 transform : rotate(${각도}deg); 2021. 7. 15. [타입스크립트/TypeScript] 타입스크립트의 OOP (객체지향 프로그래밍) 📍 객체지향이란? 객체(Object)는 변수와 메서드를 그룹핑한 것이다. 객제지향 프로그래밍은 서로 관련 있는 데이터와 함수를 객체로 정의해서 서로 상호작용할 수 있도록 프로그래밍하는 것이다. 절자치향 프로그래밍의 경우 데이터를 받아오고 처리하는 방법으로 프로그래밍되었다면 객제지향의 경우 프로그램을 '객체' 단위로 나누어 정의하고 각 객체들 간의 상호작용을 통해 프로그래밍을 해나간다. 레고 부품(=객체)을 조립하여 레고 완성품(=프로그램)을 만드는 것이라 생각하면 되겠다! 👍🏻 객체 지향의 장점 객체지향 프로그래밍은 코드 재사용을 통해 생산성을 높이고, 유지보수에 용이하다는 장점이 있다. 레고로 예를 들자면 똑같은 바퀴가 4개인 자동차를 만든다고 가정할 때, 차 본체에 맞는 타이어 하나를 고르면 나머지 .. 2021. 7. 15. [JavaScript30/Day-1] Drum Kit How? 특정 키를 누르면 해당 키값을 attribute로 가지는 오디오가 재생된다 Solution document.addEventListener('keydown', (e)=>{ let audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); let key = document.querySelector(`div[data-key="${e.keyCode}"]`); if(!audio) return; audio.currentTime = 0; // 메모! audio.play(); key.classList.add('playing'); }) function removeTransition(e){ if (e.propertyName !== 'transform') .. 2021. 7. 14. [타입스크립트/TypeScript] 타입스크립트의 타입 ~ ~ ~ 타입스크립트를 사용하는 이유를 꼽으라면 타입/객체지향 정도로 꼽을 수 있겠다 타입스크립트는 자바스크립트와 달리 정적 타입의 언어이다. 변수의 타입을 설정할 수 있기에 개발자 입장에서 예기치 못한 에러를 미리 파악할 수 있는 큰 장점이 있다 예를 들어 자바스크립트의 경우 아래의 코드처럼 하나의 변수에 number, string, object 등 타입에 상관없이 값을 할당할 수 있다 let text = 2; text = 'hi!' text = { key : value }; 그러나 타입스크립트의 경우 타입을 설정할 수 있기에 안정적인 프로그래밍을 할 수 있다! 타입스크립트에서 타입을 알아보자 1. number // number const num: number = 1; 2. string // string con.. 2021. 7. 13. 이전 1 ··· 18 19 20 21 22 23 24 25 다음 반응형