[TIL] 혼자 만들어 본 코드 중 아마도 가장 쓸모있는 것

 

새로운 프로젝트의 메인 화면 디자인이 드디어 마무리 되었다. (아마도)

그 중 한 부분에 애니메이션을 추가하고 싶었는데, 피그마로 프로토타입을 구현하는 것 보다

직접 코드를 짜보면 좋겠다는 생각에 처음으로 업무용 코드를 만들었고 생각보다 더 많은 것을 배우는 중이다.

 

 

화면 자체를 만드는 일은 생각보다 오래걸리지 않았다.

SCSS 수업을 다시 듣고 기억을 떠올려서 활용한다면 훨~씬 좋겠지만 일단 급하니까 쌩 CSS로 잡았다.

문제는 여러개의 버튼 중 내가 클릭한 요소에 맞는 이벤트를 넣어줄 수 있는가였다.

 

화면에 있는 8개의 버튼은 각각

왼쪽 버튼인지, 오른쪽 버튼인지
어느 li 태그에 속한 버튼인지
해당 버튼이 가지고 있는 percent가 몇인지

 

를 구분할 수 있어야했다.

 

 

 

 

1. 일단 동작이 되도록 만들어보자

당연히 처음부터 예쁜 코드를 만들 수 없었으므로 일단 원하는 애니메이션이 잘 구현되는 것을 목표로 했다.

(대충 첨에 만든 코드가 구리다는 말)

const checkButton = $('.check-button');

checkButton.click(function(event){
    const buttonSelected = $(event.target).parent();
    const svgSelected = $(event.target).children();
    const ul = buttonSelected.parents('.polls-item');
    const percent = ul.children().children().children('.percent');
    const graphBackground = ul.children('.polls-item-graph');
    const graphSelected = ul.children('.polls-item-graph').children();


    buttonSelected.addClass('active');
    ul.children().children().children('.check-button').css('pointer-events', 'none');
    svgSelected.addClass('active-svg');
    percent.removeClass('hidden');
    graphSelected.removeClass('hidden');

    setTimeout(function(){
        if (buttonSelected.parent().hasClass('left1')) {
            const percent1 = parseInt($('.percent .first').text());
            graphSelected.css('width', `${percent1}%`);
        }
        else if (buttonSelected.parent().hasClass('right1')) {
            const percent2 = parseInt($('.percent .second').text());
            graphSelected.css('width', `${percent2}%`);
        }
        else if (buttonSelected.parent().hasClass('left2')) {
            const percent3 = parseInt($('.percent .third').text());
            graphSelected.css('width', `${percent3}%`);
        }
        else if (buttonSelected.parent().hasClass('right2')) {
            const percent4 = parseInt($('.percent .fourth').text());
            graphSelected.css('width', `${percent4}%`);
        }
        graphBackground.css('background-color','#91939C');
        graphSelected.css('background-color', '#FFAD31');
    }, 200)
})

ㅎ...

바닐라 자바스크립트를 써보고 싶었는데 DOM 요소 잡아오면서 코드가 너무 길어질까 싶어서 제이쿼리를 사용했다.

event.target 으로 부터 연결된 DOM 요소를 잡아오는게 어려웠다.

열심히 구글링해서 children().children().children()... 같은 코드로 겨우 잡았다.

각 버튼의 percent 값을 어떻게 잡아와야 할지 모르겠어서, 클래스를 마구마구 추가했다.

질문 리스트 2개 있는 것만으로 코드가 이상태라 리스트를 더 추가할 수도 없었다.

 

 

 

 

2. 동료분들께 도움을 받아보자

만든 것을 보여드리고 부족한 부분에 대해 여쭤볼 수 있는 동료가 있다는건 큰 행운이다.

한 동료 슨생님이 껄껄껄하며 적극적으로 도와주셨다.

 

Solution 1

this 를 활용하자.

 

Solution 2

children().children().children()... 같은 코드는 find()로 쉽게 해결할 수 있다.

 

Solution 3

선택한 버튼이 오른쪽 사이드에 있는지 확인하고

오른쪽에 있으면 li 태그에 .selected와 .right 클래스를 추가하고

아니면 (왼쪽 사이드이면) .selected 클래스만 추가한다.

js 파일에 넣어놓은 css 속성들을 모두 css 클래스로 풀어서 해결하는 방식으로 풀어주셨다.

 

$(".check-button").click(function() {
  const selectedSide = $(this).parents(".polls-item-select");
  const topParent = $(this).parents(".polls-item");
  const selectedGraph = topParent.find(".graph-selected");

  $(this).addClass("active");

  if (selectedSide.hasClass("right")) {
    topParent.addClass("selected right");
  } else {
    topParent.addClass("selected");
  }

  const p = selectedSide.children(".percent").text();
  selectedGraph.css("width", p);

  $("this :button").prop("disabled", true);
});

 

 

그리고 이렇게 정리해서 다시 만들어주신 제이쿼리 코드를 바닐라 자바스크립트로 바꿔보라고 하셨다.

제리쿼리의 라이프 사이클에 대해 알려주면서 후에 뷰나 리액트를 쓸거면 바닐라를 쓰는게 좋다고 하셨다.

요건 나중에 다시 알아봐야겠다.

https://social.msdn.microsoft.com/Forums/en-US/720928ac-5a09-4c1c-8c18-f478cd5102cb/jquery-page-load-life-cycle?forum=aspdotnetjquery 

jQuery page load life cycle

 

 

 

 

 

 

3. 여러가지 숙제도 받았다!

만든것에서 더 확장시켜볼 수 있는 재밌는 숙제들도 내주셨다.

 

- 코드를 바닐라 자바스크립트로 바꿔보기

- 한쪽 값을 입력하면 다른쪽 값이 자동으로 계산되는 인풋 만들기

- 그 인풋에 add 버튼을 만들어 리스트가 동적으로 생성되도록 만들기

- 인풋에 값이 없다면 얼럿 띄우기

 

 

일단 제이쿼리에서 바닐라로 바꾸는 작업도 나에겐 만만치 않았다.

풀어주셨던 코드를 한줄씩 다시 보며 이해하고 정리해 보았다.

function pollsAnimation() {
  this.classList.add('button-active');
  this.querySelector('path').classList.add('button-active-svg');
  
  const pollsItem = this.closest('.polls-item');
  const selectedSide = this.closest('.polls-item-select');
  const selectedGraph = pollsItem.querySelector('.graph-selected');
  const percent = selectedSide.querySelector('.percent').innerText;
  
  if (selectedSide.classList.contains('right')) {
    pollsItem.classList.add('selected', 'right');
  } else {
    pollsItem.classList.add('selected');
  }
  
  setTimeout(function() {
    selectedGraph.style.width = percent;
  }, 200);
}

const button = document.querySelectorAll('.check-button');
for(let i = 0; i < button.length; i++) {
  button[i].addEventListener('click', pollsAnimation);
}

 

DOM을 잡아오는 코드가 길 줄 알았는데 생각보다 길지 않았다.

코드를 바꾸면서 function을 따로 빼보았다.

이렇게 나름대로 리팩토링 과정을 거치면서 DOM elements를 어떻게 제어하는지 약간 감을 잡을 수 있었다.

 

 

 

 

이제 남은 세가지 숙제를 해 볼 차례!