CDN (Content Delivery Network)
정의&역할: CDN은 콘텐츠를 사용자에게 더 빠르고 효율적으로 전달하기 위한 분산 서버 네트워크이다. 사용자는 가까운 서버에서 콘텐츠를 받아보게 되어 로딩 속도가 빨라진다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CDN Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>SW CDN Example</h1>
</body>
</html>setTimeout
특정 시간 후에 함수를 한 번 실행시키는 메서드이다. 예를들면, setTimeout(function, millisecond)로, 지정된 밀리초 후에 함수가 실행한다.
↓ ↓ 3초 후에 'SW Timeout!'을 출력 ↓ ↓
setTimeout(function() {
console.log('SW Timeout!');
}, 3000);DOM
HTML 문서를 객체로 표현하여 프로그래밍적으로 조작할 수 있게 하는 문서 구조 모델이고 구성으로는 요소 노드, 속성 노드, 텍스트 노드가 있다.
조작 방법: 요소 노드를 생성하고 다른 문서 객체와 연결한다. 속성 지정하려면 element.attributeName으로 값을 지정하거나, setAttribute(name, value)를 사용가능하다
innerHTML: 태그의 내부 HTML을 나타내는 속성으로, 이를 통해 요소의 콘텐츠를 변경할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Example</title>
</head>
<body>
<div id="swContainer"></div>
<script>
let swDiv = document.createElement('div');
swDiv.innerHTML = 'Hello, SW!';
swDiv.setAttribute('class', 'swGreeting');
document.getElementById('swContainer').appendChild(swDiv);
</script>
</body>
</html>// 새로운 요소를 생성하고 속성을 설정한 후 추가
jQuery
자바스크립트 라이브러리이며 HTML 문서 탐색, 이벤트 처리, 애니메이션, Ajax 요청 등을 간편하게 수행하게 해준다.
주요특징
- 간편한 문법: jQuery는 짧고 직관적인 문법을 제공하여 복잡한 자바스크립트 코드를 간단하게 작성할 수 있다.
- DOM 조작: HTML 문서의 DOM을 쉽게 탐색하고 수정할 수 있다.
- 이벤트 처리: 클릭, 키 입력, 마우스 이동 등의 사용자 이벤트를 쉽게 처리할 수 있다.
- 애니메이션: 요소의 시각적 효과를 간단하게 구현할 수 있는 메서드를 제공한다.
- Ajax 지원: 서버와 비동기적으로 데이터를 주고받을 수 있는 기능을 내장하고 있다.
- 브라우저 호환성: 다양한 웹 브라우저에서 일관된 동작을 보장하여 브라우저 호환성 문제를 신경 쓰지 않아도 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#swBtn").click(function() {
alert("SW Button clicked!");
});
$("#swText").text("Hello, SW jQuery!");
});
</script>
</head>
<body>
<p id="swText">Original SW text</p>
<button id="swBtn">Click SW Button</button>
</body>
</html>
프레임워크와 라이브러리의 가장 큰 차이는 코드 흐름의 제어권이다.
| 제어권 | |
| 프레임워크= | 프레임워크 |
| 라이브러리= | 개발자 |
+추가로 해보았습니다.
https://shsecurity1.tistory.com/65
부딪히며 만들어보는 타자 연습 (Eng Ver.)
수업+구글링+유튜브로 따라해보고 css로 레이아웃을 좀 다듬었다. (단어당 3초 이내로 입력하게 설정, 3초가 지날 경우 즉시 종료) 코드 요약 설명const GAME_TIME = 3;let score = 0;let time = GAME_TIME;let isPl
shsecurity1.tistory.com
