rhanziy

HTML 삽입 미리보기할 수 없는 소스 리액트 강의 새로 들으면서 기초다듬기 리액트에서 사용하는 jsx는 javascript와 거의 똑같다. 규칙이 다를뿐! 컴포넌트들을 생성해서(이름 첫글자는 대문자) 조립해서 만드는 듯. 동적 구현을 위해 아예 이벤트리스너를 태그로 이용한다. 를 포함하고 를 이용해 브라우저가 jsx로 짠 코드들을 인식하게한다. 지금은 이벤트리스너를 실행하면 콘솔찍는 것만 배웠는데 스타일 관련된건 어떻게 처리하려낭...

유튜브에서 바닐라 자바스크립트 canvas를 이용해 장애물을 피해 달리면서 점수를 얻는 게임 프로젝트 영상을 봤다. https://youtu.be/7JtLHJbm0kA = (this.gameHeight - this.height) - 40; } 이미 코드에 땅에 있는 상태를 리턴하는 함수가 있어서 2번을 이용해 코드를 짰다! class InputHandler { constructor(){ this.keys = []; window.addEventListener('keydown', e => { if(!this.keys.includes(e.key)){ this.keys.push(e.key); } }); window.addEventListener('keyup', e => { if(this.keys.includes..

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 어떻게 호출 되었는지에 따라 this 에 바인딩할 객체가 동적으로 결정되었다. 하지만 ES6의 Arrow Function은 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 화살표 함수는 자신의 this가 없다. 대신 화살표 함수가 둘러싸는 렉시컬 범위(lexical scope)의 this가 사용된다. 즉, 언제나 화살표 함수의 상위 스코프, 화살표 함수가 선언된 스코프의 this를 가리킨다. const name = 'rhan'; const rhanyi = { name: 'yi', getName: function () { console.log(this.name); }, }; rhanyi.getName(..

HTML 삽입 미리보기할 수 없는 소스 버튼을 누르면 colors 배열의 색을 랜덤으로 left, right 변수에 담아 그라데이션 배경으로 채운다. 같은 색이 채워지는걸 방지하고자 left와 right색이 같으면 컬러를 뽑는 함수를 다시 실행한다. 기능을 1. 색 랜덤 뽑기, 2. 색을 비교하여 배경색 바꾸기로 총 2개로 분리해봤는데 굳이 안그래도 될 것 같다. indexOf()함수를 사용해보자. indexOf 함수는, 문자열(string)에서 특정 문자열(searchvalue)을 찾고, 검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴합니다. 파라미터 searchvalue : 필수 입력값, 찾을 문자열 position : optional, 기본값은 0, string에서 searchvalue..

HTML 삽입 미리보기할 수 없는 소스 const range = parseInt(randomFrm.rangeNum.value); 사용자가 input에 입력한 숫자를 변수 range에 담고 const randomNum = Math.round(Math.random( ) * range); 랜덤숫자는 랜덤으로 나온 0 이상 1 미만의 부동소수점 난수에 range를 곱해서 반올림한다.

HTML 삽입 미리보기할 수 없는 소스 1. 2022년 크리스마스 - 현재날짜를 until변수에 담는다. 2. 담아진 변수값은 밀리초 단위이므로 날짜 형식에 맞게 변환해준다. until/(1000*60*60*24) = 1일로 나누면 총 day를 구할 수 있다. until/(1000*60*60)%24) = 1시간으로 나누면 총 hours를 구할 수 있는데 이미 day를 구했기 때문에 day를 나눈 나머지 값(%)이 남은 hours가 된다. 3. 시, 분, 초가 1의 자리면 padStart를 이용해 0을 추가해준다. (ex. 07시 53분 04초)

자바스크립트에서는 document객체를 이용하여 html의 구조를 선택해서 조작하고, 추가할 수 있다. document는 DOM 트리의 최상위 객체이다. 브라우저는 HTML 문서를 로드하기 전에 document 객체를 먼저 만든다. 그리고 document 객체를 뿌리로 하는 DOM 트리를 만든다. 문서 객체 모델(DOM)이란? 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. > html의 element로 생각하면 된당. document 객체의 역할은 아래와 같다. - 프로퍼티로 HTML 문서의 전반적 속성을 나타냄 - 메소드로 ..

array.forEach는 받아온 array를 for 반복문 없이 item(element) 하나씩 function에 넣을 수 있는 함수 arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) 다음 세 가지 매개변수를 받는다. element - 처리할 현재 요소. index(Optional) - 처리할 현재 요소의 인덱스. array(Optional) - filter를 호출한 배열. const arr = ["pizza", "hamburger", "chicken"]; arr.forEach((food)=> console.log(food)); 배열안의 element 하나하나를 food라는 이름으로 정의하고 콘솔을 찍은 결과값 pizza hamburge..