나디아 성장 일기

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..

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: 최적화..