⭐ jqueryjQuery는 클릭 이벤트, 체인지 이벤트 등 웹 페이지 동작의 기능을 조작할 때 브라우저의 영향을 받지 않고 원하는 기능을 제작할 수 있습니다. 브라우저의 버전에 따라 작동하지 않는 코드를 jQuery로 변경해서 사용하면 브라우저 문제 없이 사용할 수 있습니다. https://jquery.com/ jQueryWhat is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API t..
⭐ Gsap웹 화면에 쉽게 사용할 수 있는 강력한 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다.GSAP를 이용해서 멋진 인터랙티브한 웹사이트를 만들 수 있습니다.https://greensock.com/reacthttps://www.npmjs.com/package/gsap gsapGSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, str..
⭐ React 기본 구조HTML : 컴포넌트 방식으로 로딩합니다.CSS : import 방식으로 로딩합니다.Script: 생명주기 함수로 스크립트 작업을 할 수 있습니다. 1. Form 형식 페이지기본 사용 Form 페이지, title, description, form 각각의 컴포넌트로 분리 및 사용App.jsimport React, { Component } from 'react';import './App.css';import './css/basic1.css';import Component1 from './js2/Component1_1';import Component2 from './js2/Component1_2';import Component3 from './js2/Component1_3'; class..
⭐ TODO LIST 1. 단계 1기본 구조 잡기AddTask.jsclass AddTask extends React.Component { render() { let inputStyle = { marginTop : 20, padding: "0px 10px", width: 125, lineHeight: "32px", fontSize : 14, border: "1px solid #ccc" }; let buttonStyle = { margin: "20px 0px 0px 5px", padding: 10, ..
⭐ Create React App컴포넌트 매핑 이해하기1. 단계 1src/DataComponent.jsclass DataComponent extends React.Component { render() { let ulStyle = { marginTop : 15 } let liStyle = { lineHeight : 1.8 } return ( member1 member2 member3 ) }} 2. 단계 2src/App.js class App extends Com..
⭐ Create React Appmap() 함수로 태그 반환하기 1. 단계 1반복해서 출력해야 하는 태그들을 배열에 넣어두고 map() 함수로 순서대로 나열해 컴포넌트를 return 할 수 있습니다.src/ReturnMap.jsclass ReturnMap extends React.Component { render() { let ulStyle= { marginTop: 15 } let liStyle = { lineHeight: 1.8 } let forArray = [ React, 18.2.0, Array Map ]; r..
⭐ Create React App 1. state 정의 하기App.jsimport React, { Component } from 'react';import SetState from './js/14_setState';import './App.css'; class App extends Component { render(){ return ( React Example ); } }export default App;SetState.jsimport React, { Component } from 'react';import ReactDOM from 'react-dom/client';con..
⭐ 생명주기 함수 이해하기컴포넌트의 정보를 보여주는 도구를 설치 -> 크롬 브라우저에서 해당 URL 접속https://chrome.google.com/webstore Chrome Web Store브라우저에 새로운 기능을 추가하고 탐색 환경을 맞춤설정합니다.chromewebstore.google.comReact Developer Tool 검색 및 [Chrome에 추가] 버튼을 눌러 확장 프로그램을 설치React 개발상에서의 컴포넌트를 보고 싶을 때, [Components]라는 탭이 앞에서 설치한 확장 프로그램에 의해 개발자 도구에 추가되어 있습니다.실제 태그를 보고 싶을 때는 [Elements] 탭을 쓰면 되지만, React 코드를 분석할 때는 [Components] 탭을 쓰면 컴포넌트들을 볼 수 있습니다..
