나디아 성장 일기

📌 JSX(JavaScript XML): JavaScript 파일에서 HTML과 비슷한 마크업을 작성할 수 있는 함수 JavaScript를 확장한 문법JSX는 함수⭕ (HTML ❌❌❌)웹 표준이 아니다 ❌ (브라우저에서 해석 불가)  * 템플릿 리터럴을 JSX 대신 사용하지 않는 이유템플릿 리터럴은 긴 DSL을 내장하는 데 잘 작동하지만, 내장된 ECMAScript 표현식과 식별자 범위를 사용할 때 문법적으로 혼잡하다. 📌 JSX 문법   ✅ 멀티 라인(Multi-line)  ⏩ JSX 구문은 괄호() 안에 감싸서 사용한다. function WhatIsJSX() { return ( JSX란? JSX를 사용하면 React Components 내부에서 HTM..

05. 반응 속도 테스트반응 속도 테스트 github  반응 속도 테스트 📌화면 UI 클래스: 대기 화면, 준비 화면, 측정 화면 등 다양한 클래스 준비 후 변경텍스트 변경: 상황에 따라 텍스트 내용 변경타이머: 랜덤하게 화면 UI를 변경 구현리액트 공부 때문에 스타일링에 신경을 많이 쓰지 못했다.setTimeout()과 Math 메서드들이 낯설었는데 이번에 써보면서 꽤 익숙해진 것 같다.   프로젝트 목표 및 달성✊UI ✅ 여러 클래스 준비 후 상황마다 클래스 변경하기자바스크립트 ✅ 타이머 API 사용하기 ✅ 템플릿 리터럴하기 ✅ 랜덤 숫자 사용하기    순서도💻

📌 React 설치 ✅ CDN 방식  ✅ ESM 방식import React from 'https://esm.sh/react';import ReactDOM from 'https://esm.sh/react-dom';  📌 React && Vite 설치확장자Web 표준에서는 확장자 필수(.js, .jsx 등)Vite는 확장자 필요 X 📍 Vite 오토 스캐폴딩pnpm create vite@버전 pnpm create vite@latest --template react- 타입 스크립트를 사용하는 템플릿을 해당 폴더에 만드는 명령어pnpm create vite@latest (learning-react) -t reat-ts   ✨ 배포할 땐 배포용 모듈을, 개발할 땐 개발용 모듈을 사용해야 함    ✨ reac..

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