개발괭발메모장

🥺 오늘도 영어네. (한국어일리가 없지)

아무튼 컬러픽커나 여러가지 사진에 대해 CSS 등을 조정하는, (블러 등) 이런걸

요번에 자바스크립트로 업데이트 해볼것이다.

스타일부터 선언하는데 가상 선택자라고 :루트에다가 :root 라고 먹였다.🔥

blog.thereis.xyz/136

그담에 대쉬대쉬가 뭐냐고?

developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

CSS에서 쓸 변수요.

var(--변수명); 써서 잘 만들고, 동작하나 확인하자. 마지막으로 필터까지 먹이면 완성~
아. 클래스 h1 ... JS 글자까지 먹이기 ^^

CSS 변수를 업데이트 해보자꾸나.

도쿠먼트 쿼리설랙트 올~ (.countrols input)~ 😓
... 해서 각 컨트롤러의 값을 받자. 이것은 유사 배열 객체요. 상속받은 메서드들이 참 많다.
핸들 업데이트를 하나 만들고, 반복을 돌며 변경되는경우, 핸들을 건드리면 이벤트를 받는 콘솔을 찍어보자.
드래그 해도 체인지 하고 싶으면 마우스무브로 바꿔라. 난리난다.

😭 아무쪼록, 근데 이 CSS와 input을 바인딩해서 연결을 해야할 것 같은데 어떻게하느냐가 중요하니까
dataset을 통해서 돔에 data-어쩌구저쩌구로 하면 에 저장해둘 수 있는 공간이 생긴다.

... 아 똥같네... 예제가 ㅠㅠ 아무쪼록, suffix 를 하나 만들어서 사이즈를 받아보자. 없으면 || '' ; 해서 초기화 하는걸로

아무튼 사이즈를 다 가져오고 아닌경우 안받아오니 좋은 예제이다.

가지고온 네임을 이용해서 document 의 set property를 위에서 만든 변수명으로 지정한다.
이런식으로 바뀌는 변수명을 업데이트 할 수 있다.

끝.

자. 2일분량 회차다.🙂 아무쪼록, 잘해보자.

구현내용은 여기 있으니까, 영상 안보고 만들면 된다.

3개의 핸들이 겹쳐있다. 뭘 하면 돌릴 수 있을까? 트랜스폼 rotate이다. 그리고 이 회전 힌지? (접히는 부분 돌리는 포인트를 끝쪽으로 밀어서 중심이 되어 돌아가게 조절하는게

transform-origin: 100%;

핸들이 어떻게 만들어지는지 동작에 대한 부분을 검토.🔥 트랜스폼과 트랜지션으로 해결본다. 

째각째각도 아래 코드로 만들기. 나는 이렇게 했다.

      transition-timing-function: cubic-bezier(0.4, 0, 0.38, 1.84);

그 후 1000ms 마다 setInteval로  1초마다 현재 초를 구분하고, 초마다 넘어가는 각도도 Dedgree로 정하고.

초단위 앵글단위로 잘 넘어가나 봤으면

분단위 , 시단위 아무거나 골라서 초단위로 움직이는지 테스트 완료하고.

각 남은 핸들(초, 분 시)에 대한 핸들링을 먹인 후, 동작하는지 확인하고, (여기까지하면 반복코드가 보인다.)

길이조정 정도 남았고, 코드정리가 남았네. (안하네?)

아니네, 시간이 넘어갈 때 90도에서 0도로 넘어갈 때 나는 너무 순간적으로 튕기니까
트랜지션 타이밍 함수를 좀 변경해야할 것 같다.

코드정리 부분은 반복되는 부분을 함수로 묶어 빼는것이 좋다.

끝

첫시간이니 좀 상세하게.

오, 이곳 JS30이라는 곳은 🙂 30개의 예제를 통해서, 프레임워크 없이, 라이브러리 없이, 바닐라로만 사랑스럽게 따라해 볼 수 있는 강좌를 주는 사이트이다. 쉽다. 쉬워! 
무료니까, 이메일로 코스 등록하고, 스타트파일 받아서 영상 보면서 따라하면 됨.
순서없이 재밌어 보이는 것 대로 할 예정. 그래도 일단은 드럼은 해보려고 함.
아참... 영어다. 등록후엔 오른쪽위에 my account 들어가서 wesbos.com 에 코스진행하면 된다.
들어가면 스타터파일이랑, 슬랙빼고 ㅠㅠ 코스 들으면 된다.

자바스크립트 드럼 킷

최종목표 : 키보드를 누르면 소리내고, 키를 누른 효과를 내는 드럼을 만들자.

과정 : 첫 시간이니 좀 상세하게 적어야지.

git clone 해서 로컬저장소에 개발에 필요한 자료들을 받자. 드럼킷이니 소리가 나야한다.

일단 아저씨가 말하는걸 들어보면 키보드로 드럼을 만드는건데, 키보드 이벤트가 필요할 것이다. css랑 html은 준비를 해 줄 것 같고 폴더나 한번 열어봐야징.

아저씨가 말하기를 🙂 데이터 키에다가 키를 누르면 클래스에다 플래잉을 걸면 CSS로 눌려진 효과를 뽱하고 낸다.

일단, 키코드랑 클래스랑 소리만 맞으면 되겠네.

keycode.info 에서 키보드와 아스키 키코드에 대한 정보를 획득하는 샘플을 보여준다. 어 일단, index-Finished 는 해답이니까 제껴놓고😓

Index-start 화면을 열어보고.... 손델게 좀 있어보인다. 

3분 54초 부터 같이 생각하면서 스크립트 좀 짜보자고 이야기를 한다.

스크립트에 키다운 이벤트를 핸들러로 전역에 등록하고 이벤트 핸들러 리쓰너로 들어올 function을 정의한다. e는 이벤트의 약자

4:39초까지. 그리고 테스트해봄 ... 한글인 경우 한글들어온다 ㅠㅠㅠ 그래도 키코드는 같다.

function(e) {
  console.log(e.keyCode);
}

각각 키에 대한 오디오를 받아야 하니, 데이터key랑 연결을 해주고, 쿼리셀렉터를 통해 해당 오디오의 주소와 data-key와 바인딩을 시킨다.

data- 부분은 원하는 데이터를 html에 저장할 때 적당하다. 백틱을 이용해서 셀랙터의 해당 오디오 엘리먼트를 로드하고

src 부분에 있는 주소를 추출해서 실행하는 구조.

오디오가 없으면 빠르게 얼리리턴 해버리고, 🙂 소리도 기존 소리가 끝나고 재생되는걸 처리하기 위해
이벤트 들어오자 마자 소리도 빠릿하게 실행하도록 변경

키이벤트 효과처리 .key class 친구들을 선택해서 key로 만들고, 요거 효과내기위해 위해서 CSS도 살짝 수정하고, 이벤트 리스너로 클래스 추가.

키 누른후 전체 다 키를 축소하기위해 모든 키를 선택해 전역에 keys로 복수형이지 🥺 쿼리셀렉트all🔥로 가져온다.

(제이쿼리 비교도 해주네)

일단은 전체 선택한 키를 애로우 펑션으로 짧게 이벤트 리스너를 추가해서 트랜지션 엔드를 받고, 삭제시 호출할 removeTransition을 달아놓고

뒤에 removeTransition을 만들어줬다. 테스트 15:10초.

변환이 일어나는 프로퍼티 네임이 transform으로 바뀐걸 볼 수 있다.
변환이 되는 과정에 계속 누르면 이건 건들면 안되니 예외처리 먼저 해주고 (얼리리턴)

keys에 트랜지션이 들어오는경우 e에 대한것도 출력해본다. 속도조정도 낮추고 뭔일이 일어나나 살펴보자.

키 한번 눌렀을 뿐인데, 6개의 각종 트렌지션 이벤트가 들어온다. 여기에 프로퍼티 네임들을 좀 확인 해보자.

transform 친구가 눈에 띈다. 이친구 빼고 다 거르자.

이 만들어준 펑션의 this는 어디에 걸려있는지 뭐가 나오는지 콘솔로그로 체크해보자., 엘리먼트에 현재 실행되었다는 걸 볼 수 있다.
그럼???🧐

17:30초 해당 이벤트 엘리먼트의 플래잉을 해제하는 것. 속도도 다시 빠르게 줄도록 한다.

함수를 하나로 묶어주는 코드정리까지하고, 이벤트들을 하단으로 배치하고 끝.

ㅡ끄읏~