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;
});
이상으로 바닐라 자바스크립트의 개념에 대해 알아보고 코드를 통해 예시를 살펴보았습니다.
감사합니다.
반응형
'개발일기' 카테고리의 다른 글
| 타입스크립트 기초 (23.04.12) (0) | 2023.04.12 |
|---|---|
| React useNavigate 사용법 (0) | 2023.04.08 |
| [위코드] 2차 프로젝트 회고의 시간 (0) | 2023.04.07 |
| 리액트란? React란? 리액트 정의 (0) | 2023.04.04 |