분류 전체보기 (168) 썸네일형 리스트형 캔버스 #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.. 정규표현식 \w \W \d \D \b \B \A \Z 정규표현식의 패턴들 18~24) 경계() \w \W \d \D \b \B \A \Zpattern : \w [A-z0-9__] 와 동일 공백은 미포함(아래는 귀찮아서 밑줄안뺀거) source : A1 B2 c3 d__4 e:5 ffGG77--____-- \w first match : A1 B2 c3 d__4 e:5 ffGG77--____-- all matches : A1 B2 c3 d__4 e:5 ffGG77--____-- \w* *때문에 글자가 더 있어도 단어로 인식해서 first match인 경우가 다르다 first match : A1 B2 c3 d__4 e:5 ffGG77--____-- all matches : A 탐욕적인 수량자(Greedy Quntifiers), 게으른 수량자(Lazy Quntifiers) 정규표현식의 패턴들 11~14) 수량자2(Quntifiers) 수량자 갯수제한 {} 탐욕적인 수량자와 게으른 수량자 차이 pattern : {글자수} 앞에 있는 패턴에 일치하는 글자수를 지정(공백포함)pattern : {글자수1, 글자수2} 앞에 있는 패턴에 일치하는 글자수가 첫번째 글자수 이상 두번째 글자수 이하pattern : {글자수1, } 에 있는 패턴에 일치하는 글자수가 첫번째 글자수 이상만 되면 됨 문자{0,} === 문자* 문자{1,} === 문자+source : One ring to bring them all and in the darkness bind them .{5} 어떤 글자던 5글자까지 => all matched의 경우 5글씩 끊기 때문에 %5 나머지 갯수는 매치안됨 first ma.. 삽입정렬 선택정렬(O(n^2)) 버블정렬과 마찬가지로 기본적인 정렬 1번째 부터 하나씩 숫자를 선택해서 반복하면서 선택한 숫자의 위치를 찾아서 정렬하는 방식 즉 선택한 숫자보다 큰 숫자들은 오른쪽으로 한 칸씩 밀어내고 빈 자리에 선택한 숫자를 넣는 원리 이해하기 좀 복잡한 편인데 효율도 안좋아서 안쓰는게 날듯 선택한 숫자보다 큰 숫자들은 오른쪽으로 한 칸씩 밀어내고 빈 자리에 선택한 숫자를 넣는 겁니다. function insertionSort(arr) { let i=1, j, temp; for (i; i = 0 && temp < arr[j];.. [webpack] webpack.config, react-hot-loader webpack.config 설정 자주 쓰는 모듈 path, webpack 상단 변수로 모듈 선언const path = require('path'); const webpack = require('webpack'); module options의 presets에 @babel/preset-env는 배열로 선언하면 babel이 컴파일 할 대상 브라우저도 지정 가능 표현식은 아래 사이트 참고 https://github.com/browserslist/browserslist#queries module.exports = { // ...entry module: { rules: [{ test: /\.jsx?/, loader: 'babel-loader', options: { pres.. 정규표현식 * + ? 정규표현식의 패턴들 11~14) 수량자(Quntifiers) * + ? 어거지 암기법 0을 곱하면 0 그러므로 0개이상 1을 더하면 무조건 1이상 그러므로 1개이상 모른다는 표시는 있을수도 없을수도 있다는것 그러므로 0아니면 1 pattern : * *앞에 등장하는 문자 => 0~여러개 0개 라는건 *문자가 없어도 해당한다는 것 *앞에 문자를 제거하고 매칭되는지 보고 그다음에 문자 있는 경우 생각해보는게 더 쉬운듯 source : aabc abc bc a*b b가 있고 b앞에 a가 없을수도 있고 여러개 있을수도 있음 first match : aabc abc bc all matched : aabc abc bc pattern : + *앞에 등장하는 문자 => 1개~여러개(양수여야함) 없으면 해당안함 a+b .. 이전 1 ··· 17 18 19 20 21 다음
