data-position 지정 질문드립니다.

Question

function processTouchMove(event){     event.preventDefault();     let currentX = event.clientX || event.touches[0].screenX;     nowActiveLi = Number(currentActiveLi) + (Number(currentX)-Number(touchstartX));      currentClassList.style.transition = 'transfrom 0s linear';     currentClassList.style.transform = 'translateX('+String(nowActiveLi)+'px)'; } 마지막 마우스끌기에관한 강의에서 나온 코드입니다. currentActiveLi = currentClassList.getAttribute('data-position') 이 설정되어 있는데   currentClassList.style.transform = 'translateX('+String(nowActiveLi)+'px)' 이 실행된다음   currentClassList.setAttribute('data-position',nowActiveLi) 를 하지않는 이유가 궁금합니다.

잔재미코딩 DaveLee · Answer

안녕하세요. 어느 영상 부분인지는 기재를 안해주셔서, 정확히는 알수가 없는데요. data-position 은 해당 카드가 최초 어느 위치에 있는지를 가지고 있는 변수라서요. 터치를 움직일 때, 해당 카드가 움직이는 모습을 보여주는 것은 transform 이고요. 그래서 터치를 움직일 때는 transform 을 바꿔주면서, 해당 카드를 터치한만큼 이동을 시켜줬고요. 터치가 끝나면, 터치한만큼의 애매한 위치에 카드를 놓는 것이 아니라, 일정한 간격을 둔 위치로 자동 이동을 시켜준 후에, 여기가 카드가 위치한 곳이니, 다음 카드를 또 터치할 경우, 여기부터 시작하라는 것을 알려주기 위해, 그 때 비로소 data-position 값을 설정한 것입니다. 그래서, 결론적으로 카드를 터치한만큼 이동하도록 하는 기능이 transform 이고, data-position 은 터치가 끝난 후, 최종 위치만 알려주는 기능을 하기 때문에, 터치할 때마다 data-position을 바로바로 설정할 필요는 없습니다. 워낙 브라우저마다 성능차이도 있어서, js 로는 가능한 최소한의 동작만 하도록 하는 것도 좋기도 합니다. 감사합니다. 마지막으로 다음 '궁금한 점에 대한 답변 찾기 꿀팁' 글도 읽어보시면, 훨씬 도움이 되실 것 같습니다. 궁금한 점에 대한 답변 찾기 꿀팁! 궁금한 부분이 있거나, 문제가 있을 때, 항상 google.co.kr 에서 질문에 대해 검색해보세요! (아직까지는 네이버?로 검색하는 개발자는 없습니다.) 에러 메시지는 맨 마지막 라인을 복사해서 구글에서 검색해보시고, 질문에 대해서는 질문 관련 키워드들을 조합해서 구글에서 검색해보세요. 개발자들은 모두 이를 통해, 답변을 얻습니다. 한발짝 나아 가시려면, 반드시 이런 연습이 꼭 필요합니다. 저는 한가지 확인이 필요한 사안을 위해, 20 ~ 30분 검색과 10개 이상의 블로그를 찾아보는 일을 하루에도 한두번씩 한답니다. 검색이 처음이신 분들은  개발자를 위한 정보 검색 팁 을 참고하시면 훨씬 성장하시는데 도움이 되실 것입니다. 두번째, 각 강의마다, 다른 분들께서도 이미 질문하신 사항들이 있습니다. 해당 부분을 확인해보시면, 답변을 기다릴 필요 없어서, 훨씬 도움이 되실 것 같습니다. 세번째, 각자 작성하신 코드 에러의 경우는 제가 제공해드린 코드자료를 수정하지 않고, 단계별로 그대로 실행해보신 후, 해당 코드와 자신의 코드가 어떤 부분이 다른지를 단계별로 확인해보시면, 훨씬 좋습니다. 키보드로 그대로 따라 치시기 보다, 제공해드린 코드를 그대로 복사해서 붙여넣고 테스트를 해보시면 좋고, 여기에서 자신의 코드와 다른 부분을 최대한 작게 쪼개서 조금씩 넣어보시면서, 테스트를 해보시면 가장 좋습니다. 각자 코드를 작성하신다면, 이렇게 작업해보시면 훨씬 도움이 되실꺼예요. 마지막으로, 질문하실 경우에는 어느 강의 영상의 어느 구간(가능하다면 몇분 몇초)에 대해 질문하시는 것인지 꼭 명기해주시면 좋습니다. 그래야 맥락이 이해가 가서, 보다 좋은 답변할 수 있습니다. 만약 구간 명기가 가능하지 않다면, 강의 영상 외적인 문의인지에 대해 확인 부탁드립니다. 본 질문 답변란은 강의 영상 이해를 돕기 위한 자리입니다. 강의 영상 외적인 부분은 양해를 부탁드립니다. 특히 극히 일부 개인별 코드 리뷰나 기능 구현등 무리가 되는 요청을 하시는 분들도 계셨는데, 좋은 강의가 선순환될 수 있도록 부탁드립니다. 잔재미코딩 Dave Lee 드림