개발일기

바닐라 자바스크립트란?

소고기집주인 2023. 4. 6. 07:47
728x90

바닐라 자바스크립트(Vanilla JavaScript)란, JavaScript 언어 자체를 의미합니다.

프레임워크나 라이브러리를 사용하지 않고 순수한 JavaScript만으로 웹 애플리케이션을 개발하는 것을 의미합니다.

바닐라 자바스크립트의 장단점과 대표적인 예제를 살펴보도록 하겠습니다.

 

장점

  • 브라우저가 지원하는 모든 기능을 사용할 수 있다.
  • 라이브러리나 프레임워크를 사용하지 않아도 되므로, 배포 파일의 크기가 작아진다.
  • 브라우저에서 바로 실행되므로, 로딩 시간이 줄어든다.
  • 유지보수가 용이합니다. 프레임워크나 라이브러리에 종속되지 않기 때문에, 자유롭게 코드를 수정할 수 있다.

 

단점

  • DOM 조작이 번거로울 수 있습니다. 라이브러리나 프레임워크를 사용하면, DOM 조작을 보다 쉽게 할 수 있다.
  • 코드의 반복이 발생할 수 있습니다. 라이브러리나 프레임워크를 사용하면, 공통된 기능을 한 번에 관리할 수 있다.

 

예시 - html, css

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>바닐라 자바스크립트 예제</title>
    <style>
      body {
        background-color: #222;
      }

      #color {
        color: #fff;
        font-size: 3rem;
        text-align: center;
        margin-top: 20%;
      }
    </style>
  </head>
  <body>
    <div id="color"></div>
    <button id="btn">색상 변경</button>

    <script src="main.js"></script>
  </body>
</html>

 

예시 - JavaScript

const color = document.querySelector('#color');
const btn = document.querySelector('#btn');

function randomColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
}

btn.addEventListener('click', () => {
  const newColor = randomColor();
  color.textContent = newColor;
  color.style.backgroundColor = newColor;
});

 

이상으로 바닐라 자바스크립트의 개념에 대해 알아보고 코드를 통해 예시를 살펴보았습니다.

감사합니다.

반응형