나디아 성장 일기

inline-size : 요소의 인라인 방향(문서의 흐름 방향)의 크기 설정 기본적으로 수평 방향    길이 단위 픽셀(px) 퍼센트(%) 등inline-size: 300px; /* 고정 너비 */inline-size: 50%; /* 부모 컨테이너의 너비에 대한 비율 */   min() / max()inline-size: min(100%, 400px);   clamp() : 값의 범위를 제한하는 데 사용 inline-size: clamp(최소값, 중간값, 최대값);너비를 동적으로 조절    fit-content: 요소의 콘텐츠에 맞게 크기를 조정inline-size: fit-content;   min-content: 콘텐츠를 표시하는 데 필요한 최소 크기를 설정inline-size: min-conte..

resize : 사용자가 요소의 크기를 조절할 수 있는 방향을 설정 none: 조절 Xboth: 요소의 너비와 높이 모두 조절 허용horizontal: 요소의 너비 조절 허용 (높이는 조절 X)vertical: 요소의 높이 조절 허용initial: 요소에 적용된 기본 resize 속성 값으로 되돌아감inherit: 부모 요소의 속성 값을 상속.resize-horizontal { resize: horizontal; overflow: auto; border: 1px solid #ccc; padding: 10px;}    resize - CSS: Cascading Style Sheets | MDNThe resize CSS property sets whether an element is resizable..

📌 드래그(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에서 필요한 기초 정보를 세팅하는 곳- 전달 받은 인수를 매개 변수로 받는다.객체를..