[JavaScript] JavaScript에서 $(달러 사인)이 안 먹힐 때 (feat. jsp)

https://gurtn.tistory.com/80

[JS] 별점 드래그 구현

완성본 코드 See the Pen Drag Star by hyukson (@hyukson) on CodePen. 코드 풀이 ★★★★★ ★★★★★ // JAVASCRIPT CODE const drawStar = (target) => { document.querySelector(`.star span`).style.width = `${target.value * 10}%`; } // JQUERY

gurtn.tistory.com

📌 현재 상황

프로젝트 별점 구현을 위해 구글링 하던 중 이분의 티스토리에서 간편하게 이해하기 쉬운 코드를 찾음!

VSCode에서 잘 구현되길래 행복했는데 STS에 옮긴 후 서버를 돌렸을 때는 별의 색이 채워지지 않음

내가 이해한 이분의 코드를 간략하게 설명하자면 아래와 같음

👉🏻 input range 위로 position을 통해 별을 덮어 씌움

👉🏻 별은 회색 5개, 채워진 색 5개로 2세트가 있음

👉🏻 드래그(range의 움직임)이 있을 때 별의 css를 조작(회색 별에서 채워진 색 별로 바꾸기)하여 별점이 채워지는 듯한 효과를 줌

👉🏻 input 태그의 투명도를 조절하여 보이지 않게 함

사용자 입장: 어? 드래그 하니까 별점이 채워지네!

기존 HTML 코드

<form id="starScoreArea">
    <div id="commentTitle"><b>유저닉네임</b> 님, 이 콘텐츠 어떠셨나요?</div>
    <span class="star">
            ★★★★★
        <span>★★★★★</span>
        <input type="range" oninput="drawStar(this)" value="1" step="1" min="0" max="10">
    </span>
</form>

기존 CSS 코드

/* 별점 시작 */
#starScoreArea {
  font-size : 20px;
  text-align : center;
}

.star {
  position: relative;
  font-size: 40px;
  color: #ddd;
  border-radius : 10px;
}
  
.star input {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  opacity: 0;
  cursor: pointer;
}
  
.star span {
  width: 0;
  position: absolute; 
  left: 0;
  color: #64ffda;
  overflow: hidden;
  pointer-events: none;
}

기존 JavaScript & jQuery 코드

<script>
    const drawStar = (target) => {

        // console.log(target.value);

        //var score = target.value;
        //console.log(score);

        // document.querySelector(`.star span`).style.width = `10%`; // 10% css 먹힘
        //document.querySelector(`.star span`).style.width = score; // 안 됨

        // document.querySelector(`.star span`).style.width = target.value * 0.1; // ㄴㄴ
        $(".star span").css({ width: `${target.value * 10}%` });
    }
</script>

👉🏻 주석이 아닌 부분은 원래 코드

❌ 시도 1 : document.querySelector로 요소를 선택하는 구문을 바꿔 봄

👉🏻 역시나 VScode로 html 실행은 잘되나 서버에서는 안 먹힘

❌ 시도 2 : 화살표 함수를 function(target) { }과 같이 바꿔 봄

👉🏻 역시나 VScode로 html 실행은 잘되나 서버에서는 안 먹힘

❌ 시도 3 : 백틱 문법을 홑따옴표, 쌍따옴표로 바꿔 봄

👉🏻 아예 실행되지 않음

❌ 시도 4: $(달러 사인)이 문제일 수도 있다는 말을 듣고 ${}를 뺀 target.value를 콘솔에 찍어 봄

👉🏻 콘솔에는 찍히나 target.value를 css의 value로 넣었을 때는 작동하지 않음

👉🏻 (target.value *10)%, (target.value*0.1), ... 모두 안 됨

❗️❌시도 5 : CSS 구문에 문제가 있음을 확신

👉🏻 target.value가 콘솔에 찍힌다는 건 oninput 이벤트도 잘 먹혔고, target(해당 요소)의 value(값)도 잘 가지고 온다는 것

❗️ 시도 6: CSS에 10%라는 고정값을 넣어봄

👉🏻 서버에서 돌렸을 때 반 개의 별이 채워지는 것을 확인

👉🏻 $(달러 사인)에 문제가 있음을 확신

$(달러 사인)이 자바스크립트에서 문제가 되는 이유

html에서는 잘 실행되던 $(달러 사인)이 jsp 코드에 들어오면서 EL구문과 충돌이 생긴 듯함

즉, ${target.value}를 자바스크립트는 EL구문으로 인식하여

"너 target이라는 애를 정의한 적 없는데 무슨 value값을 찾으라는 거야?"라고 생각하는 것!

(추정)

자바스크립트에서는 없는 값을 찾으면 오류 메시지 없이 그 값을 뽑지도 않고, 관련 코드가 실행되지도 않음

👉🏻 오케이... 달러 사인 빼고 이것저것 시도해 보자!

❌ 시도 7: target.value를 아예 변수로 빼고 콘솔에 해당 변수를 찍어봄

👉🏻 target.value를 찍었을 때와 동일함 (변수에 값 잘 담김)

👉🏻 하지만 해당 변수만 css value 값으로 넣었을 때는 변화 없음

⭕️ 시도 8 : 변수 + "%"

내가 주고자 하는 속성은 css 중에서도 width임!

👉🏻 width는 숫자 뒤 px 혹은 %로 줬음

👉🏻 변수에 숫자값까지만 담아 놓고 css 속성에 변수 + '%'의 형태와 같이 문자열로 함께 붙여 준다면?

<script>
    const drawStar = (target) => {

        var score = target.value * 10;
        $(".star span").css({ width: score + "%" });
        
    }
</script>