라이프 사이클 - 수명주기 컴포넌트의 수명은 페이지에 랜더링 되기 전인 준비 과정 -> 페이지에서 사라질 때 끝남 라이프 사이클 메서드 - 클래스 컴포넌트 함수형 컴포넌트 Hooks 기능을 사용하여 처리 Hooks 1) useState 2) useRef 3) useEffect 마운트, 업데이트, 언마운트 1) 마운트: 페이지에 컴포넌트가 나타남 constructor: 컴포넌트 새로 만들 때마다 호출되는 클래자 생성자 메서드 -> getDerivedStateFromProps: props에 있는 값은 state에 넣을 때 사용되는 메서드 -> render: 우리가 준비한 UI를 랜더링하는 메서드 -> componentDidMount: 컴포넌트 웹 브라우저상에 나타난 후 호출되는 메서드 2) 업데이트: 컴포넌..

ref(reference): DOM에 이름달기 1. 클래스형 컴포넌트 1) ref객체 생성 input = React.createRef(); 2) DOM요소 ref속성으로 지정 3) DOM요소 접근 this.input.current 2. 함수형 컴포넌트 1) useRef import import { useRef } from 'react'; 2) ref 객체 const input = useRef(); 3) DOM요소 지정 4) DOM요소 접근 input.current App.js import './App.css'; // import RefInput from './Components/RefInput'; // import EventInputClass from './Components/EventinputClass..

* 컴포넌트 -> 함수형 컴포넌트, 클래스형 컴포넌트 function 이름 () { return ; } const 이름 = () => { return ; } class 이름 extends Component { render() { return() } } * props -> properties를 줄인 표현, 컴포넌트 속성 자식 컴포넌트를 사용하는 부모 컴포넌트에서 설정해서 자식 컴포넌트에게 전달 const App = () => { return 하하하하하 } cosnt MyComponent = (props) => { const name = props.name const age = props.age; const { name, age } = props; return } cosnt MyComponent = ({ n..

* React - 웹 프레임워크 자바스크립트의 라이브러리 중 하나 - 사용자의 인터페이스를 만들기 위해 사용됨 - facebook에서 제공하는 프론트엔드 라이브러리 - 싱글페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용됨 - 웹 / 앱의 View를 개발할 수 있는 라이브러리임 자바스크립트 라이브러리 - 앵귤러, 뷰, 리액트 (하나를 하면 나머지도 금방 할 수 있음) html, css, javascript ---> 앵귤러, 뷰, 리액트 - 옛날 방식 html, css, javascript index.html, sub1.html, sub2.html css-style.css js-main.js nav.js document.querySelector() ---> 파일이 너무 많음 -이를 보완한 react ..

index.html main.js import { WaveGroup } from './wavegroup.js' class App { constructor() { // 캔버스 생성하기 this.canvas = document.createElement('canvas'); this.ctx = this.canvas.getContext('2d'); document.body.appendChild(this.canvas); this.WaveGroup = new WaveGroup(); window.addEventListener('resize', this.resize.bind(this), false); this.resize(); window.requestAnimationFrame(this.animate.bind(this)..

mgame.html game.html

index.html main.js import utils from './utils.js'; console.log(utils.randomFloatBetween(10, 15)); // 1. 캔버스 불러오기 const canvas = document.querySelector('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const ctx = canvas.getContext('2d'); //2. 파티클 클래스 정의 class Particle { constructor(x, y, radius, velocity) { this.x = x; this.y = y; this.radius=radius; this.velocity ..

분리된 파일 export 지시자 외부모듈에서 해당 변수나 함수에 접근할 수 있도록 함(모듈 내보내기) import 지시자 외부모듈의 기능을 가져와서 사용할 수 있음(모듈 가져오기) index.html sayHi.js export function sayHi(user) { return `안녕! ${user}`; } export function sayHi2(user) { return `랄랄라! ${user}`; } // export { sayHi, sayHi2 }; // 두함수를 내보냄

1. html에 canvas 태그 추가하기 (default width=300px height 150px) 2. JavaScript - getContext()메서드 캔버스의 드로잉 컨텍스트를 반환해줌 1) 사각형 그리기 fillRect(x, y, width, height) 채워진 사각형 그리기 strokeRect(x, y, width, height) 선으로 된 사각형 그리기 clearRect(x, y, width, height) 지정된 사각형 영역을 지움 2) 패스 그리기(Illustrator의 펜툴과 비슷) beginPath() 새 경로를 만듦 closePath() 마지막 위치에서 시작 위치를 연결 stroke() 윤곽선 그리기 fill() 칠하기 moveTo(x, y) 지정된 위치에서 시작한다. (펜툴..

index.html booklist 2022년도 2021년도 2020년도 2019년도 글쓴이 제목 년도 main.js function loadbooks() { // fetch api // fetch('url') -> 네트워크 주소를 적으면 받아옴 return fetch('data/data.json') // 성공하면 받아온 데이터를 제이슨 변환 .then(response => response.json()) .then(data => data.books); } function displaybooks(books){ // html 문서의 ul을 선택 const container = document.querySelector('.books'); container.innerHTML = books.map(item => ..