개발노트

JavaScript를 쓰다 보면 객체를 복사하거나, 병합하거나, 일부 속성만 바꾸고 싶을 때가 많다.이때 아주 간단하고 강력하게 사용할 수 있는 문법이 바로 객체 확장 문법(spread syntax) 이다. Spread 문법이란?객체 앞에 ...을 붙이면, 해당 객체의 속성들을 펼쳐서 복사하거나 병합할 수 있다.ES6 이후부터 지원된다. 1. 객체 복사 (Spread)const user = { name: 'Tom', age: 30 };const newUser = { ...user };console.log(newUser); // { name: 'Tom', age: 30 }...user는 user 객체의 모든 키-값을 펼쳐서 새로운 객체를 만든다. 2. 객체 병합 (Spread) const user = {..

🎯 JavaScript 이벤트 위임(Event Delegation)이란?프론트엔드 개발을 하다 보면 버튼이나 리스트 아이템 등 여러 개의 요소에 클릭 이벤트를 걸어야 할 때가 많습니다.이때, 각 요소마다 이벤트 리스너를 하나씩 다는 건 비효율적일 수 있어요.바로 이럴 때 유용한 패턴이 이벤트 위임(Event Delegation) 입니다! 👀 이벤트 위임이란?이벤트 위임은 하위 요소에서 발생한 이벤트를 상위 요소에서 처리하는 방식입니다.DOM의 이벤트 버블링(bubbling) 특성을 활용하여, 하위 요소에 직접 이벤트를 달지 않고, 공통 부모 요소에 이벤트를 위임(delegate) 해서 처리하는 것이죠. 📦 왜 써야 할까? (장점)1. 성능 개선→ 수십 개의 요소에 각각 이벤트를 등록하는 대신, 단 ..

- Auto Rename Tag : HTML 태그 자동 수정- Color Highlight : 컬러 코드 강조 - CSS Peek : CSS ID와 Class 이름 자동 완성 제공- Error Lens : 에러 옆에 표시- Highlight Matching Tag : 짝을 이루는 닫는 태그 강조 표시- HTML CSS Support- HTML End Tag Labels : 닫는 태그에 ID나 Class 표시- HTML to CSS autocompletion- IntelliSense for CSS class- Prettier - Code formatter : 코드 포멧터

isNaN( value ) : 매개변수가 숫자형식이 아니면 true, 숫자형식이면 false를 반환한다. isNaN( 변수 ) // 숫자면 false // 숫자가 아니면 true let case1 = 123.456; console.log("case1 : " + isNaN(case1)); // case1 : false let case2 = "안녕하세요"; console.log("case2 : " + isNaN(case2)); // case2 : true let case3 = "123"; console.log("case3 : " + isNaN(case3)); // case3 : false let case4 = "123.456"; console.log("case4 : " + isNaN(case4)); // c..

동기 / 비동기 방식 이란? 1. 동기(Synchronous) : 요청한 작업이 끝날때까지 기다리는 방식이다. 요청이 들어오면 순차적으로 작업을 수행하고, 해당 작업이 수행 중이면 다음 작업은 대기한다. 장점 : 설계가 간단하고 직관적이다. 단점: 작업이 끝날때까지 아무것도 못하고 대기해야 한다. 2. 비동기(asynchronous) : 요청한 작업이 완료 되지 않아도 다음 코드를 실행하는 방식이다. A요청이 들어오면 A요청이 끝나지 않더라고 B라는 새로운 요청을 받으며, A요청에 대한 작업이 끝나면 해당 요청을 처리한다. 장점 : 요청한 작업이 끝나지 않아도 다른 작업 수행 가능 단점 : 설계가 복잡하다 1) 비동기를 사용하는 이유는? 자바스크립트는 싱글 스레드 기반의 언어로, 한번에 하나의 작업만 처..

HTML5에서 도입된 data-* 속성은 웹 개발자들에게 웹 페이지의 HTML 요소에 추가 정보를 저장할 수 있는 유연한 방법을 제공합니다. 이러한 사용자 정의 데이터 속성은 JavaScript를 통해 쉽게 접근하고 조작할 수 있으며, CSS에서도 일부 사용 사례에 활용될 수 있습니다. data-* 속성이란? data-* 속성은 HTML 요소에 고유한 정보를 저장하기 위해 설계되었습니다. 이 속성의 이름은 data- 뒤에 사용자가 정의하는 이름으로 구성됩니다. 예를 들어, data-id, data-role 등과 같이 사용할 수 있습니다. 속성 읽기 // HTML 요소에서 data-* 속성에 접근하기 const element = document.querySelector('#myElement'); const..

var let const 변수 재선언 O X X 변수 재할당 O O X 1. var 1-1) 재선언 / 재할당 var test = 'test'; console.log(test); var test = 'javascript'; console.log(test); 같은 변수명으로 선언했으나 오류가 발생하지 않고 각각 다른 값으로 출력된다. (변수 재선언 가능) ⇒ 유연한 변수 선언으로 간단한 테스트에는 적합하나, 코드량이 많아질 경우 변수 파악이 어려움 (이를 보안하기 위해 ES6이후 let / const 변수 선언 방식 추가됨) 2. let 2-1) 재선언 // var -> let 변경 let test = 'test'; console.log(test); let test = 'javascript'; consol..

oninput onchange input, textarea 태그에서만 사용 가능 input, textarea, select 태그에서만 사용 가능 입력 할 때마다 바로바로 데이터를 확인 태그에서 초점(focus)를 잃은 순간에 작동 = 데이터를 입력 하고 다른 곳을 클릭 하면 작동 1. oninput - input / textarea 태그에서 데이터 입력 시에 주로 사용 - 입력할 때마다 바로 데이터 확인 가능 - javascript 이벤트 ( 리스너 ) - 유효성 검사에 주로 사용 HTML 삽입 미리보기할 수 없는 소스 2. onchange - input, textarea, select 태그에서 데이터 입력시에 주로 사용 - 태그 밖의 영역 선택시 작동 HTML 삽입 미리보기할 수 없는 소스 https:..