나디아 성장 일기

📌 드래그(drag) 앤 드롭(drop) 이벤트  darggable 속성: HTML 요소가 드래그 가능하도록 설정"true": 드래그 ⭕"false": 드래그 ❌ (기본값) Drag me!  dragstart: 드래그를 시작할 때 발생 document.addEventListener('dragstart', (event) => { console.log('Drag started'); event.dataTransfer.setData('Dragged data');});    drag: 드래그 중에 계속 발생 document.addEventListener('drag', (event) => { console.log('Dragging');});    dragend: 드래그가 끝날 때 발생 document.a..

📌 JSDoc : TypeScript처럼 타입을 지정하는 기능   ✅ JSDoc 사용 설치npm install -g jsdoc  생성jsdoc path/to/your/javascript/files   ✅ JSDoc 문법/** ... */@type: 타입을 참조 @example: 함수 사용 예제를 제공@param: 함수의 매개변수@returns (@return): 함수의 반환값을 설명@typedef: 복잡한 객체 타입을 정의@property: 객체의 속성을 설명 함수 /** * @param {number} a - 첫 번째 숫자. * @param {number} b - 두 번째 숫자. * @returns {number} 두 숫자의 합. * @example * // 예제 사용법 * const result ..

📌 ECMAScript Modules (ESM): JavaScript에서 모듈화를 지원하는 공식 표준모듈 정의 및 가져오기export: 모듈에서 내보내고자 하는 코드를 정의import: 다른 모듈에서 정의된 것들을 가져와 사용정적 분석ESM은 정적으로 분석될 수 있어, 컴파일러나 번들러가 모듈의 의존성을 미리 파악하고 최적화할 수 있다.자동적 모듈화모듈은 기본적으로 엄격 모드(strict mode)로 동작 👉 코드의 안전성과 신뢰성을 높인다.utils 폴더에 아래 유틸리티 함수를 각 파일에 작성하고, 내보내기 구문을 설정utils/├── index.js ├── numberWithComma.js├── removeSpaceHTMLString.js└── shuffle.js   ✨ 모듈화: 코드를 여러 파일..

📌 Class : 객체를 생성하기 위한 템플릿 객체 = 붕어빵, 클래스 = 붕어빵 기계클래스(class)를 사용하면 객체 지향 프로그래밍에서 사용되는 다양한 기능을 자바스크립트에서도 사용할 수 있다.인스턴스(instance): 클래스를 통해 생성된 객체 메서드(method): 클래스 내에 정의된 함수 this: 자기 스스로의 객체   ✅ 생성class 클래스명 { constructor() { ... } method1() { ... } method2() { ... }}클래스명은 항상 대문자로 시작한다.   ⏩ 생성자 메서드 constructor( ) : class의 인스턴스 객체를 생성하고 초기화하는 메서드 class에서 필요한 기초 정보를 세팅하는 곳- 전달 받은 인수를 매개 변수로 받는다.객체를..

📌 기본값 매개변수(default parameters) function 함수명(변수 = 기본값) {                            ...} : 함수를 정의할 때 매개변수의 기본 값을 설정해 놓는 기능 함수 호출 시 인수를 제공하지 않았을 때 기본 값이 자동으로 사용된다.함수 호출 시 평가된다.함수가 호출될 때마다 새 객체가 생성됨   ✨ 변수의 기본값 설정하는 방법 1. 기본 설정 const randomNumber = function(min, max) { if (min === undefined) { min = 0; } if (max === undefined) { max = 10; } return Math.round(Math.random() * (max - mi..

SVG 압축하기  SVGOMG : SVG 파일을 최적화하는 도구 SVGOMG - Optimize and minify SVG imagesOptimize and minify SVG imagessvgomg.net    SVGO : SVG 파일을 최적화하는 오픈 소스 도구 GitHub - svg/svgo: ⚙️ Node.js tool for optimizing SVG files⚙️ Node.js tool for optimizing SVG files. Contribute to svg/svgo development by creating an account on GitHub.github.com  설치 npm install -g svgo사용 svgo input.svg -o output.svg input.svg: 최적화..

구조 분해 할당(destructuring assignment)const [element1, element2] = array; const {element1, element2} = obj; : 객체나 배열을 분해해서 개별 변수에 담을 수 있게 하는 문법객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우 사용 원본 보호⭕ 📌 배열 기존 문법 let arr = ["Bora", "Lee"]; let firstName = arr[0]; let surname = arr[1]; alert(firstName); // Bora alert(surname); // Lee 구조 분해 할당let arr = ["Bora", "Lee"] // 구조 분해 할당 let [firstName, surname] = arr; aler..

옵셔널 체이닝(Optional Chaining):  ?. ?. : 앞의 객체가 null 또는 undefined일 경우, 에러를 발생시키지 않고 undefined 반환객체 속성 값이나 메서드에 안전하게 접근할 수 있도록 돕는 연산자?. 앞 평가 대상에만 동작⭕, 확장❌?. 앞의 변수는 꼭 선언되어 있어야 한다.    * 변수?.proplet user = null;alert( user?.address ); // undefinedalert( user?.address.street ); // undefined// user?. => user가 null이나 undefined인 경우만 처리// user가 실제 값이 존재하는 경우엔 반드시 user.address 프로퍼티는 있어야 함// 그렇지 않으면 user?.addr..

템플릿 리터럴(Template literal): 자바스크립트에서 문자열을 입력하는 문자열 리터럴 `백틱(back-tick)`으로 사용문자열을 멀티 라인(여러 줄)으로 작성 가능 ⭕${보간법} 사용 가능 ⭕변수, 표현식, 연산 등을 문자열 안에 삽입할 수 있다.  * 데이터 + 템플릿 리터럴을 이용한 마크업 String// 데이터 객체const koreanFoods = { caption: "한식 메뉴", rows: [ { headline: "뚝배기 불고기", content: 8000 }, { headline: "스팸치즈볶음밥", content: 7500 }, { headline: "불고기낙지덮밥", content: 9000 }, ],};// 마크업 렌더링 함수function rende..

블록 스코프(Block Scope): 변수의 유효 범위를 블록 단위로 제한{중괄호}로 감싸서 사용{ statement_1; statement_2; ⋮ statement_n;}  var지역 및 전역 변수를 선언하는데 모두 사용블록 스코프(Block Scope) ❌ 블록을 고려하지 않고 현재 함수 또는 전역 스코프 어디에서나 접근할 수 있는 변수를 선언한다.var 변수는 호이스팅(hoisting) 되어 변수 선언이 코드의 최상단으로 끌어올려진다.function example() { if (true) { var x = 1; } console.log(x); // 1}example();======================var x = 1;{ var x = 2;}console.log(x); ..