>웹 프론트엔드 >JS 튜토리얼 >완전한 자바스크립트 - 기초부터 고급까지

완전한 자바스크립트 - 기초부터 고급까지

Susan Sarandon
Susan Sarandon원래의
2024-12-25 02:41:14522검색

Complete Javascript - Basic to Advanced

변수 및 데이터 유형 : var, let, const.

기본 유형: 문자열, 숫자, 부울, null, 정의되지 않음, 기호.

Null 대 정의되지 않음(imp):

아. null: 의도적으로 비어 있거나 값이 없음을 나타내기 위해 변수에 명시적으로 할당됩니다.

  • 유형: 개체 유형입니다. (이것은 JavaScript의 역사적인 특징입니다.)
  • 용도: 일반적으로 변수나 개체에 빈 값을 의도적으로 할당하여 의도적으로 누락된 항목이 있음을 나타낼 때 사용됩니다.

ㄴ. 정의되지 않음: 변수가 선언되었지만 값이 할당되지 않았거나 함수가 아무것도 반환하지 않음을 의미합니다.
유형: 정의되지 않은 자체 유형입니다.

  • 사용법: 초기화되지 않은 변수나 전달되지 않은 함수 인수에 대한 기본값입니다. 또한 함수가 아무것도 반환하지 않았음을 나타냅니다.

참조 유형: 객체, 배열, 함수

제어 구조: if, else, 스위치

루프: for, while, do-while, for…of, for…in

기능:
에이. 함수 선언과 표현식
비. 화살표 기능
기음. 즉시 호출 함수 표현식(IIFE)
디. 고차 함수(다른 함수를 인수로 사용하거나 반환하는 함수)
이자형. 콜백 함수
약속 : 비동기 작업을 처리하는 방법입니다.
에이. Promise.all()
비. Promise.resolve()
기음. Promise.then()
디. Promise.any()
이자형. Promise.race()
에프. 약속.거부()
g.Promise.allSettled()

  1. Async/await: 보다 동기적인 방식으로 비동기 코드를 작성할 수 있습니다.

  2. 콜백 함수 : 콜백은 다른 함수에 인자로 전달되어 해당 메인 함수가 완료된 후 실행되는 함수입니다.

  3. 클로저: JavaScript의 클로저는 상위 함수가 반환된 후에도 상위 범위의 변수에 액세스할 수 있는 함수입니다.

  4. 범위 :
    에이. 글로벌 대 로컬 범위
    비. 함수 범위, 블록 범위(let 및 const 포함)

  5. 호이스팅 :
    에이. 가변 호이스팅
    비. 함수 호이스팅

  6. 이벤트 루프 및 작업 대기열(마이크로태스크 및 매크로태스크)

  7. 실행 컨텍스트 : 실행 컨텍스트는 코드가 실행되는 환경입니다.
    에이. 전역 실행 컨텍스트(GEC)
    비. 함수 실행 컨텍스트

  8. 범위 체인 및 실행 컨텍스트:

스코프 체인은 함수나 코드 블록이 실행될 때 다양한 컨텍스트에서 변수를 조회하는 방법을 결정하는 중요한 개념입니다
실행 컨텍스트는 JavaScript 코드가 평가되고 실행되는 환경을 나타내는 추상적인 개념입니다. 함수가 호출되거나 코드 블록이 실행될 때마다 새로운 실행 컨텍스트가 생성됩니다.

  1. 메모이제이션: 비용이 많이 드는 함수 호출의 결과를 캐시하고 동일한 입력이 다시 발생할 때 해당 결과를 재사용하여 함수를 최적화하는 데 사용되는 기술입니다. 이는 중복 계산을 피하고 동일한 인수를 사용하여 함수가 반복적으로 호출되는 시나리오에서 성능을 향상시키는 데 도움이 됩니다.

  2. 디바운싱: 함수가 호출되는 속도를 제한합니다. 키 입력이나 크기 조정 이벤트와 같이 자주 발생하는 이벤트에 대해 여러 함수 호출을 방지하는 데 도움이 됩니다.

  3. 제한: ​​이벤트가 얼마나 자주 트리거되든 상관없이 특정 기간에 함수가 최대 한 번 호출되도록 합니다.

  4. Currying: 이유: Currying은 여러 인수를 취하는 함수를 각각 하나의 인수를 취하는 일련의 함수로 변환합니다. 이는 인수를 부분적으로 적용할 때 유용합니다.
    사용처: 함수형 프로그래밍, 고정 인수를 사용하여 함수 재사용.

  5. setTimeout(), setInterval() 및clearTimeout() :
    에이. setTimeout() : 지정된 지연(밀리초 단위) 후에 함수를 실행합니다.
    비. setInterval() : 지정된 간격(밀리초 단위)으로 함수를 반복적으로 실행합니다.
    기음. clearTimeout(): 이전에 예약된 setTimeout() 작업을 취소합니다.

  6. 템플릿 리터럴: 템플릿 문자열이라고도 하는 템플릿 리터럴은 더 쉬운 문자열 보간 및 여러 줄 문자열을 허용하는 JavaScript의 기능입니다. 작은따옴표나 큰따옴표 대신 백틱(`)으로 표시됩니다.

  7. 로컬 저장소 및 세션 저장소:

localStorage: 브라우저 세션 전반에 걸쳐 데이터를 지속적으로 저장하는 것으로 알려져 있으며 브라우저를 닫은 후에도 계속 사용할 수 있습니다.

sessionStorage: 단일 브라우저 세션 동안에만 데이터를 저장하고 탭이나 브라우저가 닫히면 지워지는 것으로 알려져 있습니다.

  1. 정규식(RegExp): 정규식(RegEx 또는 RegExp)은 검색 패턴을 정의하는 일련의 문자입니다. RegEx는 주로 문자열 검색 및 조작에 사용되며 텍스트의 패턴을 검색하고 일치시키고 바꿀 수 있습니다.

  2. this 키워드: 이 키워드는 함수가 실행되는 컨텍스트를 나타냅니다. 함수를 어떻게 호출하느냐에 따라 다르게 동작하는 특별한 키워드입니다.

  3. 전역 실행 컨텍스트(함수 외부)에서 이는 전역 객체(브라우저의 창, Node.js의 전역)를 나타냅니다.

  4. 일반 함수(엄격 모드 아님)에서는 전역 개체(브라우저의 창)를 나타냅니다.

  5. 객체의 메소드로 함수를 호출하는 경우 해당 메소드가 호출되는 객체를 의미합니다.

  6. JavaScript의 OOP:

JavaScript 클래스

JavaScript의 클래스와 객체

ES6에서 JavaScript 클래스를 생성하는 방법

이 키워드 JavaScript

자바스크립트의 새로운 키워드

JavaScript의 객체 생성자

자바스크립트의 상속

JavaScript의 캡슐화

JavaScript의 정적 메소드

자바스크립트의 OOP

JavaScript의 Getter 및 Setter

  1. 운영자 :
    에이. 산술 연산자: , -, *, /, %
    비. 비교 연산자: ==, ===, !=, !==, >, <, >=, <=
    기음. 논리 연산자: &&, ||, !
    디. 할당 연산자: =, =, -=, *=, /=
    이자형. 단항 연산자: , --, typeof, delete
    에프. 삼항 연산자(imp): 조건 ? expr1 : expr2

  2. 중단하고 계속하기

break(루프 종료)
계속(다음 반복으로 건너뛰기)

  1. 매개변수 및 인수:

매개변수는 함수가 호출될 때 어떤 종류의 값을 받을 것으로 예상하는지 지정하는 함수 선언(또는 함수 시그니처)에 정의된 변수입니다.
인수는 함수가 호출될 때 함수에 전달되는 실제 값입니다.

  1. 디스트럭처링(Destructuring): 디스트럭처링(Destructuring)은 배열의 값이나 객체의 속성을 고유한 변수로 풀 수 있는 JavaScript의 구문입니다. 객체나 배열에서 여러 속성이나 요소를 추출하는 프로세스를 단순화하여 코드를 더 깔끔하고 읽기 쉽게 만듭니다.

아. 배열 구조 분해
비. 객체 구조분해

  1. Rest 및 Spread 연산자: Rest 및 Spread 연산자는 모두 JavaScript에서 ...로 표시되지만 사용 방법에 따라 다른 용도로 사용됩니다.

Rest 연산자는 여러 요소를 수집하여 단일 배열이나 개체로 묶는 데 사용됩니다. 주로 함수 매개변수에서 인수를 수집하는 데 사용되거나 구조 분해에서 나머지 속성을 수집하는 데 사용됩니다.

Spread 연산자는 배열이나 개체의 요소를 개별 요소나 속성으로 압축 해제하는 데 사용됩니다. 이터러블(배열 또는 객체)을 개별 요소나 속성으로 확장하거나 "확산"할 수 있습니다.

31.이벤트 위임 : 상위 요소의 이벤트 리스너를 사용하여 하위 요소 이벤트 처리

  1. 고차 함수: 고차 함수는 하나 이상의 함수를 인수로 사용하거나 결과로 함수를 반환하는 함수입니다.

  2. 익명 함수: 익명 함수는 이름이 없는 함수입니다. 이러한 함수는 일반적으로 인라인으로 정의되며 변수에 할당되거나 인수로 전달되거나 함수가 필요한 다른 위치에서 사용될 수 있습니다.

주요 특징:

이름 없음: 이름 없이 함수를 정의합니다.
인라인으로 자주 사용됨: 일반적으로 콜백 함수로 사용되거나 고차 함수에 인수로 전달됩니다.
변수에 할당 가능: 다른 값과 마찬가지로 변수나 속성에 할당할 수 있습니다.

  1. 어휘적 범위 지정 : 런타임 중에 변수나 함수의 범위를 결정하는 과정을 어휘 범위 지정이라고 합니다.

어휘 범위 지정 작동 방식:

함수를 정의하면 해당 범위 내에 있는 변수(예: 함수 내부에 선언된 변수 및 전역 범위를 포함한 외부 함수의 변수)에 액세스할 수 있습니다.
함수가 다른 함수 안에 중첩되어 있으면 내부 함수가 외부 함수의 변수에 액세스할 수 있습니다(이를 클로저라고 함).

  1. 배열 방법:

push(), pop(), Shift(), unshift()
concat(), 슬라이스(), 스플라이스()
map(), filter(), Reduce(), forEach()
find(), findIndex()
정렬(), 역방향()
조인(), 분할()
indexOf(), include(), lastIndexOf()

  1. 객체 메서드 :

Object.할당(), Object.create(), Object.keys(), Object.values(), Object.entries(), Object.hasOwn(), Object.freeze(), Object.seal()

  1. 시제품 :

프로토타입 체인 :
프로토타입을 이용한 상속

  1. 수업

클래스 구문, 생성자, 메소드
확장을 사용한 상속
super() 및 super() 생성자

  1. call(), apply(), 바인딩() : 이 컨텍스트를 제어합니다

  2. 이벤트 버블링 및 캡처 :

이벤트 버블링은 이벤트가 요소에서 트리거된 후 이벤트가 대상 요소에서 DOM 트리의 상위 요소로 "버블링"될 때 발생합니다. 대부분의 경우 특별히 방지하지 않는 한 이벤트는 기본적으로 버블링됩니다.

이벤트 캡처는 이벤트 버블링의 반대입니다. 이벤트는 먼저 루트 요소에 의해 캡처된 다음 대상 요소로 흘러내립니다.

  1. 생성기 및 반복기:
    이유: 생성기는 지연 평가를 허용합니다. 즉, 한꺼번에 값을 생성하는 것이 아니라 요청 시 값을 생성합니다. 대규모 데이터 세트 또는 무한한 시퀀스에 유용합니다.
    사용처: 사용자 정의 반복기 구현, 시퀀스 지연 평가.

  2. WeakMap 및 WeakSet :
    이유: JavaScript의 메모리 관리에 도움이 됩니다. WeakMap 및 WeakSet은 더 이상 참조가 없는 키 또는 값의 가비지 수집을 허용합니다.
    사용처: 가비지 수집을 방지하지 않고 개체에 대한 참조를 관리합니다. 예를 들어, 메모리 누수를 일으키고 싶지 않은 DOM 노드를 캐싱합니다.

  3. 폴리필 :
    이유: 최신 기능을 모방한 코드를 제공하여 이전 브라우저에서 기본적으로 사용할 수 없는 기능에 대한 지원을 추가합니다.
    사용처: Promise, fetch 등과 같은 새로운 JavaScript 기능을 위해 이전 브라우저(예: 이전 버전의 Internet Explorer)와의 호환성을 보장합니다.

  4. 프로토타입 상속 :
    이유: JavaScript는 상속을 위해 고전적인 객체 지향 상속 대신 프로토타입을 사용합니다. 프로토타입 체인의 작동 방식을 이해하는 것이 JavaScript의 상속 모델을 이해하는 데 핵심입니다.
    사용처: 객체 계층 구축, 생성자에 메소드 추가.

  5. 쿠키 : JavaScript로 쿠키 저장 및 검색

  6. 고급 배열 방법

Array.prototype.find(): 배열에서 조건과 일치하는 첫 번째 요소 찾기
Array.prototype.filter(): 조건에 따라 요소 필터링
Array.prototype.reduce(): 배열을 단일 값으로 줄이기
Array.prototype.map(): 각 요소에 함수를 적용하여 새로운 배열 생성
Array.prototype.sort(): 사용자 정의 정렬 기능을 사용하여 배열 정렬

  1. 디자인 패턴 :

모듈 패턴: 코드를 모듈로 캡슐화
싱글톤 패턴: 클래스에 인스턴스가 하나만 있도록 보장
관찰자 패턴: 한 개체의 상태가 변경되면 여러 개체에 알립니다.
팩토리 패턴: 애플리케이션의 나머지 부분과 별도로 생성 논리를 유지하면서 객체를 인스턴스화하는 방법을 제공합니다.
전략 패턴 : 특정 작업에 대한 전략(알고리즘)을 정의하고 런타임에 변경할 수 있습니다.
데코레이터 패턴: 구조에 영향을 주지 않고 객체에 동적으로 동작을 추가합니다.

  1. Lazy Loading : 필요할 때까지 콘텐츠 로딩을 지연합니다.

  2. JSON 작업:

JSON 기본
JSON 구문, JSON.parse()로 구문 분석, JSON.stringify()로 문자열화
API 작업
fetch()를 사용하여 API에서 데이터 가져오기
Promise 또는 Async/Await를 사용하여 API 응답 처리

  1. DOM 조작 :

DOM 선택
document.getElementById(), document.querySelector(), document.querySelectorAll()
이벤트 처리
이벤트 리스너: addEventListener(), RemoveEventListener()
event.target, event.preventDefault(), event.stopPropagation()
DOM 요소 수정
텍스트, HTML, 속성, 스타일 변경
동적으로 요소 추가/제거(createElement(),appendChild(),removeChild())
DOM 탐색
parentNode, childNodes, nextSibling, PreviousSibling

  1. 오류 처리 :

try...catch...finally: 동기 코드의 오류 처리
사용자 정의 오류: 사용자 정의 오류 클래스 생성
오류 발생: 오류를 수동으로 발생시키는 throw 키워드

  1. 문자열 메서드:
    charAt(), charCodeAt(), concat(), include(), indexOf(), lastIndexOf(), Slice(), Split(), toLowerCase(), toUpperCase(), Trim(), replacement(), search( ), match(), 반복(), startWith(), endWith(), padStart(), padEnd(), localeCompare(), fromCharCode().

  2. 날짜 방식 :
    Date.now(), Date.parse(), Date.UTC(), getDate(), getDay(), getFullYear(), getHours(), getMilliseconds(), getMinutes(), getMonth(), getSeconds(), getTime(), getTimezoneOffset(), setDate(), setFullYear(), setHours(), setMilliseconds(), setMinutes(), setMonth(), setSeconds(), setTime(), toDateString(), toISOString(), toLocaleDateString(), toLocaleTimeString(), toString().

  3. 제너레이터: JavaScript의 제너레이터는 실행을 일시 중지하고 다시 시작할 수 있는 특수한 유형의 함수입니다.
    함수*, 항복, next(), return(), throw().

  4. JavaScript 프록시: JavaScript의 프록시는 속성 액세스, 할당, 함수 호출 등과 같은 객체에 대한 작업을 가로채고 사용자 정의할 수 있는 특수 객체입니다. 이는 다른 개체에 대한 래퍼 역할을 하며 해당 개체에 대한 기본 작업(예: get, set, deleteProperty 등)을 재정의할 수 있습니다.

자주 사용되는 트랩(방법):

get(target, prop, receive): 속성 액세스를 가로챕니다.
set(target, prop, value, receive): 속성 할당을 가로챕니다.
has(target, prop): in 연산자를 가로챕니다.
deleteProperty(target, prop): 속성 삭제를 가로챕니다.
apply(target, thisArg, 인수List): 함수 호출을 가로챕니다.
constructor(target, args): new 연산자를 가로챕니다.
DefineProperty(target, prop, descriptor): 속성 정의를 가로챕니다.

  1. Javascript 배열 및 개체 복제: 얕은 또는 깊은?

객체 또는 배열의 단순 복제는 새 인스턴스를 생성하지만 최상위 속성 또는 요소만 복사합니다. 원본 개체나 배열에 다른 개체(중첩 개체 또는 배열)에 대한 참조가 포함되어 있으면 이러한 내부 개체는 복사되지 않습니다. 대신, 얕은 복제본은 동일한 개체를 참조합니다.

딥 클론은 원본 개체 또는 배열과 완전히 독립적인 복사본을 생성합니다. 중첩된 개체나 배열을 포함하여 모든 속성이나 요소를 재귀적으로 복사합니다. 이는 심층 복제를 통해 중첩된 개체에 대한 참조가 원본과 복제본 간에 공유되지 않도록 보장한다는 의미입니다.

  1. 느슨한 평등(==)과 엄격한 평등(===) :

느슨한 동등성은 유형 강제 변환을 수행한 후 두 값이 동일한지 비교합니다. 이는 비교하기 전에 값이 공통 유형(다른 유형인 경우)으로 변환됨을 의미합니다.
==를 사용할 때 JavaScript는 피연산자를 비교하기 전에 동일한 유형으로 변환하려고 시도합니다.

엄격한 동일성은 유형 변환을 수행하지 않고 두 값을 비교합니다. 피연산자의 값과 유형을 모두 확인합니다.
===의 경우 피연산자의 유형과 값이 동일해야 동일한 것으로 간주됩니다.

  1. 값에 의한 호출 vs 참조에 의한 호출 :

값에 의한 호출: 인수가 값에 의해 함수에 전달되면 실제 값의 복사본이 전달됩니다. 함수 내부의 인수에 대한 변경 사항은 함수 외부의 원래 변수에 영향을 주지 않습니다.
발생 상황: 이는 기본 유형(예: 숫자, 문자열, 부울, null, 정의되지 않음 및 기호)이 함수에 전달될 때 발생합니다.

Call by Reference : 인수가 참조로 전달되면 실제 객체의 참조(또는 메모리 주소)가 함수에 전달됩니다. 즉, 함수 내부의 인수를 변경하면 함수 외부의 원래 개체가 직접 수정됩니다.
발생 상황: 이는 기본이 아닌 유형(객체, 배열, 함수 등)이 함수에 전달될 때 발생합니다.

  1. JavaScript Set: JavaScript의 Set은 기본 제공 또는 객체 참조 여부에 관계없이 모든 유형의 고유한 값을 저장할 수 있는 내장 컬렉션 객체입니다.

세트의 주요 특징:

고유한 요소: 세트는 포함된 각 값이 고유한지 자동으로 확인합니다. 중복된 값을 추가하려고 하면 무시됩니다.
순서 지정: 세트의 요소는 순서가 지정됩니다. 즉, 값이 추가된 순서대로 저장됩니다. 단, 세트는 중복 응모를 허용하지 않습니다.
반복 가능: 세트는 반복 가능하므로 for...of 또는 .forEach()와 같은 메소드를 사용하여 세트의 요소를 반복할 수 있습니다.
인덱스 없음: 배열과 달리 Set 요소는 인덱스로 액세스되지 않습니다. 게재 신청서에 따라 저장되지만 숫자로 참조할 수는 없습니다.
세트의 기본 방법 :

add(value): Set에 값을 추가합니다. 값이 이미 존재하는 경우 아무 작업도 수행하지 않습니다(중복 없음).
has(value): Set에 지정된 값이 포함되어 있는지 확인합니다. true 또는 false를 반환합니다.
delete(value): Set에서 지정된 값을 제거합니다.
clear(): Set에서 모든 요소를 ​​제거합니다.
size: Set의 요소 수를 반환합니다.
forEach(콜백): Set의 각 값에 대해 제공된 함수를 한 번씩 실행합니다.

  1. JavaScript Map: JavaScript의 Map은 키-값 쌍을 저장하는 내장 객체입니다. 일반 JavaScript 객체와 달리 지도에서는 ​​모든 데이터 유형(객체, 함수, 문자열 및 숫자와 같은 기본 유형 포함)의 키를 사용할 수 있습니다. 또한 지도는 키의 삽입 순서를 유지하므로 순서가 중요한 시나리오에서 유용합니다.

지도의 기본 방법 :

set(key, value): 맵에 지정된 키와 값을 가진 요소를 추가하거나 업데이트합니다.
get(key): 지정된 키와 연관된 값을 검색합니다.
has(key): 맵에 키가 포함되어 있는지 확인합니다.
delete(key): 지정된 키와 연관된 요소를 제거합니다.
clear(): 맵에서 모든 요소를 ​​제거합니다.
size: 맵의 키-값 쌍 수를 반환합니다.
forEach(콜백): 맵의 각 키-값 쌍에 대해 제공된 함수를 한 번씩 실행합니다.
키(): 맵의 모든 키를 포함하는 반복자 객체를 반환합니다.
값(): 맵의 모든 값을 포함하는 반복자 객체를 반환합니다.
항목(): [키, 값] 쌍의 배열을 포함하는 반복자 객체를 반환합니다.

  1. Fetch API: Fetch API를 사용하면 브라우저에서 웹 서버에 비동기 요청을 할 수 있습니다. 요청이 있을 때마다 Promise를 반환한 후 요청 응답을 검색하는 데 사용됩니다.

  2. 가져오기/내보내기 :

모듈: JavaScript에서 모듈은 재사용하려는 코드가 포함된 파일입니다. 모든 것을 하나의 파일에 담는 대신 코드를 별도의 파일로 분할한 다음 필요한 것을 가져올 수 있습니다. 이를 통해 코드를 깔끔하고 체계적이며 유지 관리하기 쉽게 유지합니다.

가져오기: 다른 모듈의 기능을 현재 파일로 가져오는 방법입니다.
내보내기: 한 모듈의 변수, 함수, 클래스 또는 개체를 다른 모듈에서 사용할 수 있도록 만드는 방법입니다.

  1. 순수 함수, 부작용, 상태 돌연변이 및 이벤트 전파:

  2. 재귀:
    재귀는 문제를 해결하기 위해 함수가 자신을 호출하는 기본적인 프로그래밍 개념입니다. 재귀는 문제를 더 작고 유사한 하위 문제로 나눌 수 있을 때 자주 사용됩니다. JavaScript에서 재귀는 트리 탐색, 퍼즐 해결 등과 같은 작업에 유용합니다.

주요 개념:

기본 사례: 재귀를 중지하는 조건입니다. 기본 사례가 없으면 재귀는 무한 함수 호출로 이어져 스택 오버플로 오류가 발생할 수 있습니다.
재귀 사례: 함수가 문제의 더 작거나 간단한 버전으로 자신을 호출하는 재귀 부분입니다.

  1. 적용, 호출 및 바인딩 방법:

  2. 창 방법:
    경고(), 확인(), 프롬프트(), setTimeout(), setInterval(),clearTimeout(),clearInterval(),open(),close(),requestAnimationFrame().

  3. 마우스 이벤트:
    click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, contextmenu.

  4. 키보드 이벤트:
    키다운, 키누름, 키업.

  5. 양식 이벤트:
    제출, 변경, 초점, 흐림, 입력, 재설정, 선택, 키누름, 키다운, 키업.

  6. 디버깅:

  7. CORS(교차 출처 리소스 공유):

  8. Web Workers: 백그라운드 스레드에서 스크립트를 실행하는 메커니즘으로, JavaScript가 메인 스레드를 차단하지 않고 계산량이 많은 작업을 수행할 수 있도록 합니다.

  9. 서비스 워커: 브라우저 백그라운드에서 실행되어 푸시 알림, 백그라운드 동기화, 오프라인 기능 캐싱과 같은 기능을 활성화하는 스크립트입니다.

  10. 지연 로딩 또는 무한 스크롤) :

지연 로딩과 무한 스크롤은 특히 대용량 데이터나 미디어(예: 이미지, 목록, 기사)를 처리할 때 웹 애플리케이션의 성능과 사용자 경험을 향상시키는 데 일반적으로 사용되는 두 가지 기술입니다.

지연 로딩은 필요할 때만 리소스(예: 이미지, 스크립트, 비디오 또는 콘텐츠)를 로드하는 웹 개발의 디자인 패턴입니다.
지연 로딩의 주요 목표는 처음에 로드되는 리소스 수를 줄여 웹페이지의 초기 로딩 시간을 향상시키는 것입니다.

무한 스크롤은 사용자가 페이지를 아래로 스크롤할 때 일반적으로 페이지 매김 없이 더 많은 콘텐츠를 자동으로 로드하는 기술입니다. 이는 소셜 미디어 플랫폼, 뉴스 사이트 및 대규모 데이터 세트를 표시해야 하는 모든 웹 애플리케이션(예: Instagram, Twitter, Facebook)에서 널리 사용됩니다.

76: 프로그레시브 웹 앱(PWA): 오프라인에서 작동하고 푸시 알림을 제공하며 네이티브와 유사한 성능을 제공하는 웹 애플리케이션을 구축합니다(서비스 워커 및 기타 브라우저 API를 통해).

  1. 서버 전송 이벤트 : 서버 전송 이벤트(SSE)는 단일 HTTP 연결을 통해 서버에서 클라이언트로 실시간 업데이트를 가능하게 하는 간단하고 효율적인 기술입니다.

78.엄격 모드: 엄격 모드는 오류와 문제가 있는 기능을 방지하는 JavaScript의 기능입니다.

  1. 보안: (JavaScript 개념은 아니지만 알아두는 것이 중요함)

교차 사이트 스크립팅(XSS)
사이트 간 요청 위조(CSRF)
콘텐츠 보안 정책(CSP)
CORS(교차 출처 리소스 공유)
JWT(JSON 웹 토큰)

  1. TDZ(Temporal Dead Zone): 실행 컨텍스트에서 변수 생성부터 초기화까지의 시간 간격을 나타내는 용어입니다. 이 시간 동안 변수는 존재하지만 액세스할 수 없습니다. 그렇게 시도하면 ReferenceError가 발생합니다.

TDZ는 let 및 const를 사용하여 선언된 변수에 대해 발생하지만 var 선언은 undefine으로 끌어올려지고 초기화되기 때문에 var에는 발생하지 않습니다.

그렇습니다 여러분.

JavaScript나 프로그래밍 언어를 배우는 것은 처음에는 부담스러울 수 있습니다. 처음에 주제를 이해하지 못하더라도 전혀 괜찮습니다! 누구도 하루아침에 전문가가 될 수 없습니다. 핵심은 일관성, 실천, 끈기입니다.

모든 개발자는 기본부터 시작했다는 점을 기억하세요. 특히 초보자라면 시간을 내어 각 주제를 철저하게 이해하세요. 프로세스를 서두르지 말고, 숙달해야 할 개념의 수가 많다고 해서 낙심하지 마십시오. 계속 연습하시면 점차적으로 효과가 나타나기 시작할 것입니다.

인내심을 갖고, 호기심을 갖고, 가장 중요한 것은 계속 코딩하는 것입니다!

시간을 내어 제 블로그를 읽어주셔서 감사합니다! 도움이 되고 유익한 정보가 되었기를 바랍니다. 혹시 중요한 주제나 컨셉을 놓쳤다면 진심으로 사과드립니다. 질문이나 제안 사항이 있으면 언제든지 의견을 남기거나 연락해 주세요. 여러분의 피드백은 언제나 감사합니다!

이 내용이 도움이 되었다면 박수 치는 것도 잊지 마세요! ?

위 내용은 완전한 자바스크립트 - 기초부터 고급까지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.