React

React

React STEP 3 - 기본 메서드

⭐ React의 기본 사용 메서드 1. React.createElement()태그 구성 요소를 생성하는 메서드 React.createElement( type, [props], [ ... children] ); type : 태그 이름 문자열, React 컴포넌트[props] : React 컴포넌트에 넣어주는 데이터 객체[ ... children] : 자식으로 넣어주는 요소들사용 예시root.render( React.createElement( "h1", null, "Hello React!!" ));실제 렌더링 결과 Hello React

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

Vue.js

Vue.js 3.0 STEP 3 - 이벤트 처리

★ 이벤트 처리 동적 UI는 HTML 요소에서 발생하는 이벤트 처리를 통해 구현되는 경우가 많다. Vue의 이벤트는 HTML, 자바스크립트에서 사용하는 이벤트를 준용해서 사용하기 때문이다. 1. 인라인 이벤트 처리 Vue에서의 이벤트 처리는 아래와 같이 주로 사용한다. v-on:[이벤트 이름]="표현식" 가장 많이 쓰이는 click 이벤트 예 v-on 디렉티브는 @로 줄여 쓸 수도 있다. v-onclick="test($event)" @click="test($event)" 금액 : 입금 출금 계좌 잔고 : {{ balance }} 2. 이벤트 핸들러 메서드 Vue 인스턴스에 등록한 메서드를 이벤트 처리 함수로 연결 이와 같이 복잡한 기능은 메서드를 미리 작성해두고, v-on 디렉티브로 참조해서 이벤트를 수..

Vue.js

Vue.js STEP 1 - 기초 셋팅

★ VSCode 설치 자신의 환경에 맞는 버전과 운영체제에 맞게 다운로드 https://code.visualstudio.com/docs/?dv=win64user Documentation for Visual Studio Code Find out how to set-up and get the most from Visual Studio Code. Optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com ★ Node.js 설치(npm..