주니어 개발자 블로그

DOM이란? DOM은 "Document Object Model"의 약자로, HTML이나 XML 문서를 프로그래밍 언어가 이해하고 조작할 수 있는 객체로 표현하는 방법을 제공하는 인터페이스입니다. 간단히 말해서, 웹 페이지의 구조와 내용을 프로그래밍적으로 조작할 수 있게 해주는 도구라고 생각할 수 있습니다. 여기서 "객체"란 프로그래밍에서 데이터나 기능을 추상화한 것을 의미합니다. DOM은 웹 페이지를 트리 구조로 표현하며, 각 요소는 트리의 노드로 표현됩니다. 각 노드는 객체로 간주되어 해당 노드에 대한 정보나 동작을 조작할 수 있게 해줍니다. 간단한 예시로, 다음과 같은 HTML 코드를 생각해보겠습니다: Hello, World! This is a paragraph. 위의 HTML 코드는 DOM으로 다음..

Promise(프로미스)는 JavaScript에서 비동기 작업을 다룰 때 사용되는 객체입니다. Promise는 세 가지 상태를 가집니다. 대기(pending): 비동기 작업이 아직 완료되지 않은 상태입니다. 이행(fulfilled): 비동기 작업이 성공적으로 완료된 상태입니다. 거부(rejected): 비동기 작업이 실패한 상태입니다. then은 이행된 경우 실행되는 함수, catch는 거부된 경우 실행되는 함수를 등록합니다. const myPromise = new Promise((resolve, reject) => { // 비동기 작업 수행 if (작업이 성공) { resolve('성공한 결과'); } else { reject('실패한 이유'); } }); myPromise.then((result) =..

1. Object.keys() 객체의 속성 이름들을 배열 형태로 반환합니다. const obj = { name: 'Alice', age: 20, gender: 'female' }; const keys = Object.keys(obj); console.log(keys); // ["name", "age", "gender"] 2. Object.values() 객체의 속성 값들을 배열 형태로 반환합니다. const obj = { name: 'Alice', age: 20, gender: 'female' }; const values = Object.values(obj); console.log(values); // ["Alice", 20, "female"] 3. Object.entries() 객체의 속성 이름과 값들..

1. setTimeout() 일정 시간 후에 함수를 실행하도록 예약하는 함수입니다. setTimeout 함수는 실행 시간을 지연시키고 지연 후 함수를 호출하는 비동기 함수입니다. function delayedGreeting() { console.log("Hello, World!"); } // 1초 후에 delayedGreeting 함수가 실행됩니다. setTimeout(delayedGreeting, 1000); 2. setInterval() 일정한 시간 간격으로 함수를 실행하도록 예약하는 함수입니다. setInterval 함수는 실행 시간을 지연시키지 않고, 지정된 시간 간격마다 함수를 호출하는 반복 실행 비동기 함수입니다. let count = 0; function countUp() { count++;..

1. new Date() 현재 날짜와 시간을 나타내는 Date 객체를 반환합니다. const now = new Date(); console.log(now); // 현재 날짜와 시간이 출력됩니다. 2. getDate() 주어진 날짜 객체의 일(day) 부분을 반환합니다. (1 ~ 31 사이의 값을 반환) const now = new Date(); const day = now.getDate(); console.log(day); // 현재 날짜의 일(day)이 출력됩니다. 3. getFullYear() 주어진 날짜 객체의 연도(year) 부분을 반환합니다. const now = new Date(); const year = now.getFullYear(); console.log(year); // 현재 날짜의 연..

1. Math.abs() 주어진 숫자의 절대값을 반환합니다. javascriptCopy code Math.abs(-5); // 5 Math.abs(5); // 5 2. Math.ceil() 주어진 숫자를 올림하여 반환합니다. javascriptCopy code Math.ceil(4.2); // 5 Math.ceil(4.8); // 5 Math.ceil(-4.2); // -4 3. Math.floor() 주어진 숫자를 내림하여 반환합니다. javascriptCopy code Math.floor(4.2); // 4 Math.floor(4.8); // 4 Math.floor(-4.2); // -5 4. Math.round() 주어진 숫자를 반올림하여 반환합니다. javascriptCopy code Math.r..

Number 함수는 JavaScript에서 숫자를 다룰 때 사용하는 내장 함수입니다. 쉽게 이해할 수 있도록 몇 가지 기능을 간단하게 소개해보겠습니다. toFixed() toFixed() 메소드는 소수점 이하의 숫자를 지정된 자릿수까지 반올림하여 문자열로 반환합니다. const num = 3.14159265359; const fixedNum = num.toFixed(2); console.log(fixedNum); // 출력: "3.14" toPrecision() toPrecision() 메소드는 숫자의 길이를 지정된 자릿수까지 유지하며, 필요한 경우 지수 표현으로 변환합니다. 마지막은 반올림으로 됩니다. const num = 1234.56789; const precisionNum = num.toPreci..

JavaScript의 String 객체는 문자열을 다룰 때 사용되는 메서드들을 제공합니다. 쉽게 이해할 수 있도록 몇 가지 기능을 간단하게 소개해보겠습니다. 1. 길이 구하기 - length() 문자열의 길이를 알고 싶을 때 사용합니다. let str = "Hello, world!"; console.log(str.length); // 출력 결과: 13 2. 대문자로 변환 - toUpperCase() 문자열을 모두 대문자로 바꿉니다. let str = "Hello, world!"; console.log(str.toUpperCase()); // 출력 결과: HELLO, WORLD! 3. 소문자로 변환 - toLowerCase() 문자열을 모두 소문자로 바꿉니다. let str = "Hello, world!"..

push() 함수 push() 함수는 배열의 끝에 하나 이상의 요소를 추가하는 함수입니다. 배열.push(요소1, 요소2, ..., 요소N); var fruits = ["사과", "바나나"]; fruits.push("오렌지", "딸기"); 위의 예시에서 fruits 배열은 다음과 같이 변합니다: ["사과", "바나나", "오렌지", "딸기"] pop() 함수 pop() 함수는 배열에서 마지막 요소를 제거하고 해당 요소를 반환하는 함수입니다. 배열.pop(); var fruits = ["사과", "바나나", "오렌지"]; var lastFruit = fruits.pop(); console.log(lastFruit); // "오렌지" console.log(fruits); // ["사과", "바나나"] 위의 ..