play 007 좌표 구하기

구상하고 설계하는 게 아직도 낯선 나

주어진 미션의 결과물을 보고 마음만 앞서서 눈에 보이는 대로

하나씩 코드 작성을 하다가 관문에 부딪히면

다시 뒤로 돌아가 어디서부터 꼬인건지 짚어보게 된다.

그럼 결국은 처음 구상이 문제라는 것을 발견하게 된다.

HTML 구조설계와 CSS 스타일 학습을 하면서

그토록 코드 작성에 앞서 구상과 설계 가 중요하다는 것을 뼈저리게 느꼈으면서

이 몇 줄 안되는 코드도 여전히 손가락부터 움직이는 나 자신... 반성해라 😔

만들고자 하는 것이 위의 007 좌표였는데,

내가 가장 첫 번째 해야 할 일은 마크업 구조 설계를 어떻게 들어갈 것인지 생각하는것이 었다.

냅다 마우스 커서 이미지 변경부터 하고 보는게 아니라...

솔루션 영상을 보고서 그제서야 코드부터 때려박은 걸 깨달은 내 자신이 너무 부끄럽다

💡 insight : 그렇다면 처음으로 돌아가서 생각해보기

눈에 보이는 요소는 총 4가지로,

수직선과 수평선, 가운데 target 이미지, 그리고 좌표를 보여줄 요소이다.

문서 구조를 생각 할 때 요소 4개를 작성해야 하는 걸 알았으면

그다음은 시맨틱 마크업인데 여기서는 딱히 의미있는 마크업이 필요하진 않으니 div 로 통일한다.

좌표값을 보여주는 요소같은 경우 span 요소로 블록이 아닌 인라인으로 설계한다.

그리고나서 스타일에 들어가는데,

넷플릭스 UI 이후 스타일 작성을 거의 하질 않았어서

간단하게 요소를 원하는 위치에 두는 것 조차 버벅거렸다. 😥

뭐든지 꾸준함이 중요하다. 그렇지 않으면 백날 열심히 해도 까먹어..

기능에 들어가서는 mousemove 발생 시 clientX, clientY 값이

콘솔에 정상적으로 출력되는 것을 확인한 후,

이제 그 값을 tag 요소에 집어 넣으면 되겠다 생각했는데

tag.innerHTML = e.clientX, e.clientY; 

도무지 이렇게밖에 떠오르지가 않았다..

좌표값이 화면에 나오기는 한다만, 마우스를 따라 움직이는 기능은 어떻게 해야되는지

구글링해 보니 생각보다 간단하다고 하여.. 아무리 생각해봤지만

머리가 굳은건지.. MDN 문서를 봐도 모르겠어서 솔루션 영상을 확인했다.

body.addEventListener("mousemove", (e) => {
  const x = e.clientX;
  const y = e.clientY;
  vertical.style.left = `${x}px`;
  horizontal.style.top = `${y}px`;
  target.style.left = `${x}px`;
  target.style.top = `${y}px`;
  tag.style.top = `${y}px`;
  tag.style.left = `${x}px`;
  tag.innerHTML = `${x}px, ${y}px`;
});

clientX,Y 좌표 값을 상수에 할당하고,

그 상수를 CSS style 코드에 할당하여 마우스가 움직일 때 마다

요소의 위치가 동적으로 바뀌어지는 형태의 코드였다.

까 보면 별거 없지만 중요한건 나는 스스로 까질 못했다는거 😂

❤️ 내 것으로 만들기

간단하게 원이 마우스를 따라다니는 것을 구현해봤다.

마우스 이벤트의 client 프로퍼티는 한 번도 사용해보지 않았던건데

간단하게 이런 효과를 만들 수 있다니 재미있는 경험이었다.