[2022.04.26] 드래그 앤 드롭 퍼즐게임 따라 만들어보기

어제 드래그 앤 드롭에 대한 개념 정리하면서 간단히 사용해본 드래그 앤 드롭을 이용한 게임 만드는 것을 따라해봤다.
데브리님의 유튜브 영상을 보면서 만들어봤는데 머리에 온갖 개념이 나돌아 다녀서 일단은 따라해보면서 구현해보고 다음에 다시 처음부터 혼자 만들어보려고 한다.!

자세하게 설명하진 않다보니 자바스크립트 개념이 어느정도 잡혀있지 않으면 강의 내내 무슨 말을 하는지 못 알아 들었을 것이다. 그나마 아무것도 모르는데 따라치기만한 건 아니었고 여기서 쓰는 개념들은 다 어떤건지는 아는데.. 가장 큰!!! 문제는 어느 상황에서 쓰는지를 모를뿐ㅋㅋㅋㅋㅋ
(초보특 : 알아도 언제 쓰는지 몰라서 못씀. 그게 바로 나......)

함수 만들어서 사용하시는거나 삼항 연산자 활용하는거나 네이밍 짓는것도 공부가 되는 것 같아서 혼자 만들어보고 막히면 한번 더 돌려봐야겠다. 좋은 강의 감사합니다! 🙏

일단 따라 만들기만해도 이렇게 나온다.
데브리님 영상에서는 이미지 backgroundPositionX,Y 좌표 설정할 때 CSS 클래스 하나하나 지정해서 만드셨지만 개인적으로 JS 공부겸 자바스크립트로 넣어보고 싶어서 중첩 for문으로 각 퍼즐마다 배경 위치를 동적으로 추가하여 스타일을 넣을 수 있도록 작성해서 만들었다.

내가 한참 고민해야 하나 만들까 하는 것을 데브리님은 그냥 뚝딱 만들어버리는거 보고 약간 현타가 오면서..
언제 저런 경지(?)에 오르나 싶은 생각이 들었다.ㅋㅋㅋ
나는 하나 만들면 에러뜨는데 그냥 이렇게 이렇게 하면 이렇게 돼요~하고
바로 만드는 개발자분들 정말 너무 리스펙한다. 머릿속에 콘솔창이 있으신가 싶기도 하고..
분명 그분들도 나와 같은 경험이 있었겠지 위안 삼아보며 열심히 공부해서 나도 그렇게 될 수 있길..😣

참고 자료
데브리 Vanilla Javascript (drag & drop )퍼즐 Puzzle 게임 만들기