프론트엔드 첫걸음

Javascript 30 본문

후기/강의

Javascript 30

차정 2022. 4. 3. 15:33

막상 열어보면 기능은 쉬워보일 수 있다.

그런데 내가 생각한 코드랑 너무 다르게 (깔끔하게!!!) 짠다는 점이 특징이다.

 

화면상에서 이미지의 padding과 background-Color와 blur값을 변동시키는 자바스크립트 함수를 만들 때 

나같으면 함수 3개 나왔다..

그리고 그 함수마다 dom 객체 불러오는 코드 다 한번씩 써줬다..

 

우리 웨스 코드 깔끔한거 보세요..

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scoped CSS Variables and JS</title>
</head>
<body>
  <h2>Update CSS Variables with <span class='hl'>JS</span></h2>

  <div class="controls">
    <label for="spacing">Spacing:</label>
    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

    <label for="blur">Blur:</label>
    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

    <label for="base">Base Color</label>
    <input id="base" type="color" name="base" value="#ffc600">
  </div>

  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

  <style>
    :root {
      --base: #ffc600;
      --spacing: 10px;
      --blur: 10px;
    }

    img {
      padding: var(--spacing);
      background: var(--base);
      filter: blur(var(--blur));
    }

    .hl {
      color: var(--base);
    }

    /*
      misc styles, nothing to do with CSS variables
    */

    body {
      text-align: center;
      background: #193549;
      color: white;
      font-family: 'helvetica neue', sans-serif;
      font-weight: 100;
      font-size: 50px;
    }

    .controls {
      margin-bottom: 50px;
    }

    input {
      width: 100px;
    }
  </style>

  <script>
    const inputs = document.querySelectorAll('.controls input');

    function handleUpdate() {
      const suffix = this.dataset.sizing || '';
      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
    }

    inputs.forEach(input => input.addEventListener('change', handleUpdate));
    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
  </script>


</body>
</html>

1. 첫번째로 input을 다 한번에 querySelectorAll로 가져와서 nodeList를 만들었다.

2. 'px' 등의 suffix가 필요한 input은 HTML에 data-sizing이라는 dataset을 넣었다.

3. nodeList를 forEach해줘서 각각의 input에 이벤트리스너를 걸어주는데

4. 콜백함수에서 document.documentElement.style.setProperty해서 원하는 css변수를 바꿈

5. 그러려고 css에 전역변수를 넣어줌..... 전역변수명 = input name속성 값.. 

 

이게 내 수준에서는 구현 불가한 코드라는 것...

더 잘 정리된 블로그를 찾았으니 이 코드에 대한 자세한 설명을 듣고싶다면?

https://nykim.work/2

 

[JS30] 자바스크립트로 CSS 변수(사용자 정의 속성) 조절하기

🔥Javascript 30 - Day 03🔥 1. 마크업/스타일링 이번에는 CSS를 JS로 제어해 봅시다! 우선 적당히 마크업하고 적당히 스타일링 합니다(참 쉽죠?). 자세한 html, css코드는 Codepen 결과물 에 있어요! > 제어

nykim.work

 

 

 

 SI업체에 다니는 나는 이렇게 깔끔한 프론트쪽 코드를 볼 기회가 적다.

우리회사에도 잘하는 사람들 많지만 내가 맡은 프로젝트는 제이쿼리를 썼었고,,

html css는 퍼블리셔님에게서 넘어온 것 그대로 갖다 쓰고, 그래서 

나처럼 좋은 (CSS, DOM을 잘 활용한) 바닐라 자바스크립트 코드를 보고싶은 프망생이라면 

wesbos강의를 보는 것을 추천한다. 

 

JavaScript 30 — Build 30 things with vanilla JS in 30 days ...

 
 

JavaScript 30

Build 30 things with vanilla JS in 30 days with 30 tutorials

javascript30.com

 

 

 

나의 실습

 

See the Pen Untitled by JEONG (@cona) on CodePen.

'후기 > 강의' 카테고리의 다른 글

패스트캠퍼스 인터랙티브 웹 개발 강의  (0) 2023.02.27
udemy - Git&Github 실무활용 완벽 가이드  (0) 2022.07.07
'후기/강의' Related Articles more