코딩이 즐겁다

[Javascript] Array 요소 추가, 삭제, 수정하는 방법 갓벽 가이드

코즐 — Thu, 20 Mar 2025 14:12:12 +0900

배열 요소 추가 (Add)

배열에 요소를 추가하는 방법에는 push(), unshift(), splice(), 전개 연산자(...) 등이 있습니다.

push() : 배열 끝에 추가

✅ 예제 코드:

let arr = [1, 2, 3];
arr.push(4);  // [1, 2, 3, 4]

배열의 끝에 새로운 요소를 추가합니다.

unshift() : 배열 앞에 추가

✅ 예제 코드:

let arr = [2, 3, 4];
arr.unshift(1);  // [1, 2, 3, 4]

배열의 앞에 새로운 요소를 추가합니다.

splice() : 특정 위치에 추가

✅ 예제 코드:

let arr = [1, 3, 4];
arr.splice(1, 0, 2);  // [1, 2, 3, 4]

splice(삽입할 인덱스, 삭제할 개수, 추가할 요소들)

위 코드에서 splice(1, 0, 2)는 인덱스 1에 "2"를 추가하고 기존 요소를 밀어냅니다.

전개 연산자(...) : 새로운 배열 추가

✅ 예제 코드:

let arr = [1, 2, 3];
let newArr = [...arr, 4];  // [1, 2, 3, 4]

원본 배열을 수정하지 않고 새로운 배열을 생성하여 요소를 추가할 때 유용합니다.

배열 요소 삭제 (Remove)

배열 요소를 삭제하는 방법에는 pop(), shift(), splice(), filter() 등이 있습니다.

pop() : 배열 끝 요소 삭제

✅ 예제 코드:

let arr = [1, 2, 3];
arr.pop();  // [1, 2]

배열의 마지막 요소를 제거합니다.

shift() : 배열 앞 요소 삭제

✅ 예제 코드:

let arr = [1, 2, 3];
arr.shift();  // [2, 3]

배열의 첫 번째 요소를 제거합니다.

splice() : 특정 위치 요소 삭제

✅ 예제 코드:

let arr = [1, 2, 3, 4];
arr.splice(1, 1);  // [1, 3, 4]

splice(삭제할 인덱스, 삭제할 개수)

위 코드에서 splice(1, 1)은 인덱스 1의 요소("2")를 삭제합니다.

filter() : 조건을 만족하는 요소만 남기기

✅ 예제 코드:

let arr = [1, 2, 3, 4];
let newArr = arr.filter(num => num !== 2);  // [1, 3, 4]

특정 요소를 삭제하고 싶을 때 유용하며, 원본 배열을 수정하지 않고 새로운 배열을 반환합니다.

배열 요소 교체 (Replace)

배열 요소를 교체하는 방법에는 인덱스를 이용한 대체와 splice()를 사용하는 방법이 있습니다.

인덱스로 직접 변경

✅ 예제 코드:

let arr = [1, 2, 3];
arr[1] = 99;  // [1, 99, 3]

배열의 특정 인덱스 값을 직접 변경할 수 있습니다.

splice() 사용

✅ 예제 코드:

let arr = [1, 2, 3];
arr.splice(1, 1, 99);  // [1, 99, 3]

splice(교체할 인덱스, 삭제할 개수, 추가할 값)

위 코드에서 splice(1, 1, 99)는 인덱스 1의 요소를 "99"로 교체합니다.

map() : 특정 요소만 교체 (새 배열 반환)

✅ 예제 코드:

let arr = [1, 2, 3];
let newArr = arr.map(num => (num === 2 ? 99 : num));  // [1, 99, 3]

특정 조건을 만족하는 요소만 변경한 새 배열을 생성합니다.

[Javascript] 삼항 연산자 사용법에 대한 갓벽 가이드

코즐 — Tue, 18 Mar 2025 22:08:57 +0900

삼항 연산자는 if...else 문을 간결하게 표현할 수 있는 조건 연산자입니다. 이름 그대로 세 개의 피연산자를 가지기 때문에 삼항(Ternary) 연산자라고 불립니다.

삼항 연산자의 기본 문법

조건식 ? 참일_경우_값 : 거짓일_경우_값;

조건식이 true이면 참일_경우_값이 실행됨.
조건식이 false이면 거짓일_경우_값이 실행됨.

삼항 연산자 vs if...else 비교

삼항 연산자는 if...else를 더 짧게 표현할 수 있지만, 가독성도 고려해야 합니다.

✅ if...else 사용 예제:

let age = 20;
let message;

if (age >= 18) {
    message = "성인입니다.";
} else {
    message = "미성년자입니다.";
}

console.log(message); // "성인입니다."

✅ 삼항 연산자 사용 예제:

let age = 20;
let message = (age >= 18) ? "성인입니다." : "미성년자입니다.";

console.log(message); // "성인입니다."

같은 로직을 한 줄로 표현할 수 있어 코드가 짧아지고 직관적입니다.

활용 예제

짝수/홀수 구별 예제

✅ 예제 코드:

let num = 5;
let result = (num % 2 === 0) ? "짝수" : "홀수";

console.log(result); // "홀수"

위 코드에서 num % 2 === 0 조건이 false이므로 홀수가 출력됩니다.

로그인 상태 확인 예제

✅ 예제 코드:

let isLoggedIn = true;
let userMessage = isLoggedIn ? "환영합니다!" : "로그인이 필요합니다.";

console.log(userMessage); // "환영합니다!"

isLoggedIn 값이 true면 "환영합니다!", false면 "로그인이 필요합니다."가 출력됩니다.

할인 적용 예제 (삼항 연산자와 함수)

✅ 예제 코드:

function getDiscount(price) {
    return price > 10000 ? price * 0.9 : price;
}

console.log(getDiscount(15000)); // 13500 (10% 할인)
console.log(getDiscount(8000));  // 8000 (할인 없음)

price가 10,000 초과이면 10% 할인된 가격 반환.

객체 속성 선택 예제

✅ 예제 코드:

let user = { name: "Alice", age: 25 };
let userType = user.age >= 18 ? "성인" : "미성년자";

console.log(userType); // "성인"

객체 데이터를 기반으로 간단한 조건을 빠르게 처리할 수 있습니다.

&& 연산자로 값 반환 예제

✅ 예제 코드:

let isMember = true;
console.log(isMember && "회원 전용 콘텐츠"); 
// "회원 전용 콘텐츠" (isMember가 true이므로 실행됨)

|| 연산자로 기본값 설정 예제

✅ 예제 코드:

let username = "";
let displayName = username || "Guest";

console.log(displayName); // "Guest"

username이 빈 문자열("", falsy 값)이므로 "Guest"가 출력됨.

삼항 연산자와 JSX (React)

✅ 예제 코드:

const isDarkMode = true;

return (
  <div style={{ backgroundColor: isDarkMode ? "black" : "white", color: isDarkMode ? "white" : "black" }}>
    {isDarkMode ? "다크 모드" : "라이트 모드"}
  </div>
);

isDarkMode 값에 따라 배경색과 텍스트가 변경됨.

장점과 단점

✅ 장점:

코드가 간결해짐 → if...else보다 더 짧고 직관적.
변수 선언과 동시에 할당 가능 → 한 줄로 처리 가능.

❌ 단점:

가독성이 떨어질 수 있음 → 중첩되면 if...else보다 이해하기 어려움.
디버깅이 어려울 수 있음 → 한 줄로 작성된 코드에서 오류 발생 시 찾기 어려움.

동기(Synchronous)와 비동기(Asynchronous)의 개념 갓벽 가이드

코즐 — Wed, 12 Mar 2025 07:00:44 +0900

동기(Synchronous)란?

동기 방식은 작업이 순차적으로 실행되는 방식입니다. 즉, 하나의 작업이 끝나야만 다음 작업이 실행될 수 있습니다.

동기 특징

코드가 위에서 아래로 차례대로 실행됨.
하나의 작업이 끝나야 다음 작업을 실행.
실행 순서가 보장됨 (예측하기 쉬움).
실행 시간이 긴 작업이 있으면 전체 코드 실행이 멈춤 (블로킹 발생).

✅ 예제 코드:

console.log("1. 아침 식사 준비");
console.log("2. 밥 먹기");
console.log("3. 설거지 하기");

실행 결과:

1. 아침 식사 준비
2. 밥 먹기
3. 설거지 하기

순차적으로 실행되므로 실행 순서가 보장됩니다.

비동기(Asynchronous)란?

비동기 방식은 작업을 동시에 처리할 수 있는 방식입니다. 즉, 어떤 작업이 끝나길 기다리지 않고 다음 작업을 실행할 수 있습니다.

비동기 특징

하나의 작업이 끝날 때까지 기다리지 않고 다른 작업을 먼저 수행 가능.
실행 순서가 예측되지 않을 수 있음.
주로 setTimeout(), Promise, async/await 같은 비동기 함수 사용.
긴 작업(예: 서버 요청, 파일 읽기)을 효율적으로 처리 가능.

✅ 예제 코드:

console.log("1. 아침 식사 준비");

setTimeout(() => {
    console.log("2. 밥 먹기 (3초 후 실행)");
}, 3000);

console.log("3. 설거지 하기");

실행 결과:

1. 아침 식사 준비
3. 설거지 하기
(3초 후)
2. 밥 먹기 (3초 후 실행)

비동기 방식이므로 "설거지 하기"가 먼저 실행되고, 3초 후에 "밥 먹기"가 실행됩니다.

동기 vs 비동기 비교

비교 항목	동기(Synchronous)	비동기(Asynchronous)
실행 방식	순차적으로 실행	동시에 여러 작업 가능
실행 순서	코드 순서대로 실행됨	실행 순서가 보장되지 않을 수 있음
예제	console.log(), 일반 함수 실행	setTimeout(), fetch(), Promise, async/await
단점	느린 작업이 있으면 전체가 멈춤	순서가 뒤섞일 수 있어 코드 관리가 어려울 수 있음
장점	실행 순서가 예측 가능	긴 작업을 처리할 때 효율적

요약 정리

동기(Synchronous): 순차적으로 실행되며, 하나가 끝나야 다음이 실행됨.
비동기(Asynchronous): 동시에 여러 작업이 진행될 수 있으며, 실행 순서가 예측되지 않을 수 있음.
비동기는 서버 요청, 파일 읽기, 데이터베이스 작업 등 시간이 오래 걸리는 작업에서 유용함.

[Javascript] 소수점 반올림, 올림, 내림, 버림 하는 방법 갓벽 가이드

코즐 — Tue, 11 Mar 2025 14:36:02 +0900

JavaScript에서는 Math 객체를 사용하여 소수점 처리를 할 수 있습니다.

Math.round() 반올림

Math.round()는 값을 소수점 첫째 자리에서 반올림하여 정수로 변환합니다.

✅ 예제 코드: 소수점 이하가 0.5 이상이면 올림, 0.5 미만이면 내림

console.log(Math.round(4.3)); // 4
console.log(Math.round(4.5)); // 5
console.log(Math.round(-4.5)); // -4 (0.5는 양수일 때 올리고, 음수일 때 내림)
console.log(Math.round(-4.6)); // -5

Math.ceil() 올림

Math.ceil()은 값을 소수점 첫째 자리에서 무조건 올림하여 정수로 변환합니다.

✅ 예제 코드: 무조건 큰 정수로 올림

console.log(Math.ceil(4.1)); // 5
console.log(Math.ceil(4.9)); // 5
console.log(Math.ceil(-4.1)); // -4 (음수도 올림, 즉 0에 가까워짐)
console.log(Math.ceil(-4.9)); // -4

Math.floor() 내림

Math.floor()은 값을 소수점 첫째 자리에서 무조건 내림하여 정수로 변환합니다.

✅ 예제 코드: 무조건 작은 정수로 내림

console.log(Math.floor(4.9)); // 4
console.log(Math.floor(4.1)); // 4
console.log(Math.floor(-4.1)); // -5 (음수도 내림, 즉 더 작은 정수)
console.log(Math.floor(-4.9)); // -5

Math.trunc() 버림

Math.trunc()는 값의 소수점을 제거하고 정수 부분만 남김 (소수점 이하를 잘라냄)

✅ 예제 코드: 소수점을 무조건 제거하는 방식, 음수일 때 floor()와 차이 있음

console.log(Math.trunc(4.9)); // 4
console.log(Math.trunc(4.1)); // 4
console.log(Math.trunc(-4.9)); // -4
console.log(Math.trunc(-4.1)); // -4

소수점 자릿수 반올림, 올림, 내림, 버림 하는 방법

소수점 이하 n번째 자리에서 반올림, 올림, 내림, 버림하려면 10^n을 곱한 후 계산한 다음 다시 나눠주면 됩니다.

toFixed(n)을 활용한 방법

toFixed(n)은 n번째 자리까지 반올림한 문자열을 반환합니다.

✅ 예제 코드:

console.log((4.5678).toFixed(2)); // "4.57"
console.log((4.5611).toFixed(2)); // "4.56"
console.log((-4.5678).toFixed(2)); // "-4.57"

toFixed(n)은 문자열을 반환하므로 숫자 계산을 하려면 Number()로 변환하여 사용해야 합니다.

console.log(Number((4.5678).toFixed(2))); // 4.57

Math.round()로 소수점 n번째 자리에서 반올림

✅ 예제 코드:

function roundToN(num, n) {
    return Math.round(num * 10**n) / 10**n;
}

console.log(roundToN(4.5678, 2)); // 4.57
console.log(roundToN(4.5611, 2)); // 4.56

Math.ceil()로 소수점 n번째 자리에서 올림

✅ 예제 코드:

function ceilToN(num, n) {
    return Math.ceil(num * 10**n) / 10**n;
}

console.log(ceilToN(4.561, 2)); // 4.57
console.log(ceilToN(-4.561, 2)); // -4.56

Math.floor()로 소수점 n번째 자리에서 내림

✅ 예제 코드:

function floorToN(num, n) {
    return Math.floor(num * 10**n) / 10**n;
}

console.log(floorToN(4.569, 2)); // 4.56
console.log(floorToN(-4.569, 2)); // -4.57

Math.trunc()로 소수점 n번째 자리에서 버림

✅ 예제 코드:

function truncToN(num, n) {
    return Math.trunc(num * 10**n) / 10**n;
}

console.log(truncToN(4.569, 2)); // 4.56
console.log(truncToN(-4.569, 2)); // -4.56

[Javascript] 날짜 비교하는 방법 갓벽 가이드

코즐 — Tue, 11 Mar 2025 07:00:13 +0900

날짜 비교는 주로 Date 객체를 사용하며, 시간 차이를 계산하거나 특정 날짜가 더 이전인지 이후인지 판별할 수 있습니다.

Date 객체로 날짜 비교하기

JavaScript의 Date 객체를 사용하면 날짜와 시간을 쉽게 비교할 수 있습니다.

✅ 예제 코드:

const date1 = new Date("2024-03-01"); // 2024년 3월 1일
const date2 = new Date("2024-03-05"); // 2024년 3월 5일

if (date1 < date2) {
  console.log("date1이 date2보다 이전 날짜입니다.");
} else if (date1 > date2) {
  console.log("date1이 date2보다 이후 날짜입니다.");
} else {
  console.log("두 날짜가 같습니다.");
}

비교 연산자 (<, >, ===)를 사용하여 날짜 비교 가능
Date 객체는 숫자(타임스탬프)로 변환되므로 크기 비교가 가능
new Date("YYYY-MM-DD") 형식으로 날짜 객체를 생성 가능

getTime을 사용한 비교하기

Date.getTime() 메서드를 사용하면 밀리초(ms) 단위의 숫자로 변환할 수 있습니다.

✅ 예제 코드:

const date1 = new Date("2024-03-01");
const date2 = new Date("2024-03-05");

if (date1.getTime() < date2.getTime()) {
  console.log("date1이 더 이전 날짜입니다.");
}

getTime()은 1970년 1월 1일부터 현재까지의 시간을 밀리초 단위로 반환.
숫자로 변환되므로 비교가 더 정확하고 빠름.

날짜 차이 계산하기

getTime()을 사용하면 두 날짜 간 차이를 밀리초(ms) 단위로 계산할 수 있습니다.

✅ 예제 코드:

const date1 = new Date("2024-03-01");
const date2 = new Date("2024-03-05");

const diffTime = date2.getTime() - date1.getTime(); // 밀리초 차이
const diffDays = diffTime / (1000 * 60 * 60 * 24); // 일(day) 단위로 변환

console.log(`두 날짜의 차이는 ${diffDays}일 입니다.`);

1000 * 60 * 60 * 24로 나누면 일(day) 단위 차이를 얻을 수 있음.
이 방법을 활용하면 특정 날짜가 몇 일 뒤인지 계산 가능.

특정 날짜가 오늘인지 확인하기

✅ 예제 코드:

const today = new Date();
const someDate = new Date("2024-03-06");

const isToday =
  today.toDateString() === someDate.toDateString(); // 날짜 문자열 비교

console.log(isToday ? "오늘 날짜입니다." : "오늘이 아닙니다.");

toDateString()을 사용하면 시간(시, 분, 초)은 무시하고 날짜만 비교 가능

날짜 정렬 (배열 정렬)

배열 안에 날짜가 있을 때 오름차순(과거 → 미래) 또는 내림차순(미래 → 과거) 정렬할 수 있습니다.

✅ 예제 코드:

const dates = [
  new Date("2024-03-10"),
  new Date("2024-03-05"),
  new Date("2024-03-01"),
];

// 오름차순 정렬 (과거 → 미래)
dates.sort((a, b) => a.getTime() - b.getTime());
console.log(dates);

// 내림차순 정렬 (미래 → 과거)
dates.sort((a, b) => b.getTime() - a.getTime());
console.log(dates);

sort()를 사용해 밀리초 단위로 정렬하면 날짜 정렬이 가능

날짜 포맷 변환 (YYYY-MM-DD)

기본적으로 Date 객체를 출력하면 가독성이 좋지 않습니다. 따라서 toISOString() 또는 toLocaleDateString()을 사용해서 보기 좋은 형태로 변환할 수 있습니다.

✅ 예제 코드:

const date = new Date("2024-03-06");

// YYYY-MM-DD 형식으로 변환
const formattedDate = date.toISOString().split("T")[0];
console.log(formattedDate); // "2024-03-06"

// 로컬 날짜 형식으로 변환 (한국 기준)
const localDate = date.toLocaleDateString("ko-KR");
console.log(localDate); // "2024. 3. 6."

toISOString() → "YYYY-MM-DDTHH:mm:ss.sssZ" 형태
.split("T")[0]를 추가하면 YYYY-MM-DD 포맷
toLocaleDateString("ko-KR") → 한국 날짜 형식

HTML <a> 태그 링크 사용법 갓벽 가이드

코즐 — Mon, 10 Mar 2025 17:00:58 +0900

HTML <a> 태그란?

HTML <a> 태그는 "하이퍼링크(hyperlink)"를 생성하는 태그입니다. 웹페이지에서 다른 페이지, 파일, 이메일, 전화번호 등으로 이동할 때 사용됩니다.

기본 문법

<a href="이동할_주소">텍스트 또는 이미지</a>

href 속성: 이동할 URL을 지정하는 필수 속성입니다.
<a> 태그 안에는 텍스트 또는 이미지를 넣을 수 있습니다.

<a>태그 주요 속성

속성	설명
href	이동할 링크 주소
target	링크 열기 방식 지정
rel	보안 및 SEO 관련 관계 설정
download	파일 다운로드 가능
title	마우스 올릴 때 툴팁 표시

사용 예제

기본 링크 예제

✅ 예제 코드:

<a href="https://www.naver.com">네이버로 이동</a>

클릭하면 네이버 홈페이지로 이동합니다.

새 창(탭)에서 열기 (target="_blank")

✅ 예제 코드:

<a href="https://www.google.com" target="_blank">구글 새 창에서 열기</a>

target="_blank": 새 창(새 탭)에서 링크를 엽니다.
보안상 rel="noopener noreferrer"를 같이 쓰는 것이 좋습니다.

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">구글</a>

이메일/전화번호 링크

이메일이나 전화번호를 클릭하면 해당 앱이 실행됩니다.

이메일 보내기:

<a href="mailto:someone@example.com">이메일 보내기</a>

전화 걸기:

<a href="tel:+821012345678">전화 걸기</a>

mailto: 이메일 앱 실행
tel: 스마트폰에서 전화 앱 실행

파일 다운로드 링크

✅ 예제 코드:

<a href="sample.pdf" download>PDF 파일 다운로드</a>

download 속성을 사용하면 클릭 시 파일을 다운로드합니다.

이미지 링크

✅ 예제 코드:

<a href="https://example.com">
  <img src="image.jpg" alt="이미지 링크">
</a>

이미지를 클릭하면 링크로 이동합니다.

페이지 내부 이동 (앵커 링크)

✅ 예제 코드:

<a href="#section2">섹션 2로 이동</a>

<h2 id="section2">여기가 섹션 2</h2>

href="#id명": 같은 페이지 내 특정 위치로 이동
id="section2"인 요소로 스크롤 이동

버튼 스타일의 링크 (CSS 활용)

✅ 예제 코드:

<a href="https://example.com" class="btn">클릭하세요</a>

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: blue;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}
.btn:hover {
  background-color: darkblue;
}

CSS를 적용하여 <a> 태그를 버튼처럼 보이게 변경할 수 있습니다.

<a>태그 사용 시 주의 사항

href="#" 사용 주의 → 아무 동작 없이 페이지 최상단으로 이동할 수 있음. (동작을 막으려면 event.preventDefault(); 사용)
SEO(검색 엔진 최적화) → rel="nofollow"를 사용하면 검색엔진이 링크를 따라가지 않음.
보안 문제 → target="_blank" 사용할 때 rel="noopener noreferrer" 함께 사용.

[jQuery] $(document).ready() vs window.onload 차이 갓벽 가이드

코즐 — Mon, 10 Mar 2025 12:00:51 +0900

$(document).ready() vs window.onload 차이점

구분	$(document).ready()	window.onload
실행 시점	DOM(Document Object Model)이 완전히 로드되면 실행	페이지의 모든 리소스(HTML, CSS, 이미지, 스크립트 등)가 모두 로드된 후 실행
속도	빠름 (HTML만 로드되면 실행)	상대적으로 느림 (이미지, 스타일시트 등 모든 요소 로드 후 실행)
사용 예시	DOM 조작, 이벤트 바인딩	전체 페이지 로드 후 실행해야 하는 작업 (예: 모든 이미지 로딩 후 실행)

실행 순서 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            console.log("$(document).ready() 실행!");
        });

        window.onload = function() {
            console.log("window.onload 실행!");
        };
    </script>
</head>
<body>
    <h1>Hello, jQuery!</h1>
    <img src="https://tistory1.daumcdn.net/tistory/7291623/attach/d3600c083a6348eabb7e915ef051fa8e" alt="이미지 로드 테스트">
</body>
</html>

실행 결과:

이벤트 실행 순서

$(document).ready()가 먼저 실행되고, 이후 이미지까지 모두 로드된 후 window.onload가 실행되는 걸 확인할 수 있습니다.

$(document).ready() vs window.onload 실행 흐름 비교

웹 페이지 로딩 과정

HTML 파일이 다운로드됨.
브라우저가 HTML을 해석하며 DOM을 생성함.
$(document).ready() 실행
CSS, 이미지, 외부 스크립트 파일 로딩이 완료됨.
window.onload 실행! (모든 요소가 로드된 후 실행)

언제 사용해야 할까?

상황	$(document).ready()	window.onload
DOM 조작이 필요할 때	사용 (HTML만 로드되면 실행 가능)	불필요하게 느림
이미지 크기 조절 후 조작할 때	이미지가 아직 로드되지 않을 수 있음	모든 이미지 로드 후 실행 가능
전체 리소스 로드 후 실행할 때	필요 없음	사용 (예: 로딩 화면 제거)
버튼 클릭 이벤트 등록할 때	사용	불필요하게 늦음

window.onload가 더 적합한 경우

✅ 모든 이미지가 로드된 이후에 크기 조정할 때:

window.onload = function() {
    let img = document.getElementById("myImage");
    console.log("이미지 너비:", img.width);
};

window.onload는 모든 이미지가 로드된 후 실행되므로 이미지 크기를 정확하게 측정할 수 있습니다. 반면, $(document).ready()를 사용하면 이미지가 아직 로드되지 않았을 수도 있어서 예상과 다른 크기가 나올 수 있습니다.

$(document).ready()가 더 적합한 경우

✅ 버튼 클릭 이벤트 등록할 때:

$(document).ready(function() {
    $("#btn").click(function() {
        alert("버튼 클릭!");
    });
});

$(document).ready()는 DOM이 준비되면 바로 실행되므로, 버튼 이벤트 등록을 빠르게 할 수 있습니다. 반면, window.onload를 사용하면 불필요하게 늦게 실행될 수 있습니다.

사용 TIP

일반적으로 DOM 조작이 필요한 경우 $(document).ready()를 사용하면 됩니다.
이미지 크기 조정 같은 작업이 필요하다면 window.onload를 사용하는 게 좋습니다.

[jQuery] $(document).ready() 개념과 사용법 갓벽 가이드

코즐 — Mon, 10 Mar 2025 07:00:05 +0900

$(document).ready()란?

$(document).ready()는 HTML 문서가 완전히 로드되고 DOM이 준비된 후 실행되는 이벤트입니다. 즉, 웹 페이지의 요소들이 모두 불러와진 뒤에 JavaScript 코드를 실행할 수 있도록 도와줍니다.

기본 사용법

$(document).ready(function() {
    // 실행할 코드
});

✅ 간략하게 줄여서 사용하는 방법:

$(function() {
    // 실행할 코드
});

왜 $(document).ready()가 필요할까?

만약 $(document).ready() 없이 jQuery 코드를 작성하면, DOM 요소가 아직 로드되기 전에 스크립트가 실행될 수 있습니다. 예를 들어, <script> 태그가 <body>의 <div>보다 먼저 실행되면 jQuery가 요소를 찾지 못할 수도 있습니다.

❌ 잘못된 코드 (아직 DOM이 로드되지 않음)

<!DOCTYPE html>
<html lang="ko">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $("#btn").click(function() {
            alert("버튼 클릭!");
        });
    </script>
</head>
<body>
    <button id="btn">클릭</button>
</body>
</html>

✅ 올바른 코드 ($(document).ready() 사용)

<!DOCTYPE html>
<html lang="ko">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#btn").click(function() {
                alert("버튼 클릭!");
            });
        });
    </script>
</head>
<body>
    <button id="btn">클릭</button>
</body>
</html>

$(document).ready()는 중복 실행 가능한가?

같은 페이지에서 여러 개의 $(document).ready()를 작성하면 순서대로 모두 실행됩니다.

$(document).ready(function() {
    console.log("첫 번째 ready 실행!");
});

$(document).ready(function() {
    console.log("두 번째 ready 실행!");
});

$(document).ready() 없이 사용하는 방법

만약 <script> 태그를 </body> 태그 바로 위에 두면 $(document).ready() 없이도 동작할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="btn">클릭</button>

    <script>
        $("#btn").click(function() {
            alert("버튼 클릭!");
        });
    </script>
</body>
</html>

이렇게 하면 브라우저가 <script>를 실행할 때 이미 DOM이 완전히 로드된 상태이므로 문제없이 작동합니다.

[jQuery] 마우스 더블 클릭 이벤트의 모든 것 갓벽 가이드

코즐 — Sun, 9 Mar 2025 17:08:54 +0900

dblclick 이벤트는 사용자가 요소를 더블 클릭(빠르게 두 번 클릭) 했을 때 실행되는 이벤트입니다. 주로 특정 동작을 빠르게 실행하거나, 한 번의 클릭과 구분되는 기능을 만들 때 사용됩니다.

기본 사용법

$(selector).dblclick(function() {
    // 실행할 코드
});

✅ 버튼 더블 클릭 시 알림창 띄우는 예제 코드:

$("#btn").dblclick(function() {
    alert("버튼이 더블 클릭되었습니다!");
});

이 코드를 실행하면 #btn 버튼을 두 번 빠르게 클릭했을 때 경고창이 뜨게 됩니다.

on() 메서드를 사용한 이벤트 바인딩

동적으로 생성된 요소에도 dblclick 이벤트를 적용하려면 .on() 메서드를 사용해야 합니다.

$(parentSelector).on("dblclick", childSelector, function() {
    // 실행할 코드
});

✅ 동적으로 추가된 버튼에도 더블 클릭 이벤트 적용 예제 코드:

$(document).on("dblclick", ".dynamic-btn", function() {
    alert("동적으로 생성된 버튼이 더블 클릭되었습니다!");
});

이렇게 하면 페이지 로드 후 새로 추가된 .dynamic-btn 요소에도 dblclick 이벤트가 적용됩니다.

dblclick 이벤트 제거 (off())

등록한 dblclick 이벤트를 제거하려면 .off("dblclick")을 사용하면 됩니다.

$(selector).off("dblclick");

✅ 버튼에서 더블 클릭 이벤트 제거하는 예제 코드:

$("#btn").off("dblclick");

이렇게 하면 #btn에 등록된 dblclick 이벤트가 제거되어 더블 클릭해도 반응하지 않습니다.

기본 동작 막기 (preventDefault())

일반적으로 dblclick 이벤트는 기본 동작이 없지만, <a> 태그처럼 기본 동작이 있는 요소에서는 방지할 수 있습니다.

$("a").dblclick(function(event) {
    event.preventDefault(); // 링크 이동 방지
    alert("링크 더블 클릭이 방지되었습니다!");
});

이벤트 전파 막기 (stopPropagation())

dblclick 이벤트가 부모 요소로 전파되는 걸 막으려면 stopPropagation()을 사용하면 됩니다.

$(".child").dblclick(function(event) {
    event.stopPropagation(); // 부모 요소로 이벤트 전달 방지
    alert("자식 요소 더블 클릭!");
});

$(".parent").dblclick(function() {
    alert("부모 요소 더블 클릭!");
});

위 코드에서 .child를 더블 클릭하면 .parent의 dblclick 이벤트는 실행되지 않습니다.

✅ stopPropagation() 이해를 돕는 예제 코드:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
	$(document).ready(function() {
		$(".child").dblclick(function(event) {
		    event.stopPropagation(); // 부모 요소로 이벤트 전달 방지
		    alert("자식 요소 더블 클릭!");
		});

		$(".parent").dblclick(function() {
		    alert("부모 요소 더블 클릭!");
		});
	});
  </script>
</head>
<body>
	<div class="parent" style="width: 200px;height: 200px;background-color:green;">
		<div class="child" style="width: 100px;height: 100px;background-color:yellow;"></div>
	</div>
</body>
</html>

실행 결과:

jquery dblclick stopPropagation example

위의 예제를 실행하면 부모 영역(초록색) 안에 자식 영역(노란색)을 포함하고 있습니다.

stopPropagation() 메서드를 사용하지 않았다면 부모 영역을 더블 클릭했을 경우에는 .parent에 적용되어 있는 더블 클릭 이벤트가 실행되고, 자식 영역을 더블 클릭했을 경우에는 .child에 적용되어 있는 더블 클릭 이벤트가 실행되고 .parent 영역의 더블 클릭 이벤트가 차례대로 실행될 것입니다.

따라서 자식 영역(노란색)을 더블 클릭했을 때 .child의 더블 클릭 이벤트만 실행하고 싶다면 stopPropagtion() 메서드를 사용하면 됩니다.

this 키워드 활용

this를 사용하면 더블 클릭된 요소를 가리킬 수 있습니다.

$(".item").dblclick(function() {
    $(this).css("background-color", "yellow");
});

이렇게 하면 .item 요소를 더블 클릭했을 때 해당 요소의 배경색이 노란색으로 변경됩니다.

클릭 이벤트 한 번만 실행하기 (one())

한 번만 실행되도록 하려면 .one()을 사용할 수 있습니다.

$("#btn").one("dblclick", function() {
    alert("이 버튼은 한 번만 더블 클릭할 수 있습니다!");
});

이렇게 하면 #btn 버튼을 한 번 더블 클릭한 후에는 다시 더블 클릭해도 반응하지 않습니다.

dblclick() 메서드를 사용하여 강제 클릭

dblclick()을 호출하면 실제로 더블 클릭하지 않아도 이벤트를 실행할 수 있습니다.

$("#btn").dblclick();

위 코드를 실행하면 #btn 요소의 dblclick 이벤트가 강제로 실행됩니다.

[jQuery] click 이벤트 활용의 모든 것 갓벽 가이드

코즐 — Sat, 8 Mar 2025 13:36:05 +0900

jQuery의 click 이벤트는 사용자가 요소를 클릭했을 때 실행되는 이벤트입니다. 클릭 이벤트를 활용하면 버튼, 링크, 이미지 등 다양한 요소에 대한 사용자 인터랙션을 쉽게 구현할 수 있습니다.

기본 사용법

$(selector).click(function() {
    // 실행할 코드
});

✅ 버튼 클릭 시 알림창 띄우는 예제 코드:

$("#btn").click(function() {
    alert("버튼이 클릭되었습니다!");
});

on() 메서드를 사용한 이벤트 바인딩

동적으로 생성된 요소에도 이벤트를 적용하려면 .on() 메서드를 사용해야 합니다.

$(parentSelector).on("click", childSelector, function() {
    // 실행할 코드
});

✅ 동적으로 생성된 버튼에 클릭 이벤트 적용하는 예제 코드:

$(document).on("click", ".dynamic-btn", function() {
    alert("동적으로 생성된 버튼이 클릭되었습니다!");
});

클릭 이벤트 제거 (off())

등록한 click 이벤트를 제거하려면 .off("click")을 사용해야 합니다.

$(selector).off("click");

✅ 버튼 클릭 이벤트 제거하는 예제 코드:

$("#btn").off("click");

기본 동작 막기 (preventDefault())

preventDefault()는 <a> 태그처럼 기본적으로 수행되는 동작을 막고 싶을 때 사용합니다.

$("a").click(function(event) {
    event.preventDefault(); // 링크 이동 방지
    alert("링크 클릭이 방지되었습니다!");
});

이벤트 전파 막기 (stopPropagation())

stopPropagation()은 클릭 이벤트가 부모 요소로 전파되는 걸 막아주는 기능을 합니다.

$(".child").click(function(event) {
    event.stopPropagation(); // 부모 요소로 이벤트 전달 방지
    alert("자식 요소 클릭!");
});

$(".parent").click(function() {
    alert("부모 요소 클릭!");
});

✅ stopPropagation() 이해를 돕는 예제 코드:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
	$(document).ready(function() {
		$(".child").click(function(event) {
		    //event.stopPropagation(); // 부모 요소로 이벤트 전달 방지
		    alert("자식 요소 클릭!");
		});

		$(".parent").click(function() {
		    alert("부모 요소 클릭!");
		});
	});
  </script>
</head>
<body>
	<div class="parent" style="width: 200px;height: 200px;background-color:red;">
		<div class="child" style="width: 100px;height: 100px;background-color:blue;"></div>
	</div>
</body>
</html>

실행 결과:

stopPropagation() 메서드 이해를 돕는 출력 예제

위의 예제 코드를 실행하면 부모 요소인 빨간 영역 안에 파란 영역 자식 요소가 포함 되어 있는 형태로 출력이 됩니다.

예를 들어, 빨간색 부분을 클릭하게 되면 부모 영역의 클릭 이벤트만 실행되겠지만 파란색을 클릭하게 되면 자식 영역의 클릭 이벤트가 실행되고 이어서 부모 영역 클릭 이벤트도 실행됩니다. 따라서 부모 영역의 클릭 이벤트는 실행하지 않고 자식 영역의 클릭 이벤트 내용만 실행하고 싶은 경우에 stopPropagation() 메서드를 사용하시면 됩니다.

즉, stopPropagation()을 사용하면 .child를 클릭해도 .parent의 이벤트는 실행되지 않습니다.

this 키워드 활용하기

this를 사용하면 클릭된 요소 자신을 가리킬 수 있습니다.

$(".item").click(function() {
    $(this).css("background-color", "yellow");
});

위의 코드는 .item을 클릭하면 해당 요소의 배경색이 노란색으로 변경됩니다.

클릭 이벤트 한 번만 실행하기 (one())

클릭 이벤트를 한 번만 실행하고 싶으면 .one() 메서드를 사용하면 됩니다.

$("#btn").one("click", function() {
    alert("이 버튼은 한 번만 클릭할 수 있습니다!");
});

이 버튼을 클릭하면 한 번만 실행되고 이후에는 클릭해도 반응하지 않습니다.

.click() 메서드를 사용하여 강제 클릭

클릭 이벤트를 강제로 실행하고 싶을 때 .click()을 호출할 수 있습니다.

$("#btn").click();

이렇게 하면 #btn이 실제로 클릭되지 않아도 클릭 이벤트가 실행됩니다.