나디아 성장 일기

📌 React 컴포넌트 : 사용자 인터페이스(UI)를 구성하는 부품 재사용 매커니즘(클래스 또는 함수)를 사용하여 리액트 요소를 반환하는 것 컴포넌트 명웹 컴포넌트: 케밥 케이스(kebab-case) 리액트 컴포넌트: 파스칼 케이스(CamelCase)    ✅ 컴포넌트 속성(Props) : 컴포넌트에 전달되는 입력값 props는 항상 객체, 읽기 전용컴포넌트를 다양하게 재사용 할 수 있게 한다. 컴포넌트에 전달된 속성에 따라 마크업을 동적으로 생성 가능 함수형 컴포넌트 props props를 매개변수와 인자로 받음function Greeting(props) { return Hello, {props.name}!;}  클래스형 컴포넌트 props props를 this로 접근class NumberList ..

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

Rocks!   - HTML: Hypertext Markup Language | MDN" data-og-description="HTML 요소는 페이지의 스크립트 유형을 지원하지 않거나, 브라우저가 스크립트를 비활성화한 경우 보여줄 HTML 구획을 정의합니다." data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Web/HTML/Element/noscript" data-og-url="https://developer.mozilla.org/ko/docs/Web/HTML/Element/noscript" data-og-image="https://scrap.kakaocdn.net/dn/bojftm..

📌 React : React 애플리케이션을 정의하고 구성하는 데 필요한 주요 기능과 API를 제공 React  컴포넌트 정의 React 의 핵심 기능(상태 관리, 생명주기 메서드 및 Context API) 제공 JSX와 컴포넌트의 선언 처리    📌 React DOM : React 애플리케이션을 실제 DOM에 렌더링하는 데 필요한 기능을 제공 브라우저의 DOM과 상호작용을 담당 DOM에 변경 사항을 적용      ✅ React.createElement() : React 요소 생성 createElement(type, props, ...children)- type: 생성할 요소의 타입(HTML 태그 이름, 컴포넌트 등)- props: 요소에 대한 속성(properties) - children: 요소의..

📌 DOM(실제 문서 객체 모델) : HTML 코드를 웹 브라우저가 해석해서 생성한 객체 모델 🟰 HTML markup 상속되는 조상이 많아서 복잡하다. 👉 유지보수 비용 많이 듬// 부모(상위) 요소const figureElement = document.createElement('figure');// 자식(하위) 요소const figcaptionElement = document.createElement('figcaption');// 요소 간 관계 형성figureElement.append(figcaptionElement);// figure 객체의 children에 figcation이 생김console.dir(figureElement); // figure 객체// 렌더링const actualDomEl..

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