본문 바로가기

Ecmascript

 (24)
[operator] + !! || && + !! || && ||와 &&는 잘쓰면 if문을 훨씬 덜 쓸수 있어서 평범하게 if문을 쓰지 못하는 jsx에서 매우 유용 !!는 이중부정으로 boolean 값으로 형변환 해준다. 는 덧셈 연산자이지만 숫자형 문자열 앞에 쓰면 number 값으로 형변환 해준다 + parseInt()메소드나 Number() 생성자 함수대신 사용할 수 있다. 숫자형 문자열을 숫자랑 === 비교해야 할때 간단하게 사용하기 좋다. let str = "1234"; console.log(typeof parseInt(str), parseInt(str); // number, 1234 console.log(typeof +str, +str); // number, 1234 !! 값이 있으면 true 값이 없는 것들을 전부 false로 변환..
캔버스와 비디오 캔버스 drawImage()에 넣을수 있는 인자들 이미지 비디오 캔버스 비디오 태그 비디오 태그 속성 autoplay: 자동재생 muted: 음소거 loop: 자동반복 전용 이벤트리스너 'canplaythroug' : 재생할 수 있을때 실행 크롬은 소리 있는 영상은 자동재생을 못하게 되어있음 Video 이 브라우저는 캔버스를 지원하지 않습니다. 비디오 객체와 폰트 글씨를 렌더링 하는 메서드: fillText(글씨, x, y) 비디오 Dom객체의 currentTime 속성 : 현재 재생 시간 const canvas = document.querySelector('.canvas'); const ctx = canvas.getContext('2d'); ctx.font =..
캔버스 #01 애니메이션 중지, 이미지 캔버스 애니메이션 멈추기 return 이용, 내부에서 실행할때 cancelAnimationFrame 이용, 외부에서 실행할때 clearInterval, setInterval로 구현시 function draw() { count++; if(count%30 === 0){ // 기존 원 지우기 : 빼먹으면 잔상 다 그려짐 context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); // 새로 원 그리기 context.arc(xPos, 150, 5, 0, Math.PI*2, false); context.fill(); xPos += 5; } // $1. 애니메이션 멈추는 방법 -> return 이용, 내부에서 실행할때 if(xPos >= ca..
캔버스 #01 그리기와 애니메이션 원리 캔버스 사이즈 설정 캔버스 태그의 크기는 css가 아닌 속성으로 넣어줘야 정확하다. 레티나 디스플레이에서 또렷하게 보이게 하기 위해 속성으로 크기 2배로 설정하고 CSS로 절반으로 줄여서 만드는 방법이 가능하다. ex) 풀사이즈라면 윈도우 사이즈를 구해서 2배로 하고 CSS로 100%를 준다. 색 fillStyle = 'color' 그릴 도형에 칠할 색을 선택 색상명 규칙은 CSS와 동일(name, rgba, #16진수) 도형을 그리기전에 먼저 붓에 물감은 바른다는 개념으로 이해 할 것 fillRect(x, y, width, height) 색칠한 도형을 그린다. 이전에 색을 고르지 않았다면 기본색은 black clearRect(x, y, width, height) 색칠한 도형에 색을 지움 strokeRe..
[비동기 처리] generator의 활용 -> function* generator 함수 실행 중지와 실행 재개가 컨트롤이 가능한 함수 function으로 구현하며 함수명 앞에 *이 붙는다. return이 아닌 yield로 값을 반환한다.(중단점 + 값 반환 역할) next()를 호출하면 yield 앞까지의 값이 반환된다. next()의 반환값은 {value: 반환값, done: 제너레이터 함수 끝까지 실행여부} function * counter() { yield 1 yield 2 yield 3 } const g = counter(); console.log(g.next()); // {value: 1, done: false} console.log(g.next()); // {value: 2, done: false} console.log(g.next()); // {value..
[비동기 병렬 처리]Promise의 메서드 Promise.all(배열) 매개변수 배열에 담긴 Promise들이 병렬로 모두 실행이 끝날때까지 기다리고 모두 성공한 경우 처리를 실행 then의 매개변수에는 Promise들에서 전달된 결과값이 배열로 들어옴 const promise1 = new Promise((resolve, reject) => resolve('즉시 호출')); // Promise 내부에 setTimeout이 있으므로 그 시간만큼 기다림 const promise2 = new Promise((resolve, reject) => { setTimeout(() => resolve('3초 뒤 호출'), 3000); }); Promise.all([promise1, promise2]) .then(values => co..
캔버스 기초 HTML5에 추가된 그림을 그릴 수 있게 해주는 태그 자바로 Graphic2D 였나? 그래프 그리는걸 한적이 있는데 문법이 상당히 비슷하면서 자바스크립트라 더 간결하다. 주말에 공부하기 귀찮을때 캔버스 가지고 놀 생각이다. 다음에 볼 강의 https://www.youtube.com/watch?v=JFQOgt5DMBY&list=PLe9WXHRkq9p2Yl0z2zskv-FhP5sinISTc canvas 태그를 만들고 크기를 정해준다 각 기능을 실행할 버튼 태그 추가 네모 그리기 원 그리기 선 그리기 도형 그리기 캔버스로 그림을 그리는 것은 context 객체를 가져오는것부터 시작된다. fillRect, clearRect, strokeRect으로 간단히 사각형을 만들 수 있다. function drawRect..
[비동기 처리] Promise와 async/await 비동기의 콜백방식 처리 사실 실무에서는 setTimeout처리보다는 ajax등 비동기통신으로 오는 데이터를 가지고 처리하는데서 발생하는 문제지만 간단한 설명/분석을 위해서 setTimeout으로 예를 들었다. // 3초뒤에 2가 출력되는 것을 바라고 평범하게 코딩함 function doSomething() { let num=1; setTimeout(function(){ num = 2; },3000); console.log(num); // 결과는 바로 1 출력 } // callback 방식으로 처리 function callSomething(callback) { setTimeout(function(){ callback(2); },3000); } callSomething(function(data){ conso..

티스토리툴바