HJ

Promise자바스크립트에서 비동기 작업의 결과를 미래의 값으로 표현하는 객체로, 시간이 걸리는 작업이 성공적으로 완료되었는지 또는 실패했는지를 나중에 알려주기 위해 사용한다. 콜백 지옥콜백 지옥은 자바스크립트에서 비동기 작업을 콜백 함수로 계속 중첩해 처리하다 보니 코드가 오른쪽으로 깊게 들여 쓰기 되며 복잡해지고, 흐름을 한눈에 이해하기 어려워지는 문제를 말한다.const promise = new Promise((resolve, reject) => { if(성공){ resolve(결과값) // 작업 성공 시 호출 }else{ reject(에러) // 작업 실패 시 호출 }})promise.then(result => { console.log("성공..

localStorage브라우저가 제공하는 웹 스토리지 기능 중 하나로, 자바스크립트를 통해 키/값 형태의 데이터를 브라우저에 영구적으로 저장할 수 있는 저장소.브라우저별로 약 5MB 내외 저장 제한이 있음문자열만 저장 가능같은 도메인에서만 접근 가능민감한 정보(비밀번호, 토큰 등)는 저장하면 안됨데이터 저장하는 방법localStorage.setItem("key", "value")데이터 불러오는 방법const value = localStorage.getItem("key")데이터 삭제하는 방법 / 모든 데이터 삭제하는 방법localStorage.removeItem("key")localStorage.clear()localStorage를 이용한 테마 변경테마 변경현재 테마: sessionStorage브라우저..

정규식정규식이란?정규 표현식은 문자열에서 특정한 패턴을 찾거나, 올바른 형식인지 검사하거나, 원하는 형태로 치환하기 위해 사용하는 정형화된 표현식이다.정규 표현식의 생성 방식리터럴 방식 : /패턴/옵션생성자 방식 : new RegExp("패턴", "옵션")패턴의 종류a: 문자 aabc: 문자열abc.: 아무 문자 1개[abc]: a 또는 b 또는 c[a-z]: a 부터 z[가-힣]: 한글[0-9]: 숫자[^0-9]: 숫자가 아닌 문자*: 0번 이상+: 1번 이상?: 0 또는 1{n}: 정확히 n번{n,}: n번 이상{n.m}: n~m번^: 문자열 시작$: 문자열 끝\d: 숫자\D: 숫자 아님\w: 문자 또는 숫자 또는 _\W: 문자 또는 숫자 또는 _ 외 문자\s: 공백\S: 공백 아닌 문자g: 전체 ..

BOM (Browser Object Model)BOM이란?자바스크립트가 브라우저 자체를 제어하고 정보를 얻기 위해 사용하는 객체 모델을 말한다.API (Application Programming Interface)서로 다른 프로그램이나 시스템이 데이터를 주고받고 기능을 사용할 수 있도록 연결해주는 중간 통로BOM을 구성하는 4대 객체1. window 객체자바스크립트에서 브라우저 창을 대표하는 최상위 객체로, 전역 범위에서 정의된 변수나 함수, 타이머, 팝업, 브라우저 정보 등 대부분의 기능을 포함하고 있다.HTML 페이지를 로드하면 브라우저는 자동으로 window 객체를 생성하며, 자바스크립트 코드에서 명시적으로 window를 쓰지 않아도 사용할 수 있다.2. location 객체자바스크립트에서 현재 웹..

JavaScript에서 classclass 클래스명 { constructor(매개변수1, 매개변수2, ...) { 속성 정의 } 메서드명(매개변수1, 매개변수2, ...){ 객체가 할 수 있는 동작 정의 }}클래스 기본 구조와 인스턴스 생성클래스는 객체를 만들기 위한 '템플릿'이다. constructor를 통해 초기 속성을 정의하고, 객체가 할 수 있는 동작을 메서드로 정의한다.class Animal { constructor(type) { this.type = type; // 속성 정의 } bark() { console.log(`${this.type} 멍멍!`); // 메서드 정의 } speak() { ..

프로그래밍 방법론1. 절차 지향 프로그래밍코드를 순서대로 실행되는 절차로 구성하는 방식const names = ['김사과', '반하나', '오렌지', '이메론']for(let i=0; i2. 객체 지향 프로그래밍프로그램을 구성할 때 현실 세계의 사물들을 객체로 모델링하여, 객체간의 상호작용을 통해 문제를 해결하는 방식const greeter = { names: ['김사과', '반하나', '오렌지', '이메론'], greetKim: function() { for(let i=0; i3. 함수형 프로그래밍함수 자체를 중심에 두는 프로그래밍 패러다임데이터를 변경하지 않고, 순수 함수를 조합하여 문제를 해결const names = ['김사과', '반하나', '오렌지', '이메론']names..

JavaScript에서 함수의 기본 형태function 함수명(매개변수1, 매개변수2, ...){ 실행할 코드 return 반환값}👉 return을 생략하면 함수는 자동으로 undefined를 반환한다.함수의 작성 방식1. 함수 선언식가장 기본적인 함수 방식코드 어디서든 호출할 수 있다는 특징 (호이스팅 적용)function add(a, b){ return a + b} 💡 호이스팅호이스팅은 자바스크립트가 코드를 실행하기 전에 변수와 함수 선언을 해당 스코프의 최상단으로 끌어올려 처리하는 동작방식이다. 이로 인해 함수 선언문은 코드의 위치와 상관없이 호출할 수 있으며, var로 선언된 변수 또한 선언 자체는 끌어 올려지지만 값은 초기화되지 않아 undefined 상태가 된다.2. 함수 ..