요즘은 jQuery나 JS 보다는 React나 Vue처럼 JS를 더 편하게 만들어주는 프레임워크를 사용하고 있고 그게 더 생산성에 이득이라고 하지만 내 생각에는 코드가 조금 길더라도, 불필요한 것 같더라도 기반을 다져 놓은 다음 조금 더 쉬운 프레임워크들을 사용하는 게 좋은 것 같다라고 그 과정의 이득을 본 사람으로써 jQuery를 다시 한번 더 공부하게 되는 것 같다. (비전공자나 신입일 때는 지금 유행하는 프레임워크의 작동법을 배운 다음에 깊게 공부하는 게 더 좋겠지만)
강의 내용을 정리 하기에는 별 내용이 없어서 추가적으로 기능을 더해서 만들었다.
1. 기본적인 UI를 구현한다. 덤으로 index.css 파일을 생성해서 CSS도 입혀 주었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery 연습</title>
<script
type="text/javascript"
src="https://code.jquery.com/jquery-3.2.0.min.js"
></script>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="alert" class="alert-box">Alert Box</div>
<button id="btn" onClick="alertShow2()">열기</button>
</body>
<script>
// JS 버전
const alertShow = () => {
...
};
// jQuery 버전
const alertShow2 = () => {
...
};
</script>
</html>.alert-box {
background: rgb(201, 144, 201);
color: aliceblue;
padding: 20px;
border-radius: 5px;
display: none;
}
2. 1번에서 만든 UI 버튼이 움직일 수 있도록(동작 할 수 있도록) body 태그 하단에 script 태그를 추가 해준다.
(JS와 jQuery 두 버전을 만들어서 비교 할 수 있도록 구현하였다.)
두 버전 모두 함수로 묶어서 button을 클릭 시(onClick) 각 함수가 호출 되도록 구현하였다.
- JS 버전
// JS 버전
const alertShow = () => {
const text = document.getElementById("btn").innerHTML;
if (text === "열기") {
document.getElementById("alert").style.display = "block";
document.getElementById("btn").innerHTML = "닫기";
} else if (text === "닫기") {
document.getElementById("alert").style.display = "none";
document.getElementById("btn").innerHTML = "열기";
}
};→ btn이라는 id를 가진 요소를 불러온 후 .innerHTML 메소드를 사용하여 해당 요소의 텍스트를 불러온다.
→ 조건문(if, else if)를 사용하여 어떤 상태인 지 파악한 후 필요한 동작을 실행하도록 코드를 구현했다.
즉, 열기를 누른 경우 alert box를 보여주고(display: block), 버튼의 text를 닫기로 바꿔준다. 닫기를 누를 경우 alert box를 가리고(display: none), 버튼의 text를 열기로 바꿔준다.
- jQuery 버전
// jQuery 버전
const alertShow2 = () => {
const text = $("#btn").text();
if (text === "열기") {
$("#alert").css("display", "block");
$("#btn").text("닫기");
} else if (text === "닫기") {
$("#alert").css("display", "none");
$("#btn").text("열기");
}
};jQuery도 JS와 동일한 동작을 실행하지만, JS 보다 코드가 간결 해지고, 보다 가독성이 높아진 걸 볼 수 있다.
'프레임워크 > JS(+jQuery)' 카테고리의 다른 글
| [JavaScript] new Map() (0) | 2024.05.14 |
|---|---|
| [jQuery] 파라미터(인자) 사용하기 (0) | 2022.04.27 |
| [jQuery] 스크롤 감지 이벤트 (스크롤 이동 / 현재 스크롤 위치) (0) | 2022.04.18 |
| [jQuery] 선택자 종류 (0) | 2022.04.18 |
| [jQuery] 시작하기 + $(document).ready() (0) | 2022.04.15 |
댓글