자바스크립트

React

React STEP 2 - 프로젝트 구조 분석

⭐ 프로젝트 구조프로젝트의 진입점인 src/index.js 를 살펴보면, import 구문✅ React와 ReactDOM 가져오기✅ CSS 파일(index.css) 가져오기✅ 메인 컴포넌트인 App 가져오기✅ 웹 성능 측정을 위한 reportWebVitals 가져오기 const root = ReactDOM.createRoot(document.getElementById('root')); ✅ ReactDOM.createRoot()를 사용해 React 18+ 방식의 root 생성✅ document.getElementById('root')는 public/index.html에 있는 root.render(  React.StrictMode>    App />  React.StrictMode>)✅ document.g..

React

React STEP 1 - 환경 구성 및 실행

⭐ Reac JS 란사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구특징-> 빠른 업데이트와 렌더링-> Component로 이루어짐⭐ React 환경 구성1. Node.js 설치https://nodejs.org/ Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.orgNode.js 다운로드(LTS) 설치Node.js Setup 설치 진행 -> 따로 설정 할 것 없이 [Next]를 계속 누르고 [Install]cmd창 -> 설치 확인2. VS Code 설치https://code.visualst..

웹페이지

JAVASCRIPT STEP 42 - Template, Event

★ Template String %s, %d, %f etc.. 사용 ex) console.log('이름은 %s이고, 나이는 %d살입니다.', name, age); 문자를 나타내는 형식 //1. 'string' //2. "string" //3. `string` : `(역따옴표, backtick, backquote) 형식 ` 문구 입력 ${변수명}` let message = `이름은 ${name}이고, 나이는 ${age}입니다. 만 나이로${age -1}살입니다. 현재 시각은 ${new Date()} 입니다.`; alert(message); ★ Event 이벤트 버블링(Event Bubbling) vs 이벤트 터널링(Event Tunneling, 이벤트 캡쳐링(Event Capturing) 자바스크립트는 기..