오늘 만든 것
- 아날로그 시계
- 구글 인풋 기능
오늘 배운 것
- JS 이벤트 리스너의 'transitionstart' 이벤트
- JS의 Date 객체
- CSS의 transform-origin 속성
1. 'transitionstart' 이벤트
- 구글에서 '/' 키를 누르면 인풋에 포커스가 되는
기능을 따라 만들었는데
어제 드럼 키트를 만들며 사용했던 방법으로 만들었다
(들어가서 '/'를 눌러보자) - 인풋 태그인 요소를 찾는데, dataset 속성이 지금 누른 키의
code 값과 같은 요소를 찾아 다루는 방법이었다.
( '/' 키를 누르면 'Slash' 라는 값이 나온다 )
<input
class="search-input"
data-key="Slash"
type="text"
placeholder="영화 제목을 검색하세요.." />
<button class="search-icon">🧭</button>자그마한 문제
- '/' 버튼을 누르면 input에 focus가 되면서
'/' 가 인풋에 쓰여지는 문제가 있었다.
해결
- 찾아놨던 인풋 요소에 transition이 하나 걸려있었는데
어제 썼던transitionend 이벤트가 생각나서
transitionstart 이벤트에 반응하는 이벤트 리스너를 만들어
이벤트가 발생하면 인풋을 비워주도록 하였다.
<.js>
// 찾은 요소에 transition이 시작 될 때
slash.addEventListener('transitionstart', () => {
// 인풋 요소의 value를 비워준다.
slash.value = ''
})- 사실
'focus' 이벤트에 반응하도록 만들어도 되는 거였지만
어제 드럼 키트를 만들 때 사용한transitionend가 생각나서
transitionstart를 적용해봤다.
2. transform-origin
- transform-origin 속성은 rotate()를 적용할 때
중심축을 결정한다 - MDN: transform-origin 이곳에 들어가서
transform: rotate(30deg) 를 적용하며 예시를 보면 좋을 거 같다!
자그마한 문제
- 아날로그 시계를 만들 때 시/분/초침을 rotate 하는데
중심축이 각각의 요소 가운데에 있어서
바늘들이 제자리에서 각자 돌았다.
해결
transform-origin속성을 적용하여
rotate()의 회전축을 각각의 요소 끝으로 중심축을 옮겼다.
-
적용 전
-
적용 후
3. Date 객체
- Date 객체는 시간, 초, 분, 날짜 등을 활용하는 때에 사용한다.
- 사용법은 아래와 같다
const time = new Date() // 객체 생성
const seconds = time.getSeconds() // 현재 시간의 초 get
const minutes = time.getMinutes(); // 현재 시간의 분 get
const hours = time.getHours(); // 현재 시간의 시간 get-
Date 객체를 통해 시간에 따른 바늘의 각도를 구하여
rotate()에 적용했다. -
Date 객체에는 시, 분, 초 말고도
다양한 것들(년도, 월, 일 등)이 있으니
MDN 공식 문서를 읽어보면 좋을 거 같다.
MDN: Date 객체
느낀점
- 코드를 짜다보면 많은 문제들이 생기는데,
문제를 해결할 수 있는 방법은 정말정말 다양하다.
꾸준하게 문제들을 마주하고 해결하며 지식의 폭이 넒어진다면
문제를 다루는 방식의 폭이 넓어질 것이고,
때에 따라 가장 적합한 방법으로 해결할 수 있을 것 같다.
