벨로그에서 codepen 코드 올리는법
https://velog.io/@velog/katex-and-embed-support
https://velog.io/@mooongs/%EB%B2%A8%EB%A1%9C%EA%B7%B8%EC%97%90-%EC%BD%94%EB%93%9C%ED%8E%9Ccodepen-%EC%82%BD%EC%9E%85%ED%95%98%EA%B8%B0

1. 이고잉님 강의

p5.js

애니메이션을 제어할 수 있는 프레임워크이다.

https://p5js.org/ko/

CRUD (백엔드없이)

filter

필터는 콜백함수의 리턴값이 참인 원소들만 배열에 담아서 돌려준다.

target.id

문자열로 바껴서 쓸때는 숫자로 바꿔야한다

form tag

onsubmit 이벤트가 있어서 onclick대신 쓸 수 있다.

execute context

let : 값 바꿈
const : 값 못바꿈

no = 'no'; // 슈퍼변수
var v0 = 'v0';
let l0 = 'lo';

개발자도구
call stack
anonymous.: global excute context
슈퍼변수는 어디서 실행하건 global 변수이다.
js의 built-in api들은 window 안에 들어있다.
슈퍼변수와 var 는 global execute context에서 둘 다 global scope이 된다

var은 global execute context에서 선언되었을때만 전역이다.
슈퍼변수는 항상 전역이다.
var는 global scope 객체, let은 script scope 객체

https://gist.github.com/egoing/7e8bce3f04542e061629166be91598cc

2. 코치님 강의

parseInt() vs. Number()

https://jamong-icetea.tistory.com/14

tic-tac-toe

class 내부에서 handleEvent 실행된다.

https://codepen.io/bee-arcade/pen/RVaemx?editors=0010

this 사용법

class vehicle {
	handleEvent(event) {
    	console.log(event.type);
      
      
      this.onMouseUp();
    }
  	onMouseUp() {
    	alert('마우스눌렀다');
    }
}

const car = document.getElementById('car');
car.addEventListener('mousedown', vehicle);
car.addEventListener('mouseup', vehicle);

이 코드에서 car 버튼 mousedown(클릭한 상태)할때 console창에 event type으로 mousedown이라고 뜬다.
버튼에서 마우스클릭을 그만두면 mouseup이라고 뜬다.
그게 event.type이다.
그리고 vehicle 클래스가 실행되면 handleEvent함수가 자동으로 실행되고, 그때 this.onMouseUp()함수도 실행되기때문에 alert가 뜨게 된다.

매개변수가 파라미터

const car = vehicle(arr, (e) => e*2); 

function vehicle(array, func) {
	for문 {
		새로운배열.push(func(array[i]))
    }
}

이런식으로 매개변수에 함수를 넣을 수 있다.

Rest Operator

function sumArray(sum, ...arr) {
  // arr.lengthsms sum을 제외한 매개변수의 개수
	if (arr.length === 0) return sum;
  
  const [head, ...tail] = arr;
  
  // arr.length는 하나씩 줄어들며, 길이가 0이되면 합을 반환한다.
  return sumArray(sum = head, ...tail);
}

이 rest operator를 사용하면 재귀적으로 함수가 작동하며 for문을 안써도 된다.
sum, ...arr 의 경우 sumArray(0, 1, 2, 3, 4); 라고 할 경우 0은 sum에, [1, 2, 3, 4]는 arr에 담긴다.
만약 함수가sumArray(sum1, sum2, sum3, ... arr) 이라면 sum1 = 0, sum2 = 1, sum3=2가 되고 arr = [3, 4]가 된다.

...arr 설명: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters

forEach

foreach vs. map
foreach는 배열의 각 원소를 순회하며 출력한다
map은 새로운 배열을 만들어 리턴한다.

https://m.blog.naver.com/wideeyed/221877912230

String 변경

문자열 뒤집기

문자열.split('').reverse().join('');

https://kpbro.tistory.com/3

입력값의 n자리 단위씩 ,로 묶어서 반환

return 값.toLocaleString(n);

문자열의 n번째 수부터 m개의 문자열 반환

return a.substr(n, m);

every()

every는 배열안의 모든 원소가 콜백함수를 통과하는지 검사한다. 결과는 불리안으로 나옴

return array.every((e) =>
	Number.isInteger(Math.sqrt(e))
    );

return array.ever((e) => {
	return Number.isInteger(Math.sqrt(e));
});

하나라도 결과가 false면 false를 반환하고, 전부다 true여야 true를 반환한다.
Number.isInteger(값)는 값이 정수인지 확인한다. 정수면 true , 아니면 false를 반환한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/every
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger