1. 정규 표현식 (Regular Expression)
정규표현식(Regex)은 문자열에서 특정 패턴을 찾거나 대체, 발췌할 때 사용하는 도구이다.
자바스크립트에서는 regExp객체를 사용하여 정규표현식을 다룰 수 있다.
💻 이메일 주소를 확인하는 정규표현식 예시 코드
let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
let email = "example@example.com";
if (emailPattern.test(email)) {
console.log("유효한 이메일 주소입니다.");
}else{
console.log("유효하지 않은 이메일 주소입니다.");
}
💡 정규표현식의 구성 요소
| 요소 | 설명 |
| ^ | 문자열의 시작 |
| [a-zA-Z0-9._%+-]+ | 하나 이상의 알파벳 대소문자, 숫자, 점, 밑줄, 퍼센트, 플러스, 하이픈 문자 |
| @ | @기호 |
| [a-zA-Z0-9.-]+ | 하나 이상의 알파벳 대소문자, 숫자, 점, 하이픈 문자 |
| \. | . 문자 (이스케이프 필요) |
| [a-zA-Z]{2,} | 2개 이상의 알파벳 문자 |
| $ | 문자열의 끝 |
🚀 정규표현식 예시
let str = "123ABC가나다45홍 asdf1 23길동”| console.log(str.match(/[1]/)); | 반환값은 배열. 최초의 1개만 반환 |
| console.log(str.match(/[1]/g)); | 해당되는 모든 값을 반환 |
| console.log(str.match(/[0-9]/g)); | 숫자만 반환 |
| console.log(str.match(/\d/g)); | 위와 동일 |
| console.log(str.match(/[0-9 ]/g)); | 숫자, 공백을 반환 |
| console.log(str.match(/[가나]/g)); | ‘가' 또는 '나' 문자를 모두 찾아 배열로 반환 |
| console.log(str.match(/[가-힣]/g)); | 한글만 한글자 단위로 반환 |
| console.log(str.match(/[a-zA-Z0-9]/g)); | 영문, 숫자만 반환 |
| console.log(str.match(/[a-z]/gi)); | i : 대소문자 구분 X. 모든 영문자 반환 |
| console.log(str.match(/[가-힣]+/g)); | 한글(새로운 문자가 나오기 전까지) |
| console.log(str.match(/\d{2}/g)); | 숫자 연속 두글자씩 끊어줌 |
| console.log(str.match(/\d{2, 3}/g)); | 숫자 연속 두글자 또는 세글자씩 끊어줌 |
💻 결과
📚 JavaScript 정규 표현식 문법 총정리 + 응용 예제
정규 표현식(Regular Expression) 정규식(Regular Expression)은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용된다. 대표적으로 입력칸에 전화번호나 이메일을 입력하라고 했을때 옳지 않은
inpa.tistory.com
- 출처 : inpa
Javascript에서 정규표현식(Regular Expression) 사용하기
자바스크립트의 정규표현식 개념과 자주 사용되는 패턴에 대한 활용 예시
velog.io
- 출처 : ryuryu
2. BootStrap
Bootstrap은 웹사이트 및 웹 애플리케이션을 쉽게 디자인할 수 있게 해주는 프론트엔드 프레임워크이다.
HTML, CSS, 자바스크립트로 구성되어 있으며, 반응형 웹 디자인을 쉽게 구현할 수 있게 도와준다.
💻 Bootstrap을 사용한 반응형 네비게이션 바 예시 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
💻 결과
Get started with Bootstrap
Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
getbootstrap.com
- 출처 : getbootstrap.com
3. CDN (Content Delivery Network)
CDN은 웹 콘텐츠를 사용자의 위치에 따라 더 빠르고 효율적으로 제공하기 위한 분산 서버 네트워크이다.
CDN은 웹사이트의 성능을 향상시키고 전 세계 사용자의 요청에 신속하게 응답할 수 있도록 설계되었다.
1️⃣ CDN의 주요 개념
- 분산된 서버 네트워크
CDN은 전 세계 여러 지점에 분산된 서버로 구성된다. 이 서버들을 엣지 서버(edge servers)라고 한다. - 캐싱
CDN 서버는 원본 서버의 콘텐츠를 캐싱(복제)한다.
사용자가 특정 콘텐츠를 요청할 때, CDN은 가장 가까운 서버에서 캐시 된 콘텐츠를 제공하여 대기 시간을 줄인다. - 속도 향상
CDN은 콘텐츠를 지리적으로 가까운 서버에서 제공하기 때문에,
네트워크 지연(latency)을 줄이고 로딩 시간을 단축시킨다. - 트래픽 부하 분산
CDN은 대량의 트래픽을 여러 서버에 분산시켜 서버 과부하를 방지한다. - 보안
CDN은 DDoS(Distributed Denial of Service) 공격에 대한 방어를 제공하며,
보안 프로토콜을 통해 데이터 전송을 보호한다.
2️⃣ CDN의 동작 방식
- 콘텐츠 요청
사용자가 웹 페이지에 접근하면, 해당 콘텐츠에 대한 요청이 발생한다. - 근접 서버 탐색
CDN은 사용자의 위치를 기반으로 가장 가까운 엣지 서버를 찾는다. - 캐시 확인
엣지 서버에 요청된 콘텐츠가 캐시 되어 있는지 확인한다. - 캐시 히트
엣지 서버에 콘텐츠가 있으면, 이를 사용자에게 전달한다. - 캐시 미스
엣지 서버에 콘텐츠가 없으면, 원본 서버로부터 콘텐츠를 가져와 캐싱하고 사용자에게 전달한다.
3️⃣ CDN의 장점
- 성능 향상
지리적으로 가까운 서버에서 콘텐츠를 제공하여 로딩 시간을 단축시킨다. - 확장성
대량의 트래픽을 여러 서버에 분산하여 서버 과부하를 방지한다. - 보안 강화
DDoS 공격 방어 및 데이터 전송 보안을 제공한다. - 신뢰성
전 세계 여러 서버에 콘텐츠가 분산되어 있어,
하나의 서버가 다운되더라도 다른 서버에서 콘텐츠를 제공할 수 있다.
4️⃣ CDN의 단점
- 비용
고품질의 CDN 서비스는 비용이 발생할 수 있다. - 캐시 관리
콘텐츠가 자주 업데이트되는 경우, 캐시 된 콘텐츠를 최신 상태로 유지하기 위해 추가 관리가 필요할 수 있다.
CDN이란 무엇인가요? - 콘텐츠 전송 네트워크 설명 - AWS
콘텐츠 전송 네트워크(CDN)의 주 목적은 대기 시간을 줄이거나 네트워크 설계로 인해 발생하는 통신 지연을 줄이는 것입니다. 인터넷의 글로벌하고 복잡한 특성으로 인해 웹 사이트(서버)와 사용
aws.amazon.com
- 참고 : aws.amazon.com
4. DOM (Document Object Model)
DOM은 HTML, XML 문서의 구조화된 표현이다.
DOM은 문서의 구조를 트리 형태로 나타내며, 이 트리를 통해 자바스크립트와 같은 스크립팅 언어가 문서의 콘텐츠와 구조를 동적으로 조작할 수 있게 한다. 웹 페이지가 로드되면 브라우저는 HTML 문서를 파싱 하여 DOM 트리를 생성한다.
1️⃣ DOM 트리 구조
DOM은 노드(node)로 구성된 트리 구조이다. 각 노드는 문서의 일부를 나타낸다.
💡 주요 노드 타입
- 문서 노드(Document node)
트리의 최상위 노드로, 전체 문서를 나타낸다. - 요소 노드(Element node)
HTML 요소를 나타내며, 트리의 가지(branch)를 형성한다. - 속성 노드(Attribute node)
요소의 속성을 나타낸다. - 텍스트 노드(Text node)
요소 안의 텍스트를 나타낸다.
💻 DOM 트리 예시 코드
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1>Hello, DOM!</h1>
<p>This is a paragraph.</p>
</body>
</html>Document
└── html
├── head
│ └── title
│ └── "DOM Example"
└── body
├── h1
│ └── "Hello, DOM!"
└── p
└── "This is a paragraph."
🚀 DOM API 메소드
1️⃣ 요소 선택
| 메소드 | 설명 |
| document.getElementById(id) | 특정 id를 가진 요소를 선택한다. |
| document.getElementsByClassName(className) | 특정 클래스명을 가진 모든 요소를 선택한다. |
| document.getElementsByTagName(tagName) | 특정 태그명을 가진 모든 요소를 선택한다. |
| document.querySelector(selector) | CSS 선택자를 사용하여 일치하는 첫 번째 요소를 선택한다. |
| document.querySelectorAll(selector) | CSS 선택자를 사용하여 일치하는 모든 요소를 선택한다. |
2️⃣ 요소 생성 및 추가
| 메소드 | 설명 |
| document.createElement(tagName) | 새로운 요소를 생성한다. |
| parentNode.appendChild(newNode) | 부모 요소에 새로운 자식 요소를 추가한다. |
| parentNode.insertBefore (newNode, referenceNode) |
새로운 요소를 참조 요소 앞에 삽입한다. |
3️⃣ 요소 삭제
| 메소드 | 설명 |
| parentNode.removeChild(childNode) | 부모 요소에서 자식 요소를 제거한다. |
| element.remove() | 선택한 요소를 제거한다. |
4️⃣ 요소 속성 및 스타일 조작
| 메소드 | 설명 |
| element.setAttribute(name, value) | 요소에 새로운 속성을 추가하거나 기존 속성 값을 변경한다. |
| element.getAttribute(name) | 요소의 속성 값을 반환한다. |
| element.style.property = value | 요소의 인라인 스타일을 변경한다. |
5️⃣ 이벤트 리스너 추가
| 메소드 | 설명 |
| element.addEventListener(event, function) | 요소에 이벤트 리스너를 추가한다. |
DOM | PoiemaWeb
브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM(문서 객체 모델. Document Object Model)을 생성한다. 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하기 위해서는 웹 문서를 브라우저
poiemaweb.com
- 출처 : poiemaweb
[Javascript] 부모, 자식, 형제 노드(node)와 요소(element) 찾기
지난번에는 node와 element의 차이에 대해서 정리해보았습니다. 이번에는 dom에서 부모, 자식, 형제 노드(node)와 요소(element)를 탐색하는 방법을 정리해 보도록 하겠습니다. node 탐색 부모(parent) 노드
hianna.tistory.com
- 출처 : hianna
[JS] 자바스크립트 childNodes / children
자바스크립트를 이용하여 HTML요소의 자식 노드와 요소에 접근하는 방법으로 우선 HTML 노드와 요소의 차이점에 대해서 알아야한다. 노드에는 3개, Text와 Element, Comment가 포함되어 있습니다. Text :
juni-official.tistory.com
- 출처 : juni-official
'에이콘아카데미 회고 > 5회차) 자바기반 풀스택 개발자 양성과정' 카테고리의 다른 글
| JS) 37번째 회고 (0) | 2024.05.23 |
|---|---|
| JS) 36번째 회고 (0) | 2024.05.22 |
| JS) 34번째 회고 (0) | 2024.05.22 |
| JS) 33번째 회고 (0) | 2024.05.17 |
| JS) 32번째 회고 (0) | 2024.05.16 |
