디블리셔에서 프론트엔드가 되어가는 불쌍한 IT땔감

사실 이 유튜브 영상만 따라해도 바로 알 수 있음. 왠만해선 바로 이해될 것임. 그런데 javascript를 이제 막 공부하기 시작한 주변사람들 중 이게 영어라서 못알아들어 공부가 안되고 이해가 안돼서 결국 구글링해 긁어다 쓰는거랑 다를바가 없다는 사람이 있어 직접 해설을 해보기로. 해설이라기보단 그냥 알기 쉽게 이 유튜버 분의 소스를 설명해보겠음. 쭉 읽고 난 뒤엔 javascript에 대한 가독성이 뭔가 더 좋아졌음을 느낄 수 있을것임. 하코사라던지 여러 커뮤에서 관련분야 질문을 해도, 대체로 친절하고 세세하게는 안알려주고 답변해주는 사람들도 '이정돈 당연히 알고 있겠지' 라고 생각하고 답을 해주니까 그것조차도 모르는 사람들은 결국 원하는 답을 못얻고 헤메는 경우가 많음... 그렇게 답답했던 사람들에..

.click-img 는 내가 클릭할 이미지를 감싸고 있는 div다. .clone-img는 내가 클릭한 이미지를 복사할 곳이다. (적절한 css와 jquery 사용으로, 이 .clone-img를 새창 팝업창이나 모바일 모달팝업으로 만들 수도 있다.) 그렇다면 이제... javascript를 어떻게 작성해 볼까? 클릭 시 벌어지는 이벤트이니까, 클릭 이벤트리스너를 먼저 구성해 보자. $('.click-img').click(function(){ }); .click-img 를 클릭했을 때, 어떠한 펑션을 돌리게 하겠다. 어떠한 것을 돌릴까? .clone-img에 내가 클릭한 이미지를 복사해 가고 싶다. 작성해 보자. $('.click-img').click(function(){ $(this).clone().app..