나디아 성장 일기

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

📌 기본값 매개변수(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) `?.`?. : `?.` 앞의 평가 대상이 undefined /null이면(값이 없으면) 평가를 멈추고 undefined 반환중첩 객체 내에 위치한 속성 값에 안전하게 접근`?.` 앞 평가 대상에만 동작⭕, 확장❌`?.` 앞의 변수는 꼭 선언되어 있어야 한다.  * 변수?.proplet user = null;alert( user?.address ); // undefinedalert( user?.address.street ); // undefined// user?. => user가 null이나 undefined인 경우만 처리// user가 실제 값이 존재하는 경우엔 반드시 user.address 프로퍼티는 있어야 함// 그렇지 않으면 user?.address..