나디아 성장 일기

📌 className : 요소의 클래 값을 읽거나 쓸 수 있는 프로퍼티 클래스 이름을 문자열로 직접 조작 기존 클래스 이름을 새 문자열로 덮어쓰기 가능  클래스 전체를 문자열 형태로 반환 클래스 전체를 관리 // HTMLHello, world!Change Class Namefunction changeClassName() { const element = document.getElementById('myElement'); element.className = 'new-class another-class'; // 기존 클래스가 모두 제거되고 새로운 클래스만 적용}  📌 classList : 요소의 클래스를 조작하는데 사용 요소의 클래스 목록에 접근 클래스 리스트를 배열처럼 다룰 수 있다..

console.log(): 메시지와 변수의 값을 콘솔에 출력let user = 'Alice';console.log('Hello,', user); // 출력: Hello, Alice   console.clear(): 콘솔의 내용을 지움console.log('This will be cleared');console.clear(); // 콘솔이 비워집니다.console.log('Console has been cleared');   console.assert(condition, message) : 조건이 false일 때만 메시지를 출력 반드시 === 이후의 값을 반환하지 않으면 에러 뜨도록 테스트= TDD (Test Driven Development)console.assert(rem('25px') === '1...

✅ JavaScript 파일 (.js) : JavaScript 파일의 표준 확장자 웹 브라우저 또는 Node.js 환경에서 실행될 수 있다. commonjs와 ecmascript 모듈 시스템 모두를 사용할 수 있다.  ✅ CommonJS 모듈 파일 (.cjs): CommonJS 모듈 시스템을 사용하는 자바스크립트 파일의 확장자 모듈을 require() 함수로 가져오고, module.exports 또는 exports로 내보낸다. 웹 브라우저 환경에서는 기본적으로 지원되지 않으며, 브라우저에서는 Webpack, Browserify 같은 도구를 통해 변환해야 한다. 1.  type="commonjs" + 확장자 js { "type": "commonjs",}  const liveServer = requir..

📌 드래그(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..

구조 분해 할당(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..