코딩이 즐겁다

배열 요소 추가 (Add) push() : 배열 끝에 추가 unshift() : 배열 앞에 추가 splice() : 특정 위치에 추가 전개 연산자(...)  : 새로운 배열 추가 배열 요소 삭제 (Remove) pop() : 배열 끝 요소 삭제 shift() : 배열 앞 요소 삭제 splice() : 특정 위치 요소 삭제 filter() : 조건을 만족하는 요소만 남기기 배열 요소 교체 (Replace) 인덱스로 직접 변경 splice() 사용 map() : 특정 요소만 교체 (새 배열 반환)  배열 요소 추가 (Add)배열에 요소를 추가하는 방법에는 push(), unshift(), splice(), 전개 연산자(...) 등이 있습니다.push() : 배열 끝에 추가✅ 예제 코드:let arr = [1..

삼항 연산자의 기본 문법 삼항 연산자 vs if...else 비교 활용 예제 짝수/홀수 구별 예제 로그인 상태 확인 예제 할인 적용 예제 (삼항 연산자와 함수) 객체 속성 선택 예제 && 연산자로 값 반환 예제 || 연산자로 기본값 설정 예제 삼항 연산자와 JSX (React) 장점과 단점  삼항 연산자는 if...else 문을 간결하게 표현할 수 있는 조건 연산자입니다. 이름 그대로 세 개의 피연산자를 가지기 때문에 삼항(Ternary) 연산자라고 불립니다.  삼항 연산자의 기본 문법조건식 ? 참일_경우_값 : 거짓일_경우_값;조건식이 true이면 참일_경우_값이 실행됨.조건식이 false이면 거짓일_경우_값이 실행됨.  삼항 연산자 vs if...else 비교삼항 연산자는 if...else를 더 짧게..

동기(Synchronous)란? 동기 특징 비동기(Asynchronous)란? 비동기 특징 동기 vs 비동기 비교 요약 정리  동기(Synchronous)란?동기 방식은 작업이 순차적으로 실행되는 방식입니다. 즉, 하나의 작업이 끝나야만 다음 작업이 실행될 수 있습니다.💡 동기 특징코드가 위에서 아래로 차례대로 실행됨.하나의 작업이 끝나야 다음 작업을 실행.실행 순서가 보장됨 (예측하기 쉬움).실행 시간이 긴 작업이 있으면 전체 코드 실행이 멈춤 (블로킹 발생).✅ 예제 코드:console.log("1. 아침 식사 준비");console.log("2. 밥 먹기");console.log("3. 설거지 하기");🎯 실행 결과:1. 아침 식사 준비2. 밥 먹기3. 설거지 하기순차적으로 실행되므로 실행 순서..

Math.round() 반올림 Math.ceil() 올림 Math.floor() 내림 Math.trunc() 버림 소수점 자릿수 반올림, 올림, 내림, 버림 하는 방법 toFixed(n)을 활용한 방법 Math.round()로 소수점 n번째 자리에서 반올림 Math.ceil()로 소수점 n번째 자리에서 올림 Math.floor()로 소수점 n번째 자리에서 내림 Math.trunc()로 소수점 n번째 자리에서 버림  JavaScript에서는 Math 객체를 사용하여 소수점 처리를 할 수 있습니다.  Math.round() 반올림Math.round()는 값을 소수점 첫째 자리에서 반올림하여 정수로 변환합니다.✅ 예제 코드: 소수점 이하가 0.5 이상이면 올림, 0.5 미만이면 내림console.log(Mat..

Date 객체로 날짜 비교하기 getTime을 사용한 비교하기 날짜 차이 계산하기 특정 날짜가 오늘인지 확인하기 날짜 정렬 (배열 정렬) 날짜 포맷 변환 (YYYY-MM-DD)  날짜 비교는 주로 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보다 이후 ..

HTML 태그란? 기본 문법 태그 주요 속성 사용 예제 기본 링크 예제 새 창(탭)에서 열기 (target="_blank") 이메일/전화번호 링크 파일 다운로드 링크 이미지 링크 페이지 내부 이동 (앵커 링크) 버튼 스타일의 링크 (CSS 활용) 태그 사용 시 주의 사항  HTML 태그란?HTML 태그는 "하이퍼링크(hyperlink)"를 생성하는 태그입니다. 웹페이지에서 다른 페이지, 파일, 이메일, 전화번호 등으로 이동할 때 사용됩니다.  기본 문법텍스트 또는 이미지href 속성: 이동할 URL을 지정하는 필수 속성입니다. 태그 안에는 텍스트 또는 이미지를 넣을 수 있습니다.  태그 주요 속성속성설명href이동할 링크 주소target링크 열기 방식 지정rel보안 및 SEO 관련 관계 설정down..

$(document).ready() vs window.onload 차이점 실행 순서 예제 $(document).ready() vs window.onload 실행 흐름 비교 웹 페이지 로딩 과정 언제 사용해야 할까? window.onload가 더 적합한 경우 $(document).ready()가 더 적합한 경우 사용 TIP   $(document).ready() vs window.onload 차이점구분$(document).ready()window.onload실행 시점DOM(Document Object Model)이 완전히 로드되면 실행페이지의 모든 리소스(HTML, CSS, 이미지, 스크립트 등)가 모두 로드된 후 실행속도빠름 (HTML만 로드되면 실행)상대적으로 느림 (이미지, 스타일시트 등 모든 요소 ..

$(document).ready()란? 기본 사용법 왜 $(document).ready()가 필요할까? $(document).ready()는 중복 실행 가능한가? $(document).ready() 없이 사용하는 방법  $(document).ready()란?$(document).ready()는 HTML 문서가 완전히 로드되고 DOM이 준비된 후 실행되는 이벤트입니다. 즉, 웹 페이지의 요소들이 모두 불러와진 뒤에 JavaScript 코드를 실행할 수 있도록 도와줍니다.  기본 사용법$(document).ready(function() { // 실행할 코드}); ✅ 간략하게 줄여서 사용하는 방법:$(function() { // 실행할 코드});  왜 $(document).ready()가 필요할까?..

기본 사용법 on() 메서드를 사용한 이벤트 바인딩 dblclick 이벤트 제거 (off()) 기본 동작 막기 (preventDefault()) 이벤트 전파 막기 (stopPropagation()) this 키워드 활용 클릭 이벤트 한 번만 실행하기 (one()) dblclick() 메서드를 사용하여 강제 클릭  dblclick 이벤트는 사용자가 요소를 더블 클릭(빠르게 두 번 클릭) 했을 때 실행되는 이벤트입니다. 주로 특정 동작을 빠르게 실행하거나, 한 번의 클릭과 구분되는 기능을 만들 때 사용됩니다.  기본 사용법$(selector).dblclick(function() { // 실행할 코드});✅ 버튼 더블 클릭 시 알림창 띄우는 예제 코드:$("#btn").dblclick(function()..

기본 사용법 on() 메서드를 사용한 이벤트 바인딩 클릭 이벤트 제거 (off()) 기본 동작 막기 (preventDefault()) 이벤트 전파 막기 (stopPropagation()) this 키워드 활용하기 클릭 이벤트 한 번만 실행하기 (one()) .click() 메서드를 사용하여 강제 클릭   jQuery의 click 이벤트는 사용자가 요소를 클릭했을 때 실행되는 이벤트입니다. 클릭 이벤트를 활용하면 버튼, 링크, 이미지 등 다양한 요소에 대한 사용자 인터랙션을 쉽게 구현할 수 있습니다.  기본 사용법$(selector).click(function() { // 실행할 코드});✅ 버튼 클릭 시 알림창 띄우는 예제 코드:$("#btn").click(function() { alert("..